.awml{--awml-ink:#251919;--awml-muted:#6b5c6b;--awml-line:#eedde8;--awml-soft:#fdf5fa;--awml-accent:#B4358F;max-width:1180px;margin:0 auto;padding:32px 20px 72px;color:var(--awml-ink);font-family:Rosario,sans-serif}.awml__hero{margin-bottom:40px}.awml__title{font-size:32px;font-weight:700;margin-bottom:8px;color:var(--awml-ink)}.awml__subtitle{font-size:16px;color:var(--awml-muted)}.awml__toolbar{margin-bottom:24px}.awml__search{width:100%;padding:12px 16px;border:1px solid var(--awml-line);border-radius:8px;font-size:15px}.awml__categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.awml__cat{padding:6px 16px;border:1px solid var(--awml-line);border-radius:20px;background:white;cursor:pointer;font-size:13px;color:var(--awml-muted)}.awml__cat--active,.awml__cat:hover{background:var(--awml-accent);color:white;border-color:var(--awml-accent)}.awml__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}.awml__card{background:white;border:1px solid var(--awml-line);border-radius:12px;padding:24px}.awml__card-title{font-size:18px;font-weight:600;margin-bottom:8px}.awml__card-def{font-size:14px;color:var(--awml-muted);line-height:1.6;margin-bottom:12px}.awml__card-meta{margin-bottom:12px}.awml__badge{display:inline-block;padding:2px 10px;background:var(--awml-soft);border-radius:12px;font-size:11px;color:var(--awml-muted)}.awml__read-more{font-size:13px;color:var(--awml-accent);text-decoration:none;font-weight:600}.awml__empty{text-align:center;padding:40px;color:var(--awml-muted)}.awml__footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--awml-line)}.awml__disclaimer{font-size:12px;color:var(--awml-muted)}@media(max-width:768px){.awml__grid{grid-template-columns:1fr}}

/* ============================================================
   DETAIL PAGE v2 — NuLifeCare Pink Brand
   ============================================================ */

.awml-detail {
  --ink: #251919;
  --muted: #6b5c6b;
  --line: #eedde8;
  --bg: #fdf8fb;
  --white: #fff;
  --accent: #B4358F;
  --accent-light: #fce4f3;
  --radius: 14px;
  --shadow-sm: 0 1px 3px rgba(180,53,143,.06);
  --shadow-md: 0 4px 16px rgba(180,53,143,.08);

  max-width: 800px;
  margin: 40px auto 80px;
  padding: 0 24px;
  color: var(--ink);
  font-family: 'Rosario', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.awml-detail__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.awml-detail__crumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.awml-detail__crumb a:hover { text-decoration: underline; }
.awml-detail__crumb-sep { color: #d4bcd0; font-size: 15px; }

.awml-detail__hero {
  background: linear-gradient(145deg, #fdf0f7 0%, #fce4f3 30%, #f9d4eb 100%);
  border: 1px solid #f0c4e0;
  border-radius: var(--radius);
  padding: 44px 48px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.awml-detail__hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(180,53,143,.07) 0%, transparent 70%);
  border-radius: 50%;
}
.awml-detail__hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.awml-detail__hero-title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: var(--ink);
  margin: 0 0 14px;
}
.awml-detail__hero-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 600px;
  margin: 0;
}

.awml-detail__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.awml-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
  border-left: 5px solid transparent;
}
.awml-card:hover { box-shadow: var(--shadow-md); }

.awml-card--pink   { border-left-color: #B4358F; }
.awml-card--teal   { border-left-color: #2c8690; }
.awml-card--amber  { border-left-color: #c98a2e; }
.awml-card--default{ border-left-color: #a0aec0; }

.awml-card__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.awml-card__icon-circle {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.awml-card__icon-circle--pink   { background: #fce4f3; }
.awml-card__icon-circle--teal   { background: #e6f1f4; }
.awml-card__icon-circle--amber  { background: #fdf3e5; }
.awml-card__icon-circle--default{ background: #f4f4f5; }

.awml-card__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.awml-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
}
.awml-card--pink   .awml-card__label { color: #B4358F; }
.awml-card--teal   .awml-card__label { color: #2c8690; }
.awml-card--amber  .awml-card__label { color: #c98a2e; }
.awml-card--default .awml-card__label{ color: #a0aec0; }

.awml-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.awml-card__content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  padding-left: 64px;
}
.awml-card__content p { margin: 0; }
.awml-card__content p + p { margin-top: 10px; }

.awml-detail__disclaimer {
  display: flex;
  gap: 14px;
  background: #fffdf3;
  border: 1px solid #ece3b4;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.awml-detail__disclaimer-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.3;
}
.awml-detail__disclaimer-text {
  font-size: 13px;
  line-height: 1.6;
  color: #6b6235;
}
.awml-detail__disclaimer-text strong { color: #4a421f; display: block; margin-bottom: 3px; }
.awml-detail__disclaimer-text p { margin: 0; font-style: italic; }

.awml-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .15s;
  margin-bottom: 48px;
}
.awml-detail__back:hover { background: var(--accent); transform: translateX(-3px); }
.awml-detail__back-arrow { font-size: 16px; transition: transform .15s; }
.awml-detail__back:hover .awml-detail__back-arrow { transform: translateX(-3px); }

.awml-detail__related {
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.awml-detail__related-heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--ink);
}
.awml-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.awml-detail__related-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}
.awml-detail__related-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(180,53,143,.1);
  transform: translateY(-2px);
}
.awml-detail__related-card-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--accent-light);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}
.awml-detail__related-card-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 5px;
  color: var(--ink);
}
.awml-detail__related-card-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
  flex: 1;
}
.awml-detail__related-card-link {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-top: auto;
}

@media (max-width: 768px) {
  .awml-detail { margin: 20px auto 48px; padding: 0 16px; }
  .awml-detail__hero { padding: 28px 22px; }
  .awml-detail__hero-title { font-size: 26px; }
  .awml-card { padding: 24px 20px; }
  .awml-card__content { padding-left: 0; }
  .awml-detail__disclaimer { flex-direction: column; gap: 8px; }
  .awml-detail__related-grid { grid-template-columns: 1fr; }
}