.product-guide { position: fixed; inset: 0; z-index: 90; display: none; pointer-events: none; }
.product-guide.open { display: block; }
.product-guide-highlight { position: fixed; z-index: 91; border: 2px solid #78938c; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(31,44,40,.58), 0 12px 30px rgba(32,54,48,.16); transition: inset .2s ease, width .2s ease, height .2s ease; }
.product-guide-card { position: fixed; z-index: 92; width: min(390px, calc(100vw - 32px)); padding: 18px; overflow: hidden; border: 1px solid #78938c; border-radius: 8px; background: #fbfdfc; box-shadow: 0 18px 44px rgba(36,60,53,.18); color: #203630; pointer-events: auto; }
.product-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.product-guide-kicker { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 7px; padding: 0 8px; border-radius: 5px; background: #e6efeb; color: #47675f; font-size: 11px; font-weight: 800; }
.product-guide-title { margin: 0; color: #203630; font-size: 20px; line-height: 1.3; letter-spacing: 0; }
.product-guide-close { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; padding: 0; border: 1px solid #d3ded9; border-radius: 50%; background: #f3f7f5; color: #48625b; font-size: 20px; line-height: 1; transition: border-color .18s ease, background .18s ease; }
.product-guide-close:hover { border-color: #9fb3ac; background: #e8f0ed; }
.product-guide-body { margin: 12px 0 17px; color: #596a65; font-size: 14px; line-height: 1.75; }
.product-guide-body strong { color: #2d5148; }
.product-guide-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-guide-progress { display: flex; align-items: center; gap: 6px; }
.product-guide-dot { width: 6px; height: 6px; border-radius: 50%; background: #d5dfdb; }
.product-guide-dot.active { width: 18px; border-radius: 4px; background: #6f8e86; }
.product-guide-actions { display: flex; align-items: center; gap: 8px; }
.product-guide-skip { min-height: 38px; padding: 0 10px; border: 0; background: transparent; color: #77847f; font-size: 12px; }
.product-guide-skip:hover { color: #48625b; }
.product-guide-next { min-height: 40px; padding: 0 16px; border: 1px solid #526f68; border-radius: 7px; background: #526f68; color: #fff; font-weight: 750; box-shadow: 0 5px 14px rgba(49,82,73,.18); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.product-guide-next:hover { border-color: #405e57; background: #405e57; transform: translateY(-1px); }
.product-guide-browser-note { margin-top: 10px; padding: 10px 11px; border-left: 3px solid #78938c; background: #edf3f0; color: #4b625c; font-size: 12px; line-height: 1.6; }
html.product-guide-locked, body.product-guide-locked { overscroll-behavior: none; }
body.product-guide-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden !important; }
@media (max-width: 760px) {
  .product-guide { background: transparent; }
  .product-guide.open { pointer-events: auto; }
  .product-guide-highlight { display: block; border: 3px solid #6f968b; background: transparent; box-shadow: 0 0 0 9999px rgba(31,44,40,.62), 0 0 0 3px rgba(111,150,139,.24), 0 10px 24px rgba(24,45,39,.22); }
  .product-guide-card { left: 12px !important; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); top: auto !important; width: auto; max-height: min(48dvh, 360px); padding: 14px 15px; overflow-y: auto; overscroll-behavior: contain; border-color: #91a8a1; box-shadow: 0 14px 34px rgba(24,45,39,.24); }
  .product-guide-head { gap: 10px; }
  .product-guide-kicker { min-height: 22px; margin-bottom: 5px; font-size: 10px; }
  .product-guide-title { font-size: 17px; line-height: 1.35; }
  .product-guide-close { width: 30px; height: 30px; flex-basis: 30px; font-size: 18px; }
  .product-guide-body { margin: 8px 0 12px; font-size: 12px; line-height: 1.6; }
  .product-guide-browser-note { margin-top: 8px; padding: 8px 9px; font-size: 11px; }
  .product-guide-footer { align-items: center; }
  .product-guide-skip { min-height: 34px; }
  .product-guide-next { min-height: 36px; padding: 0 14px; }
  .product-guide.global { background: rgba(31,44,40,.62); }
  .product-guide.global .product-guide-highlight { display: none; }
  .product-guide.global .product-guide-card { top: 50% !important; bottom: auto; transform: translateY(-50%); }
}
@media (max-width: 370px) {
  .product-guide-card { left: 8px !important; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); max-height: 52dvh; padding: 12px; }
  .product-guide-actions { gap: 3px; }
  .product-guide-next { padding-inline: 12px; }
}