.driver-popover{all:unset;font-family:var(--driver-popover-font-family,"Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif);box-sizing:border-box;color:#2d2d2d;z-index:1000000000;background-color:#fff;border-radius:5px;min-width:250px;max-width:300px;margin:0;padding:15px;position:fixed;top:0;right:0;box-shadow:0 1px 10px #0006}.driver-popover-title{zoom:1;margin:0;font-size:19px;font-weight:700;line-height:1.5;display:block;position:relative}.driver-popover-close-btn{all:unset;cursor:pointer;color:#d2d2d2;z-index:1;text-align:center;width:32px;height:28px;font-size:18px;font-weight:500;transition:color .2s;position:absolute;top:0;right:0}.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}.driver-popover-description{zoom:1;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.5}.driver-popover-footer{text-align:right;zoom:1;justify-content:space-between;align-items:center;margin-top:15px;display:flex}.driver-popover-progress-text{color:#727272;zoom:1;font-size:13px;font-weight:400}.driver-popover-footer-btn{all:unset;box-sizing:border-box;color:#2d2d2d;cursor:pointer;zoom:1;background-color:#fff;border:1px solid #ccc;border-radius:3px;outline:0;padding:3px 7px;font-size:12px;line-height:1.3;text-decoration:none;display:inline-block}.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}.driver-popover-footer-btn:hover,.driver-popover-footer-btn:focus{background-color:#f7f7f7}.driver-popover-navigation-btns{flex-grow:1;justify-content:flex-end;display:flex}.driver-popover-navigation-btns button+button{margin-left:4px}.driver-popover-arrow{content:"";border:5px solid #fff;position:absolute}.driver-popover-arrow-side-over{display:none}.driver-popover-arrow-side-left{border-top-color:#0000;border-bottom-color:#0000;border-right-color:#0000;left:100%}.driver-popover-arrow-side-right{border-top-color:#0000;border-bottom-color:#0000;border-left-color:#0000;right:100%}.driver-popover-arrow-side-top{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;top:100%}.driver-popover-arrow-side-bottom{border-top-color:#0000;border-left-color:#0000;border-right-color:#0000;bottom:100%}.driver-popover-arrow-side-center,.driver-popover-arrow-none{display:none}.driver-active .driver-overlay{pointer-events:none}.driver-active.driver-no-scroll{overflow:hidden}.driver-active *{pointer-events:none}.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}.driver-fade .driver-overlay{animation:animate-fade-in var(--driver-animation-duration,.4s) ease-in-out}.driver-fade .driver-popover{animation:animate-fade-in var(--driver-animation-duration,.4s)}.driver-active-element-parent-no-scroll{overflow:hidden!important}.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}

/* =============================================================
   Testndex theme — brings the tour popover in line with the rest
   of the app's UI (card radius, primary-brand accents, design-token
   colors so it follows dark mode) instead of driver.js's stock
   white/gray look. The stock rules above set literal hex colors,
   so every one of them has to be restated here.
   ============================================================= */
.driver-popover{
  font-family:inherit;
  min-width:280px;
  max-width:360px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:0.75rem;
  background-color:var(--card);
  color:var(--card-foreground);
  box-shadow:0 12px 32px -8px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.08);
}
.driver-popover-title{font-size:15px;font-weight:600;line-height:1.4;padding-right:28px}
.driver-popover-description{margin-top:6px;font-size:13px;line-height:1.6;color:var(--muted-foreground)}

.driver-popover-close-btn{
  width:28px;height:28px;
  top:12px;right:12px;
  border-radius:9999px;
  font-size:16px;line-height:28px;
  color:var(--muted-foreground);
  transition:background-color 150ms, color 150ms;
}
.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{
  background-color:var(--accent);
  color:var(--foreground);
}

.driver-popover-footer{margin-top:18px;gap:12px;flex-wrap:wrap}
.driver-popover-progress-text{font-size:12px;font-weight:500;color:var(--muted-foreground);white-space:nowrap}

.driver-popover-footer-btn{
  padding:6px 14px;
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
  border-radius:0.5rem;
  border:1px solid var(--border);
  background-color:var(--card);
  color:var(--foreground);
  white-space:nowrap;
  transition:background-color 150ms, color 150ms, border-color 150ms;
}
.driver-popover-footer-btn:hover,.driver-popover-footer-btn:focus{background-color:var(--accent)}

/* The forward button is the one action we want people to reach for. */
.driver-popover-navigation-btns button:last-child{
  border-color:var(--primary);
  background-color:var(--primary);
  color:var(--primary-foreground);
  box-shadow:var(--shadow-btn);
}
.driver-popover-navigation-btns button:last-child:hover,
.driver-popover-navigation-btns button:last-child:focus{background-color:var(--primary-active)}
.driver-popover-navigation-btns button+button{margin-left:8px}

.driver-popover-arrow{border-color:var(--card)}
.driver-popover-arrow-side-left{border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}
.driver-popover-arrow-side-right{border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
.driver-popover-arrow-side-top{border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}
.driver-popover-arrow-side-bottom{border-top-color:transparent;border-left-color:transparent;border-right-color:transparent}

/* The keyboard hint and "don't show me these again" are about every step and
   every tour, not this one, so they take their own line under the navigation.
   On their own row rather than beside the buttons: both labels are sentences in
   every language, and squeezed into the one row they wrapped the progress text
   and both buttons onto two lines each. Ordered last, and the popover's only
   wrapping footer child. */
.driver-popover-footer .tour-footer-note{
  order:1;
  width:100%;
  margin:0;
  padding:10px 0 0;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.tour-footer-note .tour-keyboard-hint{
  margin:0;
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--muted-foreground);
}
.tour-footer-note .tour-keyboard-hint kbd{
  min-width:16px;
  padding:1px 4px;
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:4px;
  background:var(--accent);
  font-family:inherit;
  font-size:10.5px;
  line-height:1.3;
  text-align:center;
  color:var(--foreground);
}
.tour-footer-note .tour-dismiss{
  margin:0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  font-size:12px;
  line-height:1.4;
  text-align:left;
  color:var(--muted-foreground);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color 150ms;
}
.tour-footer-note .tour-dismiss:hover{color:var(--foreground)}