.aaps-referrals {
  --aaps-text-soft: #665f57;
  margin: 2rem 0;
}

.aaps-referral-section {
  --aaps-card-tint: #f6f8fb;
  --aaps-card-border: #d7dee8;
  --aaps-card-accent: #6d819b;
  --aaps-link-bg: #fbfdff;
  --aaps-heading: #4d5e72;
  --aaps-card-pattern: none;
  margin: 2.25rem 0;
}

.aaps-referral-section h3 {
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--aaps-card-border);
  color: var(--aaps-heading);
  font-size: 1.45rem;
}

.aaps-referral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.aaps-referral-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--aaps-card-tint), #fff 68%);
  border: 1px solid var(--aaps-card-border);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}

.aaps-referral-card > * {
  position: relative;
  z-index: 1;
}

.aaps-referral-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4px;
  background: var(--aaps-card-accent);
  opacity: .72;
}

.aaps-referral-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px 0 0;
  background: var(--aaps-card-pattern);
  color: var(--aaps-card-accent);
  opacity: .82;
  pointer-events: none;
}

.aaps-referral-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.aaps-referral-card h4 {
  margin: 0;
  font-size: 1.08rem;
}

.aaps-public-status {
  flex: 0 0 auto;
  font-size: .75rem;
  border-radius: 999px;
  padding: .2rem .55rem;
  background: #fff3cd;
  color: #664d03;
  font-weight: 700;
}

.aaps-referral-notes {
  margin: .7rem 0 0;
  color: var(--aaps-text-soft);
}

.aaps-referral-notes p {
  margin: .45rem 0 0;
}

.aaps-referral-notes p:first-child {
  margin-top: 0;
}

.aaps-referral-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.aaps-referral-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--aaps-card-border);
  background: var(--aaps-link-bg);
  color: var(--aaps-heading);
  text-decoration: none;
  font-weight: 600;
}

.aaps-referral-links a:hover {
  border-color: var(--aaps-card-accent);
}

.aaps-palette-default {
  --aaps-card-tint: #f5f8fb;
  --aaps-card-border: #d3dde8;
  --aaps-card-accent: #6682a0;
  --aaps-heading: #4a6077;
  --aaps-link-bg: #fbfdff;
}

.aaps-palette-heritage {
  --aaps-card-tint: #f3f7f4;
  --aaps-card-border: #cadccb;
  --aaps-card-accent: #5d8968;
  --aaps-heading: #45684f;
  --aaps-link-bg: #fbfffb;
}

.aaps-palette-design {
  --aaps-card-tint: #f4f1fb;
  --aaps-card-border: #d8d0ec;
  --aaps-card-accent: #6d5aa8;
  --aaps-heading: #4d4380;
  --aaps-link-bg: #fbf9ff;
}

.aaps-palette-design .aaps-referral-card:nth-child(4n+2) { --aaps-card-tint: #eef5fb; --aaps-card-border: #c8ddeb; --aaps-card-accent: #4f7fa3; --aaps-heading: #375f7f; }
.aaps-palette-design .aaps-referral-card:nth-child(4n+3) { --aaps-card-tint: #f9f1f6; --aaps-card-border: #e5cad9; --aaps-card-accent: #9a5f82; --aaps-heading: #754762; }
.aaps-palette-design .aaps-referral-card:nth-child(4n+4) { --aaps-card-tint: #f3f7ef; --aaps-card-border: #d1dfc4; --aaps-card-accent: #728e55; --aaps-heading: #546c3d; }

.aaps-palette-color {
  --aaps-card-tint: #fff3ee;
  --aaps-card-border: #efc9bc;
  --aaps-card-accent: #c75e44;
  --aaps-heading: #89412f;
  --aaps-link-bg: #fff8f5;
}

.aaps-palette-color .aaps-referral-card:nth-child(4n+2) { --aaps-card-tint: #fff8e8; --aaps-card-border: #efd9a3; --aaps-card-accent: #c8952f; --aaps-heading: #806025; }
.aaps-palette-color .aaps-referral-card:nth-child(4n+3) { --aaps-card-tint: #f2f7ff; --aaps-card-border: #c9d9ef; --aaps-card-accent: #527ebd; --aaps-heading: #3b5f91; }
.aaps-palette-color .aaps-referral-card:nth-child(4n+4) { --aaps-card-tint: #f5f8ec; --aaps-card-border: #d6e2b2; --aaps-card-accent: #7b963f; --aaps-heading: #5e7330; }

.aaps-palette-garden {
  --aaps-card-tint: #edf8ec;
  --aaps-card-border: #bddcb9;
  --aaps-card-accent: #478445;
  --aaps-heading: #356d34;
  --aaps-link-bg: #f7fff5;
  --aaps-card-pattern: radial-gradient(ellipse at 12px 14px, color-mix(in srgb, currentColor 36%, transparent) 0 2px, transparent 3px), radial-gradient(ellipse at 25px 7px, color-mix(in srgb, currentColor 26%, transparent) 0 2px, transparent 3px);
}

.aaps-palette-garden .aaps-referral-card::after { background-size: 32px 24px; }

.aaps-palette-garden .aaps-referral-card:nth-child(3n+2) { --aaps-card-tint: #f3fae9; --aaps-card-border: #ccdfaa; --aaps-card-accent: #6f9337; --aaps-heading: #55702b; }
.aaps-palette-garden .aaps-referral-card:nth-child(3n+3) { --aaps-card-tint: #edf8f2; --aaps-card-border: #b9ddcb; --aaps-card-accent: #3f8969; --aaps-heading: #2f6b51; }

.aaps-palette-masonry {
  --aaps-card-tint: #f2f6f7;
  --aaps-card-border: #c9d8dd;
  --aaps-card-accent: #5d8090;
  --aaps-heading: #465f6b;
  --aaps-link-bg: #fbfeff;
  --aaps-card-pattern: linear-gradient(90deg, color-mix(in srgb, currentColor 28%, transparent) 1px, transparent 1px), linear-gradient(0deg, color-mix(in srgb, currentColor 24%, transparent) 1px, transparent 1px);
}

.aaps-palette-masonry .aaps-referral-card::after { background-size: 34px 18px; }

.aaps-palette-plaster {
  --aaps-card-tint: #f8f7ef;
  --aaps-card-border: #dfdac5;
  --aaps-card-accent: #928655;
  --aaps-heading: #6b633d;
  --aaps-link-bg: #fffef6;
  --aaps-card-pattern: radial-gradient(circle at 8px 8px, color-mix(in srgb, currentColor 22%, transparent) 0 1px, transparent 2px), radial-gradient(circle at 20px 16px, color-mix(in srgb, currentColor 18%, transparent) 0 1px, transparent 2px);
}

.aaps-palette-plaster .aaps-referral-card::after { background-size: 28px 22px; }

.aaps-palette-roof {
  --aaps-card-tint: #f1f5f8;
  --aaps-card-border: #c7d5df;
  --aaps-card-accent: #557c95;
  --aaps-heading: #3e5f74;
  --aaps-link-bg: #f8fcff;
  --aaps-card-pattern: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 28%, transparent) 0 1px, transparent 1px 11px);
}

.aaps-palette-wood {
  --aaps-card-tint: #f2f8f5;
  --aaps-card-border: #c9ded4;
  --aaps-card-accent: #5f9178;
  --aaps-heading: #486f5c;
  --aaps-link-bg: #fafffc;
  --aaps-card-pattern: radial-gradient(ellipse at 14px 13px, transparent 0 10px, color-mix(in srgb, currentColor 30%, transparent) 10px 11px, transparent 12px), radial-gradient(ellipse at 42px 13px, transparent 0 10px, color-mix(in srgb, currentColor 24%, transparent) 10px 11px, transparent 12px), repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 12%, transparent) 0 1px, transparent 1px 8px);
}

.aaps-palette-wood .aaps-referral-card::after { background-size: 56px 24px, 56px 24px, 16px 100%; background-position: 0 0, 28px 12px, 0 0; }

.aaps-palette-wood .aaps-referral-card:nth-child(3n+2) { --aaps-card-tint: #f1f7fb; --aaps-card-border: #c8dbe7; --aaps-card-accent: #5b87a3; --aaps-heading: #43687f; }
.aaps-palette-wood .aaps-referral-card:nth-child(3n+3) { --aaps-card-tint: #f6f4fb; --aaps-card-border: #d7d0e7; --aaps-card-accent: #7566a0; --aaps-heading: #584d78; }

.aaps-palette-metal {
  --aaps-card-tint: #f3f6f6;
  --aaps-card-border: #c9d7d6;
  --aaps-card-accent: #5a817d;
  --aaps-heading: #41625f;
  --aaps-link-bg: #faffff;
  --aaps-card-pattern: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 20%, transparent) 0 1px, transparent 1px 10px), repeating-linear-gradient(0deg, color-mix(in srgb, currentColor 14%, transparent) 0 1px, transparent 1px 10px);
}

.aaps-palette-systems {
  --aaps-card-tint: #edf6ff;
  --aaps-card-border: #b9d7ef;
  --aaps-card-accent: #2f7fc0;
  --aaps-heading: #235f91;
  --aaps-link-bg: #f6fbff;
  --aaps-card-pattern: linear-gradient(90deg, transparent 0 12px, color-mix(in srgb, currentColor 26%, transparent) 12px 13px, transparent 13px 28px), linear-gradient(0deg, transparent 0 14px, color-mix(in srgb, currentColor 20%, transparent) 14px 15px, transparent 15px 30px);
}

.aaps-palette-systems .aaps-referral-card:nth-child(3n+2) { --aaps-card-tint: #f0f8ff; --aaps-card-border: #c1dced; --aaps-card-accent: #3e91c6; --aaps-heading: #2f6f99; }
.aaps-palette-systems .aaps-referral-card:nth-child(3n+3) { --aaps-card-tint: #eef4ff; --aaps-card-border: #c6d4f2; --aaps-card-accent: #4b70bd; --aaps-heading: #385893; }

.aaps-palette-hearth {
  --aaps-card-tint: #f7f3f8;
  --aaps-card-border: #ddcfe5;
  --aaps-card-accent: #8d639b;
  --aaps-heading: #694a75;
  --aaps-link-bg: #fefaff;
}

.aaps-palette-glass {
  --aaps-card-tint: #eef9f9;
  --aaps-card-border: #bce1e1;
  --aaps-card-accent: #3d8c8f;
  --aaps-heading: #2f6a6c;
  --aaps-link-bg: #f7ffff;
  --aaps-card-pattern: linear-gradient(135deg, color-mix(in srgb, currentColor 26%, transparent) 0 1px, transparent 1px 18px), linear-gradient(45deg, color-mix(in srgb, currentColor 18%, transparent) 0 1px, transparent 1px 18px);
}

.aaps-palette-tile {
  --aaps-card-tint: #eef8f6;
  --aaps-card-border: #afdcd5;
  --aaps-card-accent: #2c9a8a;
  --aaps-heading: #247469;
  --aaps-link-bg: #f7fffd;
  --aaps-card-pattern: linear-gradient(45deg, color-mix(in srgb, currentColor 14%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, currentColor 14%, transparent) 75%), linear-gradient(45deg, color-mix(in srgb, currentColor 14%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, currentColor 14%, transparent) 75%);
}

.aaps-palette-tile .aaps-referral-card::after {
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  opacity: .55;
}

.aaps-palette-tile .aaps-referral-card:nth-child(4n+2) { --aaps-card-tint: #fff3e8; --aaps-card-border: #efcba3; --aaps-card-accent: #d1782f; --aaps-heading: #965723; }
.aaps-palette-tile .aaps-referral-card:nth-child(4n+3) { --aaps-card-tint: #f3f0ff; --aaps-card-border: #d0c6ee; --aaps-card-accent: #7155bc; --aaps-heading: #513f89; }
.aaps-palette-tile .aaps-referral-card:nth-child(4n+4) { --aaps-card-tint: #f2f6ff; --aaps-card-border: #bfcef0; --aaps-card-accent: #466ec2; --aaps-heading: #355596; }

.aaps-palette-interior {
  --aaps-card-tint: #f9f2f7;
  --aaps-card-border: #e5cfe0;
  --aaps-card-accent: #936a86;
  --aaps-heading: #6d5064;
  --aaps-link-bg: #fffbfe;
}

.aaps-palette-kitchen {
  --aaps-card-tint: #f1f8f4;
  --aaps-card-border: #c3dfcf;
  --aaps-card-accent: #55906e;
  --aaps-heading: #3f6c52;
  --aaps-link-bg: #f9fffb;
}

.aaps-palette-kitchen .aaps-referral-card:nth-child(5n+2) { --aaps-card-tint: #eef7f9; --aaps-card-border: #bddce3; --aaps-card-accent: #4c8fa0; --aaps-heading: #3a6c78; }
.aaps-palette-kitchen .aaps-referral-card:nth-child(5n+3) { --aaps-card-tint: #f7f1fb; --aaps-card-border: #dcc7eb; --aaps-card-accent: #8a61a8; --aaps-heading: #67497e; }
.aaps-palette-kitchen .aaps-referral-card:nth-child(5n+4) { --aaps-card-tint: #f0f7ff; --aaps-card-border: #bfd9ef; --aaps-card-accent: #4f88bb; --aaps-heading: #3a668d; }
.aaps-palette-kitchen .aaps-referral-card:nth-child(5n+5) { --aaps-card-tint: #f5f7ee; --aaps-card-border: #d7dfbd; --aaps-card-accent: #819456; --aaps-heading: #606f41; }

.aaps-palette-inspection {
  --aaps-card-tint: #f3f6f8;
  --aaps-card-border: #ced8df;
  --aaps-card-accent: #63798b;
  --aaps-heading: #4a5e6e;
  --aaps-link-bg: #fbfdff;
}

.aaps-palette-remediation {
  --aaps-card-tint: #f2f7f5;
  --aaps-card-border: #cce0d8;
  --aaps-card-accent: #5f8874;
  --aaps-heading: #486956;
  --aaps-link-bg: #fafffc;
}

.aaps-palette-insulation {
  --aaps-card-tint: #fff1f7;
  --aaps-card-border: #efc7d9;
  --aaps-card-accent: #c85f8e;
  --aaps-heading: #8d4566;
  --aaps-link-bg: #fff8fb;
  --aaps-card-pattern: radial-gradient(circle at 18% 22%, rgba(200, 95, 142, .18) 0 3px, transparent 4px), radial-gradient(circle at 70% 62%, rgba(200, 95, 142, .14) 0 4px, transparent 5px);
}

.aaps-palette-security {
  --aaps-card-tint: #fff0e8;
  --aaps-card-border: #efc3ae;
  --aaps-card-accent: #d75b32;
  --aaps-heading: #943f25;
  --aaps-link-bg: #fff7f2;
}

.aaps-palette-security .aaps-referral-card:nth-child(3n+2) { --aaps-card-tint: #fff6e8; --aaps-card-border: #efd2a5; --aaps-card-accent: #d58a27; --aaps-heading: #94601d; }
.aaps-palette-security .aaps-referral-card:nth-child(3n+3) { --aaps-card-tint: #fff0ed; --aaps-card-border: #edc3bc; --aaps-card-accent: #c9473c; --aaps-heading: #87332c; }

.aaps-palette-wallpaper {
  --aaps-card-tint: #f8f1fb;
  --aaps-card-border: #dfcaeb;
  --aaps-card-accent: #8e63a8;
  --aaps-heading: #68497b;
  --aaps-link-bg: #fefaff;
  --aaps-card-pattern: radial-gradient(circle at 10px 10px, rgba(142, 99, 168, .20) 0 2px, transparent 3px), radial-gradient(circle at 24px 24px, rgba(142, 99, 168, .15) 0 2px, transparent 3px);
}

.aaps-palette-wallpaper .aaps-referral-card::after {
  background-size: 28px 28px;
}

.aaps-palette-hardware {
  --aaps-card-tint: #f2f6f8;
  --aaps-card-border: #cbd8df;
  --aaps-card-accent: #5c7f92;
  --aaps-heading: #456273;
  --aaps-link-bg: #fbfdff;
}

.aaps-palette-builder {
  --aaps-card-tint: #f3f7fb;
  --aaps-card-border: #cbdbe8;
  --aaps-card-accent: #5a82a0;
  --aaps-heading: #446277;
  --aaps-link-bg: #fbfdff;
}