.edHero{ padding-bottom: 36px; }

.edShell{ padding: 0 0 90px; }
.edGrid{
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.edPanel{
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 4px 6px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--lav-400) transparent;
}
.edBox{
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.edLabel{
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.edFields{ display: grid; gap: 10px; }
.edInput{
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--lav-50);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.edInput:focus{ border-color: var(--lav-500); background: #fff; box-shadow: 0 0 0 4px var(--lav-100); }
.edInput::placeholder{ color: #A9A2C2; text-transform: none; font-weight: 500; }

.rarities{ display: grid; gap: 12px; }
.rarityCard{
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rarityCard.isActive{ border: 2px solid var(--lav-500); padding: 15px; box-shadow: 0 4px 0 var(--lav-200); }
.rarityHead{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rarityTag{
  min-width: 52px;
  padding: 6px 12px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.rarityTag.r1g{ background: #DCEBFF; color: #2F5FB7; }
.rarityTag.r2g{ background: var(--lav-300); color: var(--lav-800); }
.rarityTag.r3g{ background: linear-gradient(120deg, #EEF0F5, #C9CDD8 50%, #F5F6FA); color: #4C5266; }
.rarityNote{ color: var(--muted); font-size: 12px; font-weight: 600; }

.uploadBox{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 2px dashed var(--line-2);
  background: var(--lav-50);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.uploadBox:hover{ border-color: var(--lav-400); background: #fff; }
.uploadThumb{
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 60px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--lav-200);
  color: var(--lav-600);
  font-size: 18px;
}
.uploadThumb img{ width: 100%; height: 100%; object-fit: cover; }
.uploadText{ display: flex; flex-direction: column; min-width: 0; }
.uploadText b{ font-size: 14px; }
.uploadText small{ overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.zoomRow{ display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 13px; }
.zoomRow input{ flex: 1; accent-color: var(--lav-600); }
.miniBtn{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--lav-700);
  cursor: pointer;
}
.miniBtn:hover{ background: var(--lav-100); }

.colorPill{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: var(--lav-50);
  border: 1px solid var(--line);
}
.colorSwatch{
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.colorSwatch::after{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(#ff5e5b, #f6c453, #4fc3b5, #5b8def, #b9a7f5, #f28db2, #ff5e5b);
  z-index: -1;
}
.colorWheel{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hexWrap{
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--muted);
}
.hexInput{
  width: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
  outline: none;
}
.presets{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.preset{
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: transform .15s ease;
}
.preset:hover{ transform: scale(1.15); }
.preset.active{ box-shadow: 0 0 0 2px var(--lav-700); }

.edActions{ display: grid; gap: 10px; }
.edActions .btn{ width: 100%; }
.btn.active{ background: var(--lav-900); color: #fff; border-color: var(--lav-900); box-shadow: 0 4px 0 var(--lav-950); }
.checkRow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.checkRow input{ width: 18px; height: 18px; accent-color: var(--lav-600); }

.stage{
  position: relative;
  min-height: 640px;
  padding: 70px 24px 24px;
  border-radius: 32px;
  background:
    radial-gradient(closest-side, rgba(212,207,242,.9), rgba(212,207,242,0)) 50% 55% / 900px 700px no-repeat,
    radial-gradient(rgba(123,63,228,.16) 1.2px, transparent 1.3px) 0 0 / 22px 22px,
    var(--surface);
  border: 1px solid var(--line);
}
.viewSwitch{
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.viewSwitch button{
  min-width: 52px;
  padding: 8px 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 800;
  cursor: pointer;
}
.viewSwitch button:hover{ background: var(--lav-100); }
.viewSwitch button.active{ background: var(--lav-900); color: #fff; }
.stageHint{
  position: absolute;
  top: 24px;
  left: 24px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.stageHint i{ color: var(--lav-500); margin-right: 4px; }

.cardCanvas{
  display: block;
  width: min(100%, 440px);
  height: auto;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%2715%27%20fill%3D%27%237F73C4%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%273%27/%3E%3Cpath%20d%3D%27M18%208l3.5%204h-2.3v4.8H24v-2.3l4%203.5-4%203.5v-2.3h-4.8V24h2.3L18%2028l-3.5-4h2.3v-4.8H12v2.3L8%2018l4-3.5v2.3h4.8V12h-2.3z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") 18 18, move;
  touch-action: none;
  filter: drop-shadow(0 22px 30px rgba(74,38,141,.28));
}
.cardCanvas.isDragging{ cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%2715%27%20fill%3D%27%232C2652%27%20stroke%3D%27%23D4CFF2%27%20stroke-width%3D%273%27/%3E%3Cpath%20d%3D%27M18%208l3.5%204h-2.3v4.8H24v-2.3l4%203.5-4%203.5v-2.3h-4.8V24h2.3L18%2028l-3.5-4h2.3v-4.8H12v2.3L8%2018l4-3.5v2.3h4.8V12h-2.3z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") 18 18, move; }
.rowView{ display: none; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rowView canvas{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  filter: drop-shadow(0 14px 20px rgba(74,38,141,.25));
  transition: transform .25s var(--ease);
}
.rowView canvas:hover{ transform: translateY(-6px); }
.stage.isAll .cardCanvas, .stage.isAll .stageHint{ display: none; }
.stage.isAll .rowView{ display: grid; }
.stage.isLoading .cardCanvas{ opacity: .3; }

@media (max-width: 980px){
  .edGrid{ grid-template-columns: 1fr; }
  .edPanel{ position: static; max-height: none; overflow: visible; order: 2; }
  .stage{ order: 1; }
}
@media (max-width: 640px){
  .stage{ min-height: 0; padding: 64px 12px 16px; border-radius: 24px; }
  .stageHint{ display: none; }
  .viewSwitch{ left: 50%; right: auto; transform: translateX(-50%); }
  .rowView{ gap: 8px; }
}

.rarityHead{ cursor: pointer; }
.collapseBtn{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--lav-700);
  cursor: pointer;
  transition: background-color .2s ease;
}
.collapseBtn:hover{ background: var(--lav-100); }
.collapseBtn i{ transition: transform .3s var(--ease); }
.rarityBody{ animation: bodyIn .3s var(--ease); }
.rarityCard.isCollapsed .rarityBody{ display: none; }
.rarityCard.isCollapsed .rarityHead{ margin-bottom: 0; }
@keyframes bodyIn{ from{ opacity: 0; transform: translateY(-6px); } }
.rarityCard.isCollapsed .collapseBtn i{ transform: rotate(-90deg); }
.rarityCard.isCollapsed{ padding-top: 12px; padding-bottom: 12px; }

.sparkleBtn{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(115deg, #7B3FE4, #B9A7F5, #4FC3B5, #9C7BE8, #7B3FE4);
  background-size: 300% 100%;
  color: #fff;
  cursor: pointer;
  animation: iridescent 6s ease-in-out infinite;
  box-shadow: 0 4px 0 #5F539E, 0 12px 24px -10px rgba(95,83,158,.7);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sparkleBtn:hover{ transform: translateY(-2px) rotate(-4deg); }
.stage.isAll .sparkleBtn{ display: none; }
.sparkleBtn:active{ transform: translateY(3px); box-shadow: 0 1px 0 #5F539E; }
.sparkleBtn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
  animation: shineSweep 2.8s ease-in-out infinite;
}
.sparkleIcon{ position: relative; z-index: 1; font-size: 28px; line-height: 1; text-shadow: 0 1px 3px rgba(44,27,84,.35); animation: twinkle 2.4s ease-in-out infinite; }

.zoomRow{
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--lav-50);
  border: 1px solid var(--line);
}
.zoomRow > i{ color: var(--lav-600); }
.zoomRow input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lav-600) var(--fill, 0%), var(--lav-200) var(--fill, 0%));
  outline: none;
  cursor: pointer;
}
.zoomRow input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--lav-600);
  box-shadow: 0 3px 8px rgba(74,38,141,.35);
  transition: transform .15s ease;
}
.zoomRow input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
.zoomRow input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--lav-600);
  box-shadow: 0 3px 8px rgba(74,38,141,.35);
}
.zoomRow input[type="range"]::-moz-range-track{ height: 8px; border-radius: 999px; background: transparent; }
.zoomVal{
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--lav-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.colorPill{ grid-template-columns: auto auto 1fr; padding: 12px; background: linear-gradient(160deg, #fff, var(--lav-50)); }
.colorSwatch{
  width: 50px;
  height: 50px;
  border: 4px solid transparent;
  background:
    linear-gradient(var(--c), var(--c)) padding-box,
    conic-gradient(#ff5e5b, #f6c453, #4fc3b5, #5b8def, #b9a7f5, #f28db2, #ff5e5b) border-box;
  box-shadow: inset 0 0 0 3px #fff, 0 4px 10px -2px rgba(44,27,84,.25);
  transition: transform .2s var(--ease);
}
.colorSwatch:hover{ transform: scale(1.06) rotate(-8deg); }
.colorSwatch::after{ display: none; }
.colorSwatch::before{
  content: "1fc";
  position: absolute;
  right: -7px;
  bottom: -7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lav-900);
  color: #fff;
  font: 900 9px "Font Awesome 6 Free";
  box-shadow: 0 0 0 2px #fff;
}
@keyframes spinWheel{ to{ transform: rotate(360deg); } }
.hexWrap{ height: 48px; border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.hexWrap:focus-within{ border-color: var(--lav-500); box-shadow: 0 0 0 4px var(--lav-100); }
.hexWrap > span{ color: var(--lav-500); }
.presets{ gap: 8px; padding-top: 4px; }
.preset{ width: 26px; height: 26px; }
.preset.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lav-700); transform: scale(1.08); }

.stage.isAll{ min-height: 0; padding-bottom: 36px; display: flex; flex-direction: column; justify-content: center; }
.stage.isAll .rowView{ max-width: 760px; width: 100%; margin: 6px auto 0; }

.bigView{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(closest-side, rgba(123,63,228,.45), rgba(28,24,56,0)) 50% 50% / 900px 900px no-repeat,
    rgba(28,24,56,.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.bigView.is-open{ opacity: 1; }
.bigScene{ perspective: 1200px; }
.bigCard{
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  position: relative;
  width: min(78vw, calc(78vh * .75), 520px);
  aspect-ratio: 3 / 4;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.92);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.bigView.is-open .bigCard{ transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1); }
.bigCard.isTilting{ transition: transform .08s linear; }
.bigCard img{ display: block; width: 100%; height: 100%; }
.bigGlare, .bigHolo{
  position: absolute;
  inset: 4.6% 7.3% 4.8% 7.3%;
  border-radius: 6.5% / 4.9%;
  pointer-events: none;
}
.bigGlare{
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.65) 0%, rgba(255,255,255,.15) 22%, rgba(255,255,255,0) 50%);
  mix-blend-mode: soft-light;
}
.bigHolo{
  background:
    linear-gradient(115deg, transparent 20%, rgba(255,120,220,.35) 36%, rgba(120,220,255,.35) 46%, rgba(170,255,170,.3) 56%, rgba(255,240,140,.3) 64%, transparent 80%);
  background-size: 250% 250%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  opacity: .55;
}
.bigClose{
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.bigHint{ margin: 0; color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; text-align: center; }

@keyframes twinkle{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .5; transform: scale(.75); }
}

.rarityHead{ user-select: none; }
.rarityHead:focus-visible{ outline: 2px solid var(--lav-600); outline-offset: 4px; border-radius: 12px; }
.rarityCard:hover .collapseBtn{ background: var(--lav-100); }
.rarityTag{ display: inline-grid; place-items: center; }

.colorSwatch{ padding: 0; cursor: pointer; }
.colorPill{ position: relative; }
.colorPill.isPicking .colorSwatch{ transform: scale(1.06); box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px var(--lav-300); }
.cpPop{
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: popIn .22s var(--ease);
}
.cpPop[hidden]{ display: none; }
@keyframes popIn{ from{ opacity: 0; transform: translateY(-6px) scale(.98); } }
.cpSV{
  position: relative;
  height: 160px;
  border-radius: 12px;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    var(--hue, red);
  cursor: crosshair;
  touch-action: none;
}
.cpKnob{
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.cpHueWrap{ padding: 0 2px; }
.cpHue{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  outline: none;
  cursor: pointer;
}
.cpHue::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--thumb, #fff);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.3);
}
.cpHue::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--thumb, #fff);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

.checkRow{
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--lav-50);
  border: 1px solid var(--line);
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.checkRow:hover{ border-color: var(--lav-400); background: #fff; }
.checkRow input{
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 7px;
  border: 2px solid var(--lav-400);
  background: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.checkRow input:checked{
  border-color: var(--lav-700);
  background: linear-gradient(135deg, var(--lav-600), var(--lav-800));
}
.checkRow input::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.checkRow input:checked::after{ transform: rotate(45deg) scale(1); }
.checkRow input:active{ transform: scale(.9); }
.checkRow input:focus-visible{ outline: 2px solid var(--lav-600); outline-offset: 3px; }

.eyeBtn{ width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--lav-800); display: grid; place-items: center; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.eyeBtn:hover{ background: var(--lav-50); transform: translateY(-1px); }
.eyeBtn.active{ background: var(--lav-900); border-color: var(--lav-900); color: #fff; box-shadow: 0 0 0 4px var(--lav-200); }
.cardCanvas.isEyedrop{ cursor: crosshair; outline: 3px dashed var(--lav-400); outline-offset: 6px; }
.cardCanvas.isEyedrop{ touch-action: none; }
.eyeLoupe{ position: absolute; z-index: 5; width: 92px; height: 92px; margin: -128px 0 0 -46px; border-radius: 50%; background: var(--c, #fff); border: 5px solid #fff; box-shadow: 0 0 0 2px var(--lav-700), 0 14px 30px rgba(44,27,84,.35); pointer-events: none; display: grid; place-items: end center; padding-bottom: 10px; font: 700 11px/1 "Plus Jakarta Sans", sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.eyeLoupe::after{ content: ""; position: absolute; left: 50%; bottom: -40px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--lav-700); }
.eyeLoupe[hidden]{ display: none; }

.rarityTag.rev{ width: auto; padding: 0 12px; background: #FFDDEB; color: #C2406F; }
.stage.isEvent .viewSwitch{ display: none; }
.evPick{ position: relative; margin-bottom: 12px; }
.evSelect{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font: 600 14px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--ink); transition: border-color .18s ease, box-shadow .18s ease; }
.evSelect:hover, .evSelect[aria-expanded="true"]{ border-color: var(--lav-500); box-shadow: 0 0 0 4px var(--lav-100); }
.evSelect .fa-chevron-down{ color: var(--lav-700); transition: transform .2s ease; }
.evSelect[aria-expanded="true"] .fa-chevron-down{ transform: rotate(180deg); }
.evPlaceholder{ color: var(--lav-700); }
.evList{ position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(44,27,84,.18); max-height: 320px; overflow: auto; animation: popIn .18s ease; }
.evList[hidden]{ display: none; }
.evItem{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; }
.evItem:hover:not(:disabled), .evItem.active{ background: var(--lav-50); }
.evItem:disabled{ cursor: not-allowed; }
.evItem small{ font: 600 11px/1 "Plus Jakarta Sans", sans-serif; color: var(--lav-600); }
.evBadge{ font-size: 12px; }
.rarityCard:has(.evList:not([hidden])){ position: relative; z-index: 30; }
.evList{ scrollbar-width: thin; scrollbar-color: var(--lav-400) transparent; }