*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #ffffff;
  --color-text-primary: #111111;
  --color-text-secondary: #555555;
  --color-text-label: #888888;
  --font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1280px;
  --spacing-section: 120px;
  --page-padding: clamp(24px, 5vw, 80px);
  --line-height: 1.3;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: var(--line-height);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Image skeleton ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.img-skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ── Scroll reveal ── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.28, 0.11, 0.32, 1),
              transform 0.7s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.scroll-visible {
  opacity: 1;
  transform: translateY(0);
}
._nav_at546_1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

._inner_at546_13 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._logo_at546_23 {
  display: flex;
  align-items: center;
}

._logoImg_at546_28 {
  height: 32px;
  width: auto;
  display: block;
}

._links_at546_34 {
  display: flex;
  align-items: center;
  gap: 60px;
}

._link_at546_34 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1d1d1f;
  transition: opacity 0.15s;
}

._link_at546_34:hover {
  opacity: 0.65;
}

._link_at546_34:focus-visible {
  opacity: 1;
  outline: 2px solid #1d1d1f;
  outline-offset: 4px;
  border-radius: 4px;
}

._contactBtn_at546_58 {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #ffffff;
  background: #1d1d1f;
  border-radius: 100px;
  padding: 9px 22px;
  transition: background 0.2s;
  text-decoration: none;
}

._contactBtn_at546_58:hover {
  background: #3a3a3c;
}

._contactBtn_at546_58:focus-visible {
  outline: 2px solid #1d1d1f;
  outline-offset: 4px;
}

/* ── Hamburger button — desktop hidden ── */
._hamburger_at546_80 {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 36px;
  height: 36px;
}

._bar_at546_93 {
  display: block;
  width: 18px;
  height: 2px;
  background: #1d1d1f;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

._barTop_at546_102  { transform: translateY(6px) rotate(45deg); }
._barMid_at546_103  { opacity: 0; }
._barBot_at546_104  { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile dropdown menu — desktop hidden ── */
._mobileMenu_at546_107 {
  display: none;
}

@media (max-width: 680px) {
  ._inner_at546_13 {
    padding: 0 20px;
    height: 60px;
  }

  ._logoImg_at546_28 {
    height: 24px;
  }

  ._links_at546_34 {
    display: none;
  }

  ._hamburger_at546_80 {
    display: flex;
  }

  ._mobileMenu_at546_107 {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    padding: 8px 20px 16px;
  }

  ._mobileLink_at546_139 {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1d1f;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    display: block;
    text-align: center;
  }

  ._mobileLink_at546_139:last-child {
    border-bottom: none;
  }
}
._footer_dmtau_1 {
  border-top: 1px solid #e8e8e8;
}

._inner_dmtau_5 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._logo_dmtau_14 {
  height: 32px;
  width: auto;
  display: block;
}

._icons_dmtau_20 {
  display: flex;
  align-items: center;
  gap: 28px;
}

._iconLink_dmtau_26 {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}

._iconLink_dmtau_26:hover {
  opacity: 1;
}

._iconLink_dmtau_26:focus-visible {
  opacity: 1;
  outline: 2px solid #000;
  outline-offset: 4px;
  border-radius: 4px;
}

._icon_dmtau_20 {
  height: 28px;
  width: auto;
  display: block;
}

@media (max-width: 680px) {
  ._logo_dmtau_14 {
    height: 24px;
  }
}

@media (hover: none) {
  ._iconLink_dmtau_26:hover {
    opacity: 0.7;
  }
}
._banner_1akhb_1 {
  width: 100%;
  height: clamp(180px, 27.8vw, 400px);
  margin-top: 72px;
  position: relative;
  overflow: hidden;
}

._placeholder_1akhb_9 {
  width: 100%;
  height: 100%;
  background: #111111;
}

._img_1akhb_15 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

@media (max-width: 680px) {
  ._banner_1akhb_1 {
    margin-top: 60px;
  }
}
._hero_xgrym_1 {
  flex: 1;
  width: 100%;
  background: #f5f5f5;
}

._heroInner_xgrym_7 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 140px var(--page-padding) 120px;
}

._name_xgrym_13 {
  font-size: 80px;
  font-weight: 600;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 20px;
  max-width: 80%;
}

._bio_xgrym_22 {
  font-size: 1.8rem;
  font-weight: 400;
  color: #11100E;
  line-height: var(--line-height);
  max-width: 80%;
}

@media (max-width: 680px) {
  ._heroInner_xgrym_7 {
    padding: 100px var(--page-padding) 64px;
  }

  ._name_xgrym_13 {
    font-size: 2.5rem;
    max-width: 100%;
  }

  ._bio_xgrym_22 {
    font-size: 1.3rem;
    max-width: 100%;
  }
}
._card_132f7_1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px var(--page-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}

._reversed_132f7_11 {
  direction: rtl;
}

._reversed_132f7_11 ._imageLink_132f7_15,
._reversed_132f7_11 ._content_132f7_16 {
  direction: ltr;
}

._imageLink_132f7_15 {
  display: block;
  text-decoration: none;
}

._imageWrap_132f7_25 {
  border-radius: 8px;
  min-height: 200px;
}

._image_132f7_15 {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s cubic-bezier(0, 0, 0.5, 1);
}

._imageLink_132f7_15:hover ._image_132f7_15 {
  transform: scale(1.02);
}

._content_132f7_16 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

._title_132f7_48 {
  font-size: 2rem;
  font-weight: 800;
  line-height: var(--line-height);
  color: var(--color-text-primary);
}

._description_132f7_55 {
  font-size: 1.2rem;
  color: #11100E;
  line-height: var(--line-height);
}

._viewProject_132f7_61 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 150px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 100px;
  background-color: #fff;
  color: #000;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

._viewProject_132f7_61:hover {
  background-color: #ddd;
}

@media (max-width: 680px) {
  ._card_132f7_1,
  ._reversed_132f7_11 {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 24px;
    padding: 40px 16px;
  }

  ._content_132f7_16 {
    padding: 0;
  }
}

@media (hover: none) {
  ._imageLink_132f7_15:hover ._image_132f7_15 {
    transform: none;
  }

  ._viewProject_132f7_61:hover {
    background-color: #fff;
  }
}
._aboveFold_1h67e_1 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

._projects_1h67e_7 {
  padding-top: 140px;
  padding-bottom: 120px;
}

._sectionHeader_1h67e_12 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding) 32px;
}

@media (max-width: 680px) {
  ._sectionHeader_1h67e_12 {
    padding: 0 16px 32px;
  }

  ._projects_1h67e_7 {
    padding-bottom: 80px;
  }
}

._sectionTitle_1h67e_28 {
  font-size: 64px;
  font-weight: 700;
  line-height: 58px;
  color: #11100E;
}

._archives_1h67e_35 {
  padding-top: 60px;
  padding-bottom: 120px;
}

._archivesGrid_1h67e_40 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

._archiveItem_1h67e_49 {
  width: 100%;
  display: block;
}

@media (max-width: 680px) {
  ._archivesGrid_1h67e_40 {
    grid-template-columns: repeat(2, 1fr);
  }
}
._main_he847_1 {
  padding-top: 72px; /* fixed nav height */
}

._inner_he847_5 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

/* ── About Me ── */
._aboutSection_he847_12 {
  padding: 80px 0 100px;
}

._aboutGrid_he847_16 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 80px;
  align-items: start;
}

._aboutHeading_he847_23 {
  font-size: 48px;
  font-weight: 700;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 28px;
}

._para_he847_31 {
  font-size: 1.25rem;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 20px;
}

._para_he847_31:last-child {
  margin-bottom: 0;
}

._photo_he847_42 {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* ── Experience ── */
._experienceSection_he847_50 {
  padding: 0 0 120px;
}

._expHeading_he847_54 {
  font-size: 48px;
  font-weight: 700;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 64px;
}

._expImage_he847_62 {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  ._aboutGrid_he847_16 {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  ._photo_he847_42 {
    max-width: 320px;
  }
}

@media (max-width: 680px) {
  ._aboutSection_he847_12 {
    padding: 48px 0 64px;
  }

  ._aboutHeading_he847_23,
  ._expHeading_he847_54 {
    font-size: 36px;
  }
}
._page_yawgj_1 {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* ── Header ── */
._header_yawgj_7 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding) 40px;
}

._title_yawgj_13 {
  font-size: 40px;
  font-weight: 700;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 20px;
}

._tags_yawgj_21 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

._tag_yawgj_21 {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 28px;
  background: #F4F4F4;
  border-radius: 200px;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ── Hero image ── */
._heroWrap_yawgj_41 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  position: relative;
  margin-bottom: 64px;
}

._heroImg_yawgj_49 {
  width: 100%;
  display: block;
}

._heroPlaceholder_yawgj_54 {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e8e8e8;
}

._heroOverlay_yawgj_60 {
  position: absolute;
  bottom: 24px;
  left: calc(var(--page-padding) + 24px);
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
}

/* ── Prototype button ── */
._protoBtnWrap_yawgj_70 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  margin-bottom: 64px;
  display: flex;
  justify-content: center;
}

._protoBtn_yawgj_70 {
  border: 2px solid #000;
  border-radius: 100px;
  color: #000;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  height: 50px;
  width: 200px;
  text-align: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

._protoBtn_yawgj_70:hover {
  background-color: #ddd;
}

._protoBtn_yawgj_70:hover ._pulseCircle_yawgj_104 {
  animation: none;
  box-shadow: none;
}

._protoBtnIcon_yawgj_109 {
  width: 7px;
  height: 8px;
  display: block;
  margin-left: 2px;
  margin-top: 1px;
}

._pulseCircle_yawgj_104 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000;
  position: relative;
  margin-left: 10px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
  animation: _protoPulse_yawgj_1 0.9s ease-out infinite;
}

@keyframes _protoPulse_yawgj_1 {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6); }
  60%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* ── Section title as annotation (interactive demo sections) ── */
._sectionTitleAnnotation_yawgj_138 {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9CA3AF;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Section ── */
._section_yawgj_138 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  margin-bottom: 150px;
}

._sectionTitle_yawgj_138 {
  font-size: 40px;
  font-weight: 700;
  color: #11100E;
  margin-bottom: 16px;
}

._overviewText_yawgj_162 {
  font-size: 1.3rem;
  line-height: var(--line-height);
  color: #11100E;
  margin-bottom: 40px;
}

._overviewText_yawgj_162 strong {
  font-weight: 700;
}

._contentPlaceholder_yawgj_173 {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #e8e8e8;
}

._slideshowWrap_yawgj_179 {
  background: #DCE6FD;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}

._overviewBgWrap_yawgj_188 {
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}

._slideshowImg_yawgj_196 {
  max-width: 80%;
  height: auto;
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

._overviewGif_yawgj_203 {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

._overviewImg_yawgj_210 {
  display: block;
  max-width: 100%;
  height: auto;
}

._sectionDesc_yawgj_216 {
  font-size: 1.3rem;
  line-height: var(--line-height);
  color: #11100E;
  margin: 0 0 40px;
}

._sectionDesc_yawgj_216 strong {
  font-weight: 700;
}

._sectionImg_yawgj_227 {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Callout box ── */
._callout_yawgj_234 {
  background: linear-gradient(135deg, #3a6fd8 0%, #6eb0f5 100%);
  color: #fff;
  border-radius: 16px;
  padding: 32px 40px;
  font-size: 2rem;
  font-weight: 400;
  line-height: var(--line-height);
  margin: 0 0 40px;
}

._callout_yawgj_234 strong {
  font-weight: 700;
}

._calloutPink_yawgj_249 {
  background: #F87171;
}

._calloutBlue_yawgj_253 {
  background: linear-gradient(90deg, #1890FF 9%, #40A9FF 89%);
}

._calloutRedBlue_yawgj_257 {
  background: linear-gradient(270deg, #FF6E70 0%, #326FE4 100%);
  border-radius: 20px;
}

._calloutPurple_yawgj_262 {
  background: linear-gradient(90deg, #734BA1 9%, #443995 89%);
  border-radius: 20px;
}

/* ── Section subtitle (blue, above items) ── */
._sectionSubtitle_yawgj_268 {
  font-size: 20px;
  font-weight: 700;
  color: #11100E;
  margin: 0 0 32px;
  line-height: var(--line-height);
}

/* ── Demo mobile hint ── */
._demoDesktop_yawgj_277 {
  display: block;
}

._demoMobileHint_yawgj_281 {
  display: none;
}

@media (max-width: 680px) {
  ._demoDesktop_yawgj_277 {
    display: none;
  }

  ._demoMobileHint_yawgj_281 {
    display: block;
    font-size: 1.1rem;
    color: #6B7280;
    background: #F4F4F4;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    line-height: var(--line-height);
  }
}

/* ── Items (desc + image, no title) ── */
._item_yawgj_303 {
  margin-top: 100px;
}

._itemDesc_yawgj_307 {
  font-size: 1.3rem;
  line-height: var(--line-height);
  color: #11100E;
  margin: 0 0 40px;
}

._itemImageOnly_yawgj_314 {
  margin-top: 16px;
}

/* ── Items with title — alternating image / text layout ── */
._itemAlt_yawgj_319 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

._itemAlt_yawgj_319 + ._itemAlt_yawgj_319 {
  margin-top: 96px;
}

._itemAlt_yawgj_319 ._itemTitle_yawgj_331 {
  font-size: 32px;
}

._itemAlt_yawgj_319 ._itemDesc_yawgj_307 {
  font-size: 1.3rem;
  line-height: var(--line-height);
}

._itemImg_yawgj_340 {
  width: 100%;
  height: auto;
  display: block;
}

._itemTextBlock_yawgj_346 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._itemTitle_yawgj_331 {
  font-size: 24px;
  font-weight: 600;
  color: #11100E;
  margin: 0;
  line-height: var(--line-height);
}

@media (max-width: 680px) {
  ._itemAlt_yawgj_319 {
    grid-template-columns: 1fr;
    direction: ltr !important;
  }
  ._itemAlt_yawgj_319 > * {
    direction: ltr !important;
  }
  ._iphoneWrap_yawgj_368 {
    justify-content: center !important;
    order: 2;
  }

  ._itemTextBlock_yawgj_346 {
    order: 1;
  }
}

/* ── iPhone mockup ── */
._iphoneOuter_yawgj_379 {
  position: relative;
  width: 280px;
}

._iphoneFrame_yawgj_384 {
  position: relative;
  width: 100%;
  aspect-ratio: 390 / 844;
  background: #000;
  border-radius: 40px;
  border: 7px solid #2c2c2e;
  box-shadow:
    0 0 0 1px #444,
    inset 0 0 0 1px #1a1a1a,
    0 28px 72px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

._iphoneDynamicIsland_yawgj_398 {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 2;
}

._iphoneVideoEl_yawgj_410 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._iphoneFallback_yawgj_418 {
  position: absolute;
  inset: 0;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

._iphoneFallbackText_yawgj_427 {
  font-size: 12px;
  color: #555;
  letter-spacing: 0.03em;
}

/* Side buttons — positioned relative to .iphoneOuter */
._iphoneMute_yawgj_434,
._iphoneVolUp_yawgj_435,
._iphoneVolDown_yawgj_436 {
  position: absolute;
  left: -3px;
  background: #3a3a3c;
  border-radius: 2px 0 0 2px;
  width: 3px;
}
._iphoneMute_yawgj_434    { top: 14%; height: 4%; }
._iphoneVolUp_yawgj_435   { top: 24%; height: 10%; }
._iphoneVolDown_yawgj_436 { top: 37%; height: 10%; }

._iphonePower_yawgj_447 {
  position: absolute;
  right: -3px;
  top: 27%;
  height: 14%;
  background: #3a3a3c;
  border-radius: 0 2px 2px 0;
  width: 3px;
}

/* ── Page items (title + image, stacked) ── */
._pageItem_yawgj_458 {
  margin-top: 56px;
}

._pageItemTitle_yawgj_462 {
  font-size: 24px;
  font-weight: 600;
  color: #1E1E1E;
  line-height: var(--line-height);
  margin: 0 0 24px;
}

/* ── Subsections ── */
._subsection_yawgj_471 {
  margin-top: 48px;
}

._subsection_yawgj_471 + ._subsection_yawgj_471 {
  margin-top: 80px;
}

._subsectionTitle_yawgj_479 {
  font-size: 2rem;
  font-weight: 700;
  color: #2B4DE5;
  margin: 0 0 12px;
  line-height: var(--line-height);
}

._subsectionNumber_yawgj_487 {
  font-variant-numeric: tabular-nums;
}

._subsectionDesc_yawgj_491 {
  font-size: 1.3rem;
  line-height: var(--line-height);
  color: #11100E;
  margin: 0 0 24px;
}

._subsectionImg_yawgj_498 {
  width: 100%;
  height: auto;
  display: block;
}


/* ── Project nav ── */
._projectNav_yawgj_506 {
  max-width: var(--max-width);
  margin: 80px auto 0;
  padding: 0 var(--page-padding);
}

._projectNavInner_yawgj_512 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._projectNavPrev_yawgj_518,
._projectNavNext_yawgj_519 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 400;
  color: #2C2C2C;
  text-decoration: none;
  transition: opacity 0.15s;
}

._projectNavPrev_yawgj_518:hover,
._projectNavNext_yawgj_519:hover {
  opacity: 0.5;
}

._projectNavArrow_yawgj_535 {
  width: 18px;
  height: 18px;
}

@media (max-width: 680px) {
  ._projectNav_yawgj_506 {
    margin-top: 48px;
  }
}

/* ── Not found ── */
._notFound_yawgj_547 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 120px var(--page-padding) 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Mobile ── */
@media (max-width: 680px) {
  ._page_yawgj_1 {
    padding-top: 88px;
    padding-bottom: 80px;
  }

  ._title_yawgj_13 {
    font-size: 1.75rem;
  }

  ._overviewText_yawgj_162,
  ._sectionDesc_yawgj_216,
  ._subsectionDesc_yawgj_491,
  ._itemDesc_yawgj_307 {
    font-size: 1.05rem;
  }

  ._callout_yawgj_234 {
    font-size: 1.3rem;
    padding: 24px 28px;
  }
}

@media (hover: none) {
  ._protoBtn_yawgj_70:hover {
    background-color: #fff;
  }

  ._protoBtn_yawgj_70:hover ._pulseCircle_yawgj_104 {
    animation: _protoPulse_yawgj_1 0.9s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6);
  }

  ._projectNavPrev_yawgj_518:hover,
  ._projectNavNext_yawgj_519:hover {
    opacity: 1;
  }
}
._wrap_1evue_1 {
  margin-top: 40px;
}

/* ── Screenshot + hotspot ── */
._canvas_1evue_6 {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
  background: #f0f0f0;
  margin-bottom: 20px;
  cursor: default;
}

@keyframes _shotIn_1evue_1 {
  from { opacity: 0; transform: scale(1.01); }
  to   { opacity: 1; transform: scale(1); }
}

._screenshot_1evue_21 {
  width: 100%;
  height: auto;
  display: block;
  animation: _shotIn_1evue_1 0.25s ease;
}

/* ── Pulsing hotspot ── */
._hotspot_1evue_29 {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

._ring_1evue_43 {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
  animation: _pulse_1evue_1 1.6s ease-out infinite;
}

._ringOuter_1evue_53 {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: _ringExpand_1evue_1 1.6s ease-out infinite;
}

@keyframes _pulse_1evue_1 {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}

@keyframes _ringExpand_1evue_1 {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Footer row ── */
._footer_1evue_74 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

._annotation_1evue_81 {
  flex: 1;
}

._label_1evue_85 {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #2B4DE5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

._desc_1evue_95 {
  font-size: 1rem;
  line-height: 1.7;
  color: #11100E;
  margin: 0;
}

/* ── Navigation ── */
._navGroup_1evue_103 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 2px;
}

._stepDots_1evue_112 {
  display: flex;
  gap: 6px;
}

._dot_1evue_117 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #D4D4D4;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

._dot_1evue_117:hover {
  background: #888;
}

._dotDone_1evue_132 {
  background: #888;
}

._dotActive_1evue_136 {
  background: #11100E;
  transform: scale(1.3);
}

._arrows_1evue_141 {
  display: flex;
  gap: 8px;
}

._arrowBtn_1evue_146 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #11100E;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11100E;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

._arrowBtn_1evue_146:disabled {
  opacity: 0.2;
  cursor: default;
}

._arrowBtn_1evue_146:not(:disabled):hover {
  background: #11100E;
  color: #fff;
}
/* ── Frame ── */
._frame_46cf3_2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  height: 856px;
  background: #F5F5F5;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #111827;
  -webkit-user-select: none;
          user-select: none;
  cursor: default;
}

/* ── Nav ── */
._nav_46cf3_23 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 24px;
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border-bottom: 1px solid #D1D1D1;
  flex-shrink: 0;
}

/* Frame 1548 — inner row */
._navInner_46cf3_38 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  gap: 24px;
  width: 100%;
  height: 36px;
}

._logo_46cf3_49 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._logoImg_46cf3_56 {
  width: 48px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

._logoText_46cf3_63 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1E1E1E;
  white-space: nowrap;
  width: 177px;
}

._navLinks_46cf3_74 {
  display: flex;
  align-items: center;
  gap: 0;
}

._navLink_46cf3_74 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  height: 36px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #222222;
}

._navRight_46cf3_97 {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

._navRegion_46cf3_106 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  height: 36px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1E1E1E;
  white-space: nowrap;
}

._navRegionIcon_46cf3_124 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

._navIcon_46cf3_130 {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

._navIconImg_46cf3_139 {
  width: 20px;
  height: 20px;
}

._avatar_46cf3_144 {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: #1E1E1E;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Breadcrumb ── */
/* Frame 2672 — full-width bar */
._breadcrumb_46cf3_165 {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 24px;
  width: 100%;
  height: 44px;
  background: #F5F5F5;
  flex-shrink: 0;
}

/* Frame 2232 — items group */
._bcGroup_46cf3_178 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 12px;
  height: 36px;
}

/* each clickable crumb = text + chevron inside one padded span */
._bcItem_46cf3_188 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
  height: 36px;
}

._bcLink_46cf3_196 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #2B4DE5;
}

._bcCurrent_46cf3_205 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  height: 36px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #757575;
}

/* ── Toolbar — Frame 2615 ── */
._toolbar_46cf3_219 {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  width: 100%;
  height: 68px;
  background: #FFFFFF;
  border-bottom: 1px solid #D9D9D9;
  flex-shrink: 0;
}

/* Frame 1810 — segmented container */
._tabs_46cf3_234 {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
}

/* Frame 1802 — active segment */
._tabActive_46cf3_248 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  width: 120px;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  flex: none;
  order: 0;
  flex-grow: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1E1E1E;
  white-space: nowrap;
}

/* Frame 1805 — inactive segment */
._tab_46cf3_234 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  width: 120px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: transparent;
  flex: none;
  order: 1;
  flex-grow: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #757575;
  white-space: nowrap;
}

._importBtnSmall_46cf3_296 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
}

/* ── Main ── */
._main_46cf3_311 {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  position: relative;
  background: #FFFFFF;
}

/* ── VIN banner ── */
._vinBanner_46cf3_320 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #F0E7FD;
  gap: 16px;
  flex-wrap: wrap;
}

._vinText_46cf3_330 {
  font-size: 13px;
  color: #7E3AF2;
  display: flex;
  align-items: center;
  gap: 6px;
}

._bolt_46cf3_338 {
  font-size: 14px;
}

._vinEst_46cf3_342 {
  color: #7E3AF2;
}

._vinActions_46cf3_346 {
  display: flex;
  gap: 16px;
}

._smartMatchBtn_46cf3_351 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #7E3AF2;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

._smartMatchBtn_46cf3_351:hover {
  background: #6D28D9;
}

._smartMatchBtn_46cf3_351 img {
  filter: brightness(0) invert(1);
}

._laterBtn_46cf3_376 {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 20px;
  background: #F0E7FD;
  border: 1.5px solid #7E3AF2;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #7E3AF2;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

._laterBtn_46cf3_376:hover {
  background: #E8D9FC;
}

/* ── Empty state ── */
._emptyState_46cf3_397 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
  gap: 12px;
  text-align: center;
}

._emptyIcon_46cf3_408 {
  width: 48px;
  height: 48px;
}

._emptyTitle_46cf3_413 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #222222;
  margin: 0;
}

._emptyDesc_46cf3_422 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #757575;
  margin: 0 0 4px;
  max-width: 480px;
}

._emptyActions_46cf3_432 {
  display: flex;
  gap: 12px;
}

._addManuallyBtn_46cf3_437 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 161px;
  height: 44px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1E1E1E;
  cursor: default;
}

._importPartsBtn_46cf3_454 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 161px;
  height: 44px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2B4DE5;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

._importPartsBtn_46cf3_454:hover {
  background: #F0F4FF;
  border-color: #2B4DE5;
}

/* ── Parts table ── */
._table_46cf3_479 {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

._tableHead_46cf3_486 {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
  background: #fff;
}

._thPart_46cf3_493 {
  flex: 0 0 40%;
  padding: 8px 12px 8px 44px;
  font-size: 12px;
  font-weight: 500;
  color: #757575;
  white-space: nowrap;
}

._thRight_46cf3_502 {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #757575;
  white-space: nowrap;
}

._row_46cf3_512 {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.1s;
}

._tdPart_46cf3_519 {
  flex: 0 0 40%;
  padding: 12px 12px 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: #1E1E1E;
  min-width: 0;
}

._dragHandle_46cf3_530 {
  opacity: 0.35;
  flex-shrink: 0;
}

._tdRight_46cf3_535 {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
}

/* ── Column cells — percentage widths ── */
._colVerification_46cf3_542 {
  flex: 0 0 18%;
  display: flex;
  align-items: center;
}

._colHardware_46cf3_548 {
  flex: 0 0 12%;
  display: flex;
  align-items: center;
}

._colQty_46cf3_554 {
  flex: 0 0 10%;
  display: flex;
  align-items: center;
}

._colActionContent_46cf3_560 {
  flex: 0 0 6%;
  display: flex;
  align-items: center;
}

._colActionMeta_46cf3_566 {
  flex: 0 0 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

._matchBtn_46cf3_574 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  width: 110px;
  border: 1.5px solid #D9D9D9;
  border-radius: 6px;
  background: #fff;
  color: #7C3AED;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: default;
}

._addBtn_46cf3_592 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  width: 72px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #1E1E1E;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}

._addBtn_46cf3_592:hover {
  background: #F9FAFB;
}

._qty_46cf3_615 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  width: 56px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
}

._tdAction_46cf3_627 {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

._noDiagram_46cf3_634 {
  color: #B3B3B3;
  font-size: 12px;
  white-space: nowrap;
}

._actionSep_46cf3_640 {
  color: #E5E7EB;
}

._trashBtn_46cf3_644 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 2px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s;
}

._trashBtn_46cf3_644:hover {
  opacity: 1;
}

._addRow_46cf3_660 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  color: #757575;
  border-top: 1px solid #F3F4F6;
}

._addRowHint_46cf3_670 {
  display: inline-flex;
  align-items: center;
  color: #B0B0B0;
  margin-left: 8px;
}

._addRowPlus_46cf3_677 {
  opacity: 0.5;
  flex-shrink: 0;
}

._addRowText_46cf3_682 {
  display: inline-flex;
  align-items: center;
  color: #757575;
}

/* ── Status bar ── */
._statusBar_46cf3_689 {
  box-sizing: border-box;
  width: 100%;
  height: 68px;
  background: #FFFFFF;
  border-top: 1px solid #D1D1D1;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}

._itemCount_46cf3_703 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #757575;
}

._selectSupplyBtn_46cf3_711 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 168px;
  height: 44px;
  padding: 0 16px;
  background: #2B4DE5;
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  cursor: default;
}

._selectSupplyDisabled_46cf3_730 {
  background: #C1D3FC;
  color: #F3F3F3;
  cursor: default;
}

/* ── Drawer overlay ── */
._overlay_46cf3_737 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* ── Drawer panel ── */
._drawer_46cf3_745 {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 42%;
  min-width: 300px;
  background: #fff;
  border-left: none;
  z-index: 20;
  display: flex;
  flex-direction: column;
  animation: _slideIn_46cf3_1 0.25s ease;
  filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.04));
}

@keyframes _slideIn_46cf3_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

._drawerHeader_46cf3_766 {
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}

._drawerTitle_46cf3_775 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

._drawerStep_46cf3_782 {
  font-size: 13px;
  color: #757575;
}

._closeBtn_46cf3_787 {
  background: none;
  border: none;
  font-size: 20px;
  color: #757575;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}

._closeBtn_46cf3_787:hover {
  color: #1E1E1E;
}

._drawerBody_46cf3_802 {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

._drawerDesc_46cf3_808 {
  font-size: 13px;
  color: #757575;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* Dropzone */
._dropzone_46cf3_816 {
  border: 1.5px dashed #D1D5DB;
  border-radius: 8px;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  background: #FFFFFF;
}

._dropIconCircle_46cf3_828 {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}

._dropIconCircle_46cf3_828:hover {
  background: rgba(43, 77, 229, 0.08);
}

._dropText_46cf3_848 {
  font-size: 13px;
  color: #374151;
}

._chooseFile_46cf3_853 {
  color: #2563EB;
  cursor: default;
  text-decoration: underline;
}

._dropFormats_46cf3_859 {
  font-size: 11px;
  color: #757575;
}

/* File list */
._fileList_46cf3_865 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._fileItem_46cf3_871 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #F9FAFB;
}

._fileIcon_46cf3_881 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

._fileInfo_46cf3_887 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._fileName_46cf3_895 {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._fileSize_46cf3_904 {
  font-size: 11px;
  color: #757575;
}

._fileRemove_46cf3_909 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

._fileRemove_46cf3_909:hover {
  opacity: 1;
}

/* Progress bar */
._progressBar_46cf3_924 {
  height: 4px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

._progressFill_46cf3_932 {
  height: 100%;
  background: #2563EB;
  border-radius: 4px;
  transition: width 0.1s linear;
}

._progressPct_46cf3_939 {
  font-size: 12px;
  color: #757575;
  flex-shrink: 0;
}

/* Extracting state */
._extractingCenter_46cf3_946 {
  text-align: center;
  padding: 20px 0 24px;
}

._spinner_46cf3_951 {
  width: 36px;
  height: 36px;
  border: 3px solid #E5E7EB;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: _spin_46cf3_951 0.8s linear infinite;
  margin: 0 auto 14px;
}

@keyframes _spin_46cf3_951 {
  to { transform: rotate(360deg); }
}

._checkCircle_46cf3_965 {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: block;
}

._extractingTitle_46cf3_972 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px;
}

._extractingDesc_46cf3_979 {
  font-size: 13px;
  color: #757575;
  line-height: 1.5;
  margin: 0;
}

/* Review */
._reviewCount_46cf3_987 {
  font-size: 13px;
  color: #374151;
  margin: 0 0 12px;
}

._reviewList_46cf3_993 {
  display: flex;
  flex-direction: column;
}

._reviewItem_46cf3_998 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
  gap: 8px;
}

._reviewName_46cf3_1007 {
  font-size: 13px;
  color: #111827;
  flex: 1;
  min-width: 0;
}

._reviewRight_46cf3_1014 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

._reviewQty_46cf3_1021 {
  font-size: 12px;
  color: #757575;
}

._reviewRemove_46cf3_1026 {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  opacity: 0.4;
  padding: 0;
  transition: opacity 0.15s;
}

._reviewRemove_46cf3_1026:hover {
  opacity: 1;
}

/* Drawer footer */
._drawerFooter_46cf3_1041 {
  padding: 12px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

._cancelBtn_46cf3_1050 {
  height: 44px;
  padding: 0 20px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

._cancelBtn_46cf3_1050:hover:not(:disabled) {
  background: #F9FAFB;
}

._cancelBtn_46cf3_1050:disabled {
  opacity: 0.4;
  cursor: default;
}

._extractBtn_46cf3_1075 {
  height: 44px;
  padding: 0 16px;
  background: #C1D3FC;
  color: #F3F3F3;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._extractBtn_46cf3_1075:disabled {
  background: #C1D3FC;
  opacity: 0.6;
  cursor: default;
}

._spinnerInline_46cf3_1098 {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: _spin_46cf3_951 0.7s linear infinite;
  display: inline-block;
}

/* Active Extract parts button (step 3 upload-with-files sub-state) */
._extractBtnActive_46cf3_1109 {
  height: 44px;
  padding: 0 16px;
  background: #2B4DE5;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  animation: _extractBtnGlow_46cf3_1 1.4s ease-in-out infinite;
  transition: background 0.15s;
}

._extractBtnActive_46cf3_1109:hover {
  background: #2340CC;
}

@keyframes _extractBtnGlow_46cf3_1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 77, 229, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(43, 77, 229, 0.3); }
}

/* Burst wrapper — radiating rings around Extract parts button */
._extractBtnBurst_46cf3_1139 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

._extractBtnBurst_46cf3_1139::before,
._extractBtnBurst_46cf3_1139::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 2px solid rgba(43, 77, 229, 0.55);
  animation: _burstRing_46cf3_1 1.4s ease-out infinite;
  pointer-events: none;
}

._extractBtnBurst_46cf3_1139::after {
  animation-delay: 0.7s;
}

@keyframes _burstRing_46cf3_1 {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* File icon box — used in both upload-with-files and extracting states */
._fileIconBox_46cf3_1166 {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Upload file list (step 3, sub-state A) */
._uploadFileList_46cf3_1180 {
  margin-top: 8px;
  border-top: 1px solid #E5E7EB;
}

._uploadFileRow_46cf3_1185 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

._uploadFileInfo_46cf3_1192 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._uploadFileRightGroup_46cf3_1200 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

._uploadFilePct_46cf3_1207 {
  font-size: 13px;
  color: #757575;
}

._uploadFileDivider_46cf3_1212 {
  height: 0;
  border-bottom: 1px dashed #E5E7EB;
}

._uploadDeleteBtn_46cf3_1217 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

._uploadDeleteBtn_46cf3_1217:hover {
  opacity: 1;
}

/* ── Completion card (step 5) ── */
._completeCard_46cf3_1235 {
  position: absolute;
  bottom: 80px;
  left: 24px;
  width: 400px;
  background: #1E293B;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}

._completeCardHeader_46cf3_1250 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._completeCardTitle_46cf3_1256 {
  font-size: 24px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
}

._completeCardDesc_46cf3_1263 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.5;
}

._completeCardActions_46cf3_1270 {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

._prevStepBtn_46cf3_1276 {
  flex: 1;
  height: 40px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s;
}

._prevStepBtn_46cf3_1276:hover {
  background: rgba(255, 255, 255, 0.15);
}

._playAgainBtn_46cf3_1295 {
  flex: 1;
  height: 40px;
  padding: 0 20px;
  background: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  color: #1E293B;
  cursor: pointer;
  transition: background 0.15s;
}

._playAgainBtn_46cf3_1295:hover {
  background: #F1F5F9;
}

._wrap_jymvo_1 {
  margin-top: 40px;
}

/* ── Pulsing hotspot ── */
._hotspot_jymvo_6 {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
}

._ring_jymvo_21 {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(100, 100, 100, 0.12);
  animation: _pulse_jymvo_1 1.6s ease-out infinite;
  pointer-events: none;
}

._ringOuter_jymvo_30 {
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  border: 2px solid rgba(100, 100, 100, 0.3);
  animation: _ringExpand_jymvo_1 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes _pulse_jymvo_1 {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.15; }
  100% { opacity: 0.6; }
}

@keyframes _ringExpand_jymvo_1 {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Circular ring variant (for dropzone icon) ── */
._ringCircle_jymvo_51 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(100, 100, 100, 0.12);
  animation: _pulse_jymvo_1 1.6s ease-out infinite;
  pointer-events: none;
}

._ringOuterCircle_jymvo_60 {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(100, 100, 100, 0.3);
  animation: _ringExpand_jymvo_1 1.6s ease-out infinite;
  pointer-events: none;
}

/* ── Cancel upload button (× on first file in upload step) ── */
._cancelUploadBtn_jymvo_70 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #9CA3AF;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
._cancelUploadBtn_jymvo_70:hover { color: #374151; }

/* ── In-frame step tooltip ── */
._tooltip_jymvo_84 {
  position: absolute;
  background: #1E293B;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  padding: 24px;
  width: 400px;
  z-index: 30;
  text-align: left;
}

._tooltipTitle_jymvo_96 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #FFFFFF;
  margin-bottom: 12px;
  width: 300px;
}

._tooltipDesc_jymvo_106 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 16px;
  align-self: stretch;
}

._tooltipFooter_jymvo_116 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 40px;
  align-self: stretch;
}

/* ── Inline drawer tooltip (steps 2-4 — renders inside drawer body) ── */
._drawerTooltip_jymvo_127 {
  margin-top: 16px;
  background: #1E293B;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  padding: 24px;
}

._prevBtn_jymvo_136 {
  height: 40px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._prevBtn_jymvo_136:hover {
  background: rgba(255, 255, 255, 0.15);
}

._nextBtn_jymvo_155 {
  background: #FFFFFF;
  color: #1E293B;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  height: 40px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._nextBtn_jymvo_155:hover {
  background: #F1F5F9;
}
._wrap_u9pir_1 {
  margin-top: 40px;
}

/* ── Ring animations on Start smart matching button ── */
._ring_u9pir_6 {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(100, 100, 100, 0.12);
  animation: _pulse_u9pir_1 1.6s ease-out infinite;
  pointer-events: none;
}

._ringOuter_u9pir_15 {
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  border: 2px solid rgba(100, 100, 100, 0.3);
  animation: _ringExpand_u9pir_1 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes _pulse_u9pir_1 {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.15; }
  100% { opacity: 0.6; }
}

@keyframes _ringExpand_u9pir_1 {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Tooltip card (step 0) ── */
._tooltip_u9pir_36 {
  position: absolute;
  background: #1E293B;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  padding: 24px;
  width: 400px;
  z-index: 30;
  text-align: left;
}

._tooltipTitle_u9pir_47 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 120%;
  color: #FFFFFF;
  margin-bottom: 12px;
}

._tooltipDesc_u9pir_56 {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 16px;
}

._tooltipFooter_u9pir_65 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
}

._prevBtn_u9pir_72 {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 0 20px;
  height: 40px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._prevBtn_u9pir_72:hover { background: rgba(255, 255, 255, 0.2); }

._nextBtn_u9pir_89 {
  background: #FFFFFF;
  color: #1E293B;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  height: 40px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

._nextBtn_u9pir_89:hover { background: #F1F5F9; }

/* ── Smart Match Drawer ── */
._smOverlay_u9pir_107 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

._smDrawer_u9pir_114 {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 44%;
  min-width: 320px;
  background: #fff;
  z-index: 20;
  display: flex;
  flex-direction: column;
  animation: _slideIn_u9pir_1 0.25s ease;
  filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.04));
}

@keyframes _slideIn_u9pir_1 {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

._smHeader_u9pir_134 {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

._smHeaderRow_u9pir_140 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2px;
}

._smTitle_u9pir_147 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

._smSubtitle_u9pir_153 {
  font-size: 13px;
  color: #757575;
}

._smCloseBtn_u9pir_158 {
  background: none;
  border: none;
  font-size: 20px;
  color: #757575;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
}

._smCloseBtn_u9pir_158:hover { color: #1E1E1E; }

/* ── Drawer body ── */
._smBody_u9pir_173 {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

/* Running phase — center area */
._runningCenter_u9pir_180 {
  text-align: center;
  padding: 20px 0 16px;
}

._runningTitle_u9pir_185 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 10px 0 4px;
}

._runningSubtitle_u9pir_192 {
  font-size: 13px;
  color: #757575;
  margin: 0;
}

/* Spinner (reused from ImportPartsDemo pattern) */
._spinner_u9pir_199 {
  width: 32px;
  height: 32px;
  border: 3px solid #E5E7EB;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: _spin_u9pir_199 0.8s linear infinite;
  margin: 0 auto;
}

@keyframes _spin_u9pir_199 {
  to { transform: rotate(360deg); }
}

@keyframes _burstRing_u9pir_1 {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* Parts list rows */
._partsList_u9pir_219 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
}

._partThumb_u9pir_226 {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  flex-shrink: 0;
}

._partRow_u9pir_236 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #F9FAFB;
  gap: 8px;
}

._partRowLeft_u9pir_247 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

._partName_u9pir_255 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._partNameDim_u9pir_264 {
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._checkIcon_u9pir_273 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: invert(55%) sepia(69%) saturate(524%) hue-rotate(100deg) brightness(98%) contrast(97%);
}

._itemSpinner_u9pir_280 {
  width: 16px;
  height: 16px;
  border: 2px solid #E5E7EB;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: _spin_u9pir_199 0.8s linear infinite;
  flex-shrink: 0;
}

._timerIcon_u9pir_290 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.4;
}

._partPctDone_u9pir_297 {
  font-size: 13px;
  font-weight: 600;
  color: #10B981;
  flex-shrink: 0;
}

._partThreeDots_u9pir_304 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Complete phase — center area */
._completeCenter_u9pir_312 {
  text-align: center;
  padding: 20px 0 16px;
}

._completeIconWrap_u9pir_317 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #D3F8E4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

._completeCheckIcon_u9pir_328 {
  width: 28px;
  height: 28px;
  filter: invert(55%) sepia(69%) saturate(524%) hue-rotate(100deg) brightness(98%) contrast(97%);
}

._completeTitle_u9pir_334 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

._completeSubtitle_u9pir_341 {
  font-size: 13px;
  color: #757575;
  margin: 0;
}

/* Section label row */
._sectionLabelRow_u9pir_348 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
  font-size: 12px;
  color: #757575;
}

/* ── Post-match verification column cells ── */
._autoMatchedCell_u9pir_358 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 16px;
  background: #F3E8FF;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #7C3AED;
  white-space: nowrap;
}

._autoMatchedCellBolt_u9pir_372 {
  width: 11px;
  height: 11px;
  filter: invert(31%) sepia(97%) saturate(2018%) hue-rotate(245deg) brightness(92%) contrast(98%);
}

._diagramLink_u9pir_378 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

._manualMatchedCell_u9pir_387 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px;
  background: #D1FAE5;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #065F46;
  white-space: nowrap;
}

._manualMatchedCellIcon_u9pir_400 {
  width: 11px;
  height: 11px;
  filter: invert(26%) sepia(50%) saturate(700%) hue-rotate(120deg) brightness(90%) contrast(95%);
}

/* Auto-matched list */
._matchedList_u9pir_407 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

._matchedRow_u9pir_414 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #F9FAFB;
  gap: 8px;
}

._matchedLeft_u9pir_425 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

._matchedRight_u9pir_433 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._autoMatchedBadge_u9pir_440 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #F3E8FF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #7C3AED;
  white-space: nowrap;
}

._badgeBolt_u9pir_453 {
  width: 10px;
  height: 10px;
  filter: invert(31%) sepia(97%) saturate(2018%) hue-rotate(245deg) brightness(92%) contrast(98%);
}

/* Remaining items list */
._remainingList_u9pir_460 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

._remainingRow_u9pir_467 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #F3F4F6;
  gap: 8px;
}

._remainingPct_u9pir_478 {
  font-size: 13px;
  color: #9CA3AF;
  flex-shrink: 0;
}

/* ── Drawer footer ── */
._smFooter_u9pir_485 {
  padding: 12px 20px;
  border-top: none;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

._smCancelBtn_u9pir_495 {
  height: 44px;
  padding: 0 20px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}

._smCancelBtn_u9pir_495:hover { background: #F9FAFB; }

._smDoneBtn_u9pir_511 {
  height: 44px;
  padding: 0 20px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}

._smDoneBtn_u9pir_511:hover { background: #F9FAFB; }

._smMatchRemainingBtn_u9pir_527 {
  position: relative;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: #2B4DE5;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

._smMatchRemainingBtn_u9pir_527:hover { background: #2340CC; }

._smMatchRemainingBtn_u9pir_527::before,
._smMatchRemainingBtn_u9pir_527::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 2px solid rgba(43, 77, 229, 0.55);
  animation: _burstRing_u9pir_1 1.4s ease-out infinite;
  pointer-events: none;
}

._smMatchRemainingBtn_u9pir_527::after { animation-delay: 0.7s; }

/* ── Match Parts Drawer ── */
._matchDrawer_u9pir_561 {
  position: absolute;
  top: 60px;
  right: 0;
  bottom: 0;
  width: 44%;
  min-width: 320px;
  background: #fff;
  z-index: 25;
  display: flex;
  flex-direction: column;
  animation: _slideIn_u9pir_1 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(-4px 0px 4px rgba(0, 0, 0, 0.04));
}

._matchHeader_u9pir_576 {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

._matchHeaderTop_u9pir_582 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

._matchTitle_u9pir_589 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

._matchSubtitle_u9pir_595 {
  font-size: 13px;
  color: #757575;
}

._matchDiagramWrap_u9pir_600 {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F8F8F8;
}

._matchDiagramImg_u9pir_608 {
  width: 100%;
  height: auto;
  display: block;
}

._matchBody_u9pir_614 {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._matchItem_u9pir_623 {
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._matchItemSelected_u9pir_633 {
  padding: 12px 14px;
  border: 1.5px solid #6366F1;
  border-radius: 8px;
  background: #EEF2FF;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._matchItemTop_u9pir_643 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._matchItemName_u9pir_650 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

._matchBestLabel_u9pir_656 {
  font-size: 12px;
  font-weight: 600;
  color: #4F46E5;
  white-space: nowrap;
  flex-shrink: 0;
}

._matchPct_u9pir_664 {
  font-size: 12px;
  color: #9CA3AF;
  white-space: nowrap;
  flex-shrink: 0;
}

._matchItemBottom_u9pir_671 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._viewDiagram_u9pir_677 {
  font-size: 12px;
  color: #6B7280;
}

._matchFooter_u9pir_682 {
  padding: 12px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

._confirmBtn_u9pir_691 {
  position: relative;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: #2B4DE5;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

._confirmBtn_u9pir_691:hover { background: #2340CC; }

._confirmBtn_u9pir_691::before,
._confirmBtn_u9pir_691::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 2px solid rgba(43, 77, 229, 0.55);
  animation: _burstRing_u9pir_1 1.4s ease-out infinite;
  pointer-events: none;
}

._confirmBtn_u9pir_691::after { animation-delay: 0.7s; }