/* Pink Path A1 UI/UX production refinement layer. Loaded after compiled Tailwind CSS. */
.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-black{font-weight:900}.w-20{width:5rem}.h-20{height:5rem}.min-w-0{min-width:0}.border-white{border-color:#fff}.bg-white\/80{background-color:rgba(255,255,255,.8)}.bg-white\/55{background-color:rgba(255,255,255,.55)}.bg-brand-rose\/10{background-color:rgba(233,106,155,.1)}.border-brand-pink\/40{border-color:rgba(216,27,96,.4)}.text-\[10px\]{font-size:10px}.tracking-\[0\.19em\]{letter-spacing:.19em}.tracking-\[0\.22em\]{letter-spacing:.22em}.rounded-\[28px\]{border-radius:28px}.blur-3xl{filter:blur(64px)}.-inset-8{inset:-2rem}.overflow-hidden{overflow:hidden}
/* A1 UI/UX refinement layer */

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(233,106,155,.10), transparent 28rem),
    radial-gradient(circle at 100% 30%, rgba(108,41,72,.06), transparent 24rem),
    var(--color-brand-pale);
}

.btn-primary {
  background-image: linear-gradient(135deg, #e32d70 0%, #c91658 100%);
  box-shadow: 0 12px 30px -12px rgba(216,27,96,.7), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover { filter: brightness(1.035); }
.btn-secondary { box-shadow: 0 8px 24px -20px rgba(108,41,72,.65); }
.icon-button { background: rgba(255,255,255,.72); border: 1px solid rgba(240,219,227,.9); }
.icon-button:active { transform: scale(.95); }

.shadow-card { box-shadow: 0 14px 34px -24px rgba(108,41,72,.5); }
.shadow-nav { box-shadow: 0 12px 38px -18px rgba(63,26,46,.45); }

.journey-progress-track {
  height: 4px;
  max-width: 26rem;
  margin-inline: auto;
  background: #f0dbe3;
  border-radius: 999px;
  overflow: hidden;
}
.journey-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#e96a9b,#d81b60);
  border-radius: inherit;
  transition: width .4s ease;
}
.journey-dot { width: 7px; height: 7px; border-radius: 999px; background: #ead6de; transition: .25s ease; }
.journey-dot.is-complete { background:#d81b60; }
.journey-dot.is-current { background:#d81b60; box-shadow:0 0 0 4px rgba(216,27,96,.12); }

.ribbon-progress-shell { position: relative; max-width: 19rem; margin-inline: auto; padding: .35rem .15rem; }
.ribbon-progress-line { position:absolute; left:16px; right:16px; top:50%; height:3px; transform:translateY(-50%); background:#efdce4; border-radius:999px; overflow:hidden; }
.ribbon-progress-line span { display:block; height:100%; background:linear-gradient(90deg,#e96a9b,#d81b60); border-radius:inherit; transition:width .45s ease; }
.ribbon-progress-mark { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; box-shadow:0 5px 18px -12px rgba(108,41,72,.5); border:1px solid #f2dfe7; }
.ribbon-progress-mark.is-earned { animation: ribbon-earned .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ribbon-earned { from { transform:scale(.8); } to { transform:scale(1); } }

.path-shell { position:relative; isolation:isolate; }
.path-rail { position:absolute; left:50%; top:28px; bottom:28px; width:4px; transform:translateX(-50%); border-radius:99px; background:linear-gradient(180deg,#f4dbe5,#e8b8cc 55%,#f4dbe5); z-index:-2; }
.path-rail-progress { position:absolute; left:50%; top:28px; width:4px; transform:translateX(-50%); border-radius:99px; background:linear-gradient(180deg,#e96a9b,#d81b60); z-index:-1; transition:height .5s ease; }
.path-stage-row { position:relative; display:flex; margin-bottom:1.1rem; }
.path-stage-row:nth-child(odd) { justify-content:flex-start; padding-right:2.5rem; }
.path-stage-row:nth-child(even) { justify-content:flex-end; padding-left:2.5rem; }
.path-stage-node { position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; border:4px solid #ead0dc; box-shadow:0 0 0 5px rgba(255,255,255,.8); z-index:3; }
.path-stage-node.is-done { border-color:#d81b60; background:#d81b60; }
.path-stage-node.is-active { border-color:#d81b60; animation:node-pulse 1.9s ease-in-out infinite; }
@keyframes node-pulse { 50% { box-shadow:0 0 0 9px rgba(216,27,96,.11); } }
.path-card { width:calc(50% - .7rem); min-width:0; border-radius:24px; box-shadow:0 13px 35px -28px rgba(108,41,72,.55); }
.path-card.is-active { box-shadow:0 14px 34px -22px rgba(216,27,96,.48); transform:translateY(-1px); }
.stage-icon-shell { width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#fff2f7,#fbe4ed); border:1px solid #f0d7e1; }
.stage-icon-shell.is-done { background:linear-gradient(145deg,#d81b60,#b91250); }
.stage-icon-shell.is-done svg * { stroke:#fff !important; }
.stage-status-chip { display:inline-flex; align-items:center; min-height:24px; padding:0 .55rem; border-radius:999px; font-size:10px; line-height:1; font-weight:800; letter-spacing:.02em; }

.intro-ribbon-track { position:relative; max-width:19rem; width:100%; margin-inline:auto; }
.intro-ribbon-track::before { content:""; position:absolute; left:18px; right:18px; top:19px; height:3px; background:linear-gradient(90deg,#efdce4,#e8b6ca,#efdce4); border-radius:999px; }
.intro-ribbon-track > span { position:relative; z-index:1; animation:intro-wave 1.8s ease-in-out infinite; }
.intro-ribbon-track > span:nth-child(2){animation-delay:.12s}.intro-ribbon-track > span:nth-child(3){animation-delay:.24s}.intro-ribbon-track > span:nth-child(4){animation-delay:.36s}.intro-ribbon-track > span:nth-child(5){animation-delay:.48s}
@keyframes intro-wave { 50% { transform:translateY(-3px); } }

.feedback-card { background:linear-gradient(180deg,#fff,#fff8fb); border:1px solid #efdce4; box-shadow:0 18px 42px -30px rgba(108,41,72,.5); border-radius:28px; }
.feedback-icon { width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-inline:auto; }
.feedback-icon.good { background:#e8f7ef;color:#26784e; }
.feedback-icon.learn { background:#fff0f5;color:#a91650; }

.scenario-avatar { width:58px;height:58px;border-radius:20px;background:linear-gradient(145deg,#fde7f0,#f8c9db);display:flex;align-items:center;justify-content:center;color:#8d184a;font-weight:900;font-size:1.2rem;box-shadow:0 10px 25px -19px rgba(108,41,72,.55); }

.achievement-orbit { position:relative;width:190px;height:190px;display:flex;align-items:center;justify-content:center; }
.achievement-orbit::before { content:"";position:absolute;inset:9px;border:1px dashed rgba(216,27,96,.3);border-radius:50%;animation:orbit-spin 18s linear infinite; }
@keyframes orbit-spin { to { transform:rotate(360deg); } }
.achievement-core { width:142px;height:142px;border-radius:50%;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid #f2d8e3;display:flex;align-items:center;justify-content:center;box-shadow:0 22px 60px -34px rgba(108,41,72,.6); }

.pledge-ribbon-meter { width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d81b60 var(--pledge-progress),#f0dbe3 0);padding:5px;transition:background .35s ease; }
.pledge-ribbon-meter > div { width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#fff8fb; }
.pledge-card { transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.pledge-card.is-checked { background:#fff8fb; box-shadow:0 12px 28px -24px rgba(216,27,96,.6); transform:translateY(-1px); }

.modal-handle { width:42px;height:4px;border-radius:999px;background:#e1d4d9;margin:-.35rem auto 1rem; }
.learn-card { transition:box-shadow .2s ease,border-color .2s ease; }
.learn-card[open] { border-color:#eab9cc; box-shadow:0 15px 36px -30px rgba(108,41,72,.55); }
.toast-enter { animation:toast-in .25s ease-out both; }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,8px)} to{opacity:1;transform:translate(-50%,0)} }

@media (max-width: 360px) {
  .path-stage-row:nth-child(odd), .path-stage-row:nth-child(even) { padding-left:0; padding-right:0; justify-content:stretch; }
  .path-stage-row { margin-left:2.2rem; }
  .path-rail,.path-rail-progress,.path-stage-node { left:0; }
  .path-card { width:100%; }
  .language-pill button { min-width:36px; padding-inline:.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-orbit::before, .path-stage-node.is-active, .intro-ribbon-track > span { animation:none !important; }
}