/* Shared AI experience intelligence component styles.
   Page-specific wrapper, layout, crop, icon, and responsive rules remain
   in promoMitreIndex.css and ai-esi.css.
*/

.aid * {
  box-sizing: border-box;
}

.aid .aid-stage *,
.aid .aid-stage *::before {
  box-sizing: border-box;
}

.aid .aid-bg {
  position: absolute;
  inset: 0;
  background: none;
}

.aid .aid-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(192,0,255,.24);
  width: 112%;
  height: 58%;
  transform: translate(-50%,-50%) rotate(31deg);
}

.aid .aid-ring.aid-b {
  width: 118%;
  height: 54%;
  border-color: rgba(18,192,255,.22);
  transform: translate(-50%,-50%) rotate(-34deg);
}

.aid .aid-list {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(72 * var(--u));
  width: calc(205 * var(--u));
  animation: aid-scroll var(--aid-tempo) infinite linear;
}

.aid .aid-list-title {
  margin: 0 0 calc(9 * var(--u));
  height: calc(14 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 600;
  padding-left: calc(12 * var(--u));
  color: #fff;
  white-space: nowrap;
}

.aid .aid-card {
  position: relative;
  width: calc(205 * var(--u));
  height: calc(46 * var(--u));
  margin: 0 0 calc(10 * var(--u));
  border-radius: calc(999 * var(--u));
  background-color: rgba(255,255,255,.07);
  border: 1px solid rgba(18,192,255,.42);
  box-shadow: 0 0 calc(14 * var(--u)) rgba(18,192,255,.05);
  overflow: hidden;
}

.aid .aid-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(115deg,rgba(18,192,255,0) 28%,rgba(120,225,255,.2) 48%,rgba(192,0,255,0) 64%);
}

.aid .aid-lb {
  position: absolute;
  left: calc(45 * var(--u));
  right: calc(8 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: calc(10.4 * var(--u));
  line-height: calc(12.5 * var(--u));
  font-weight: 600;
  color: #fff;
}

.aid .aid-card.aid-last {
  margin-bottom: 0;
  animation: aid-last-hover var(--aid-tempo) infinite linear;
}

.aid .aid-card.aid-last::before {
  animation: aid-sheen-last var(--aid-tempo) infinite linear;
}

.aid .aid-card.aid-last .aid-lb {
  top: calc(16 * var(--u));
  transform: none;
}

.aid .aid-hero {
  position: absolute;
  left: calc(290 * var(--u));
  top: calc(122 * var(--u));
  width: calc(225 * var(--u));
  height: calc(70 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  opacity: 0;
  background-color: rgba(18,192,255,.14);
  border: 1px solid rgba(18,192,255,.8);
  box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
  animation: aid-hero var(--aid-tempo) infinite linear;
}

.aid .aid-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 1;
  background: linear-gradient(115deg,rgba(18,192,255,0) 28%,rgba(120,225,255,.2) 48%,rgba(192,0,255,0) 64%);
  animation: aid-sheen-hero var(--aid-tempo) infinite linear;
}

.aid .aid-hl {
  position: absolute;
  inset: 0;
  animation: aid-hl var(--aid-tempo) infinite linear;
}

.aid .aid-hl .aid-lb {
  left: calc(47 * var(--u));
  top: calc(15 * var(--u));
  transform: none;
  font-size: calc(10.8 * var(--u));
}

.aid .aid-hd {
  position: absolute;
  left: calc(47 * var(--u));
  top: calc(32 * var(--u));
  width: calc(152 * var(--u));
  font-size: calc(8.2 * var(--u));
  line-height: calc(10.4 * var(--u));
  color: rgba(255,255,255,.72);
  opacity: 0;
  animation: aid-hd var(--aid-tempo) infinite linear;
}

.aid .aid-w {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(203 * var(--u));
  height: calc(276 * var(--u));
  color: #1a0b33;
  opacity: 0;
  animation: aid-wfade var(--aid-tempo) infinite linear;
}

.aid .aid-w * {
  position: absolute;
}

.aid .aid-wt {
  left: calc(22 * var(--u));
  top: calc(28 * var(--u));
  font-size: calc(8.6 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-ib {
  top: calc(9 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  border: 1px solid #e3d9f3;
  background: #fff;
}

.aid .aid-w .aid-ib:nth-child(1) {
  left: calc(144 * var(--u)) !important;
}

.aid .aid-w .aid-ib:nth-child(2) {
  left: calc(163 * var(--u)) !important;
}

.aid .aid-ib svg {
  position: absolute;
  left: calc(3 * var(--u));
  top: calc(3 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  fill: none;
  stroke: #5b4a7d;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aid .aid-lbl {
  left: calc(22 * var(--u));
  font-size: calc(7 * var(--u));
  line-height: calc(9 * var(--u));
  font-weight: 600;
  color: #2a1648;
  white-space: nowrap;
}

.aid .aid-lbl em {
  font-style: normal;
  font-weight: 400;
  color: #9a8cb4;
}

.aid .aid-sel {
  left: calc(22 * var(--u));
  width: calc(156 * var(--u));
  border: 1px solid #e3d9f3;
  border-radius: calc(5 * var(--u));
  background: #fff;
  font-size: calc(7.4 * var(--u));
  color: #2a1648;
  display: flex;
  align-items: center;
  padding: 0 calc(8 * var(--u));
}

.aid .aid-sel * {
  position: static;
}

.aid .aid-sel span {
  flex: 1;
}

.aid .aid-sel svg {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  fill: none;
  stroke: #7a6aa0;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aid .aid-ta {
  left: calc(22 * var(--u));
  top: calc(145 * var(--u));
  width: calc(156 * var(--u));
  height: calc(38 * var(--u));
  border: 1px solid #e3d9f3;
  border-radius: calc(5 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  font-size: calc(6.6 * var(--u));
  line-height: calc(8.6 * var(--u));
  color: #ab9fc4;
}

.aid .aid-fade {
  left: 0;
  top: calc(222 * var(--u));
  width: calc(203 * var(--u));
  height: calc(54 * var(--u));
  background: linear-gradient(rgba(255,255,255,0),rgba(78,44,122,.97) 88%);
}

.aid .aid-btn {
  left: calc(77 * var(--u));
  top: calc(237 * var(--u));
  width: calc(116 * var(--u));
  height: calc(25 * var(--u));
  border-radius: calc(999 * var(--u));
  background: #7d6ca3;
  color: #fff;
  font-size: calc(8.8 * var(--u));
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aid-btn var(--aid-tempo) infinite linear;
}

.aid .aid-res,
.aid .aid-res2 {
  position: absolute;
  left: calc(321 * var(--u));
  top: calc(335 * var(--u));
  width: calc(203 * var(--u));
  height: calc(300 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #fdfbff;
  color: #1a0b33;
  box-shadow: 0 calc(-6 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.4),0 0 calc(40 * var(--u)) rgba(192,0,255,.25);
  overflow: hidden;
}

.aid .aid-res {
  animation: aid-result3 var(--aid-tempo) infinite linear;
}

.aid .aid-res2 {
  animation: aid-result2 var(--aid-tempo) infinite linear;
}

.aid .aid-res *,
.aid .aid-res2 * {
  position: absolute;
}

.aid .aid-rt {
  left: calc(11 * var(--u));
  top: calc(11 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: calc(14 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-rd {
  left: calc(11 * var(--u));
  top: calc(29 * var(--u));
  width: calc(178 * var(--u));
  font-size: calc(7.3 * var(--u));
  line-height: calc(10.2 * var(--u));
  color: #7a6d94;
}

.aid .aid-tabs {
  left: calc(9 * var(--u));
  top: calc(66 * var(--u));
  width: calc(180 * var(--u));
  height: calc(27 * var(--u));
  border: 1px solid #e6dcf5;
  border-radius: calc(6 * var(--u));
  padding: calc(3 * var(--u));
  display: flex;
}

.aid .aid-tabs div {
  position: static;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(4 * var(--u));
  font-size: calc(7.6 * var(--u));
  color: #7a6d94;
}

.aid .aid-tabs .aid-on {
  background: #f1e6ff;
  color: #5b00c2;
  font-weight: 600;
}

.aid .aid-lg {
  left: calc(12 * var(--u));
  top: calc(104 * var(--u));
  display: flex;
  gap: calc(11 * var(--u));
  font-size: calc(6.6 * var(--u));
  color: #5a4a7a;
  align-items: center;
}

.aid .aid-lg span {
  position: static;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
}

.aid .aid-lg i {
  position: static;
  display: block;
  width: calc(11 * var(--u));
  height: 0;
  border-top: calc(1.6 * var(--u)) solid #0aa9e0;
}

.aid .aid-lg i.aid-d {
  border-top: calc(1.6 * var(--u)) solid #b300f0;
}

.aid .aid-ch {
  left: calc(4 * var(--u));
  top: calc(118 * var(--u));
  width: calc(194 * var(--u));
  height: calc(132 * var(--u));
  animation: aid-reveal var(--aid-tempo) infinite linear;
}

.aid .aid-ch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aid .aid-fr {
  left: calc(22 * var(--u));
  top: calc(100 * var(--u));
  width: calc(156 * var(--u));
}

.aid .aid-fr * {
  position: static;
}

.aid .aid-fr .aid-r {
  display: flex;
  align-items: center;
  height: calc(14.4 * var(--u));
  font-size: calc(7 * var(--u));
  color: #2a1648;
}

.aid .aid-fr .aid-d {
  flex: none;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-right: calc(6 * var(--u));
  border-radius: 50%;
  background: #12c0ff;
}

.aid .aid-fr .aid-n {
  flex: none;
  width: calc(64 * var(--u));
  white-space: nowrap;
}

.aid .aid-fr .aid-t {
  flex: none;
  width: calc(58 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #efe6fb;
  overflow: hidden;
}

.aid .aid-fr .aid-t b {
  display: block;
  height: 100%;
  border-radius: calc(2 * var(--u));
  background: #12c0ff;
}

.aid .aid-fr .aid-g {
  margin-left: auto;
  font-size: calc(5.8 * var(--u));
  font-weight: 700;
  color: #c000ff;
}

.aid .aid-fr .aid-hi .aid-d {
  background: #c000ff;
  animation: aid-pulse 1.8s ease-in-out infinite;
}

.aid .aid-fr .aid-hi .aid-n {
  font-weight: 600;
}

.aid .aid-fr .aid-hi .aid-t b {
  background: linear-gradient(90deg,#ff54c2,#c000ff);
}

.aid .aid-rec {
  left: calc(9 * var(--u));
  width: calc(185 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid #e6dcf5;
  border-radius: calc(8 * var(--u));
  background: #fff;
  overflow: hidden;
}

.aid .aid-rec * {
  position: absolute;
}

.aid .aid-rec:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(3 * var(--u));
  background: #c000ff;
}

.aid .aid-rec.aid-m:before {
  background: #12c0ff;
}

.aid .aid-rec .aid-nb {
  left: calc(9 * var(--u));
  top: calc(8 * var(--u));
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: #f1e6ff;
  color: #5b00c2;
  font-size: calc(6.6 * var(--u));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aid .aid-rec .aid-ti {
  left: calc(28 * var(--u));
  top: calc(7 * var(--u));
  width: calc(150 * var(--u));
  font-size: calc(7.8 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  color: #1a0b33;
  white-space: nowrap;
}

.aid .aid-rec .aid-me {
  left: calc(28 * var(--u));
  top: calc(21 * var(--u));
  font-size: calc(6.2 * var(--u));
  line-height: calc(8 * var(--u));
  color: #7a6d94;
  white-space: nowrap;
}

.aid .aid-rec .aid-bar {
  left: calc(28 * var(--u));
  top: calc(34 * var(--u));
  width: calc(150 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #efe6fb;
  overflow: hidden;
}

.aid .aid-rec .aid-bar b {
  display: block;
  height: 100%;
  border-radius: calc(2 * var(--u));
  background: linear-gradient(90deg,#12c0ff,#c000ff);
}

.aid .aid-btn2 {
  left: calc(9 * var(--u));
  top: calc(214 * var(--u));
  width: calc(185 * var(--u));
  height: calc(22 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid #d9c5f5;
  background: #f6eeff;
  color: #5b00c2;
  font-size: calc(7.8 * var(--u));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aid-btn2 var(--aid-tempo) infinite linear;
}

.aid .aid-cur {
  position: absolute;
  left: calc(300 * var(--u));
  top: calc(250 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  opacity: 0;
  transform-origin: calc(3 * var(--u)) calc(2 * var(--u));
  filter: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.35));
  animation: aid-cur var(--aid-tempo) infinite linear;
  pointer-events: none;
}

.aid .aid-cur svg {
  width: 100%;
  height: 100%;
  display: block;
}