/* tradinghub.cc — onboarding tour (first-visit terminal walkthrough) */

.term-tour-spot{
  position:fixed; z-index:4998; pointer-events:none;
  border-radius:10px; border:1.5px solid var(--signal);
  box-shadow:0 0 0 9999px rgba(5,5,5,0.82), 0 0 0 1px rgba(255,200,87,0.15);
  opacity:0; transition:top .35s ease, left .35s ease, width .35s ease, height .35s ease, opacity .2s ease;
}
.term-tour-spot--on{ opacity:1; }

.term-tour-backdrop{
  position:fixed; inset:0; z-index:4997; pointer-events:none;
  background:rgba(5,5,5,0.82); opacity:0; transition:opacity .25s ease;
}
.term-tour-backdrop--on{ pointer-events:auto; }

.term-tour-card{
  position:fixed; left:50%; bottom:20px; z-index:5000;
  transform:translate(-50%,16px); width:min(420px, calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px 14px; box-shadow:0 12px 36px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .25s ease;
  font-family:var(--font-body);
}
.term-tour-card--on{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }

.term-tour-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.term-tour-card__progress{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mute);
}
.term-tour-card__skip{
  background:none; border:none; color:var(--mute); font-size:12.5px;
  cursor:pointer; padding:2px 4px; font-family:var(--font-body);
}
.term-tour-card__skip:hover{ color:var(--ink); }

.term-tour-card__title{
  font-family:var(--font-display); font-size:16px; font-weight:600;
  color:var(--ink); margin:0 0 6px;
}
.term-tour-card__body{
  font-size:13.5px; line-height:1.55; color:var(--mute); margin:0 0 12px;
}
.term-tour-card__body b{ color:var(--ink); font-weight:600; }

.term-tour-card__dots{ display:flex; gap:6px; margin-bottom:14px; }
.term-tour-dot{
  width:6px; height:6px; border-radius:50%; background:var(--line);
  transition:background .2s ease, transform .2s ease;
}
.term-tour-dot--active{ background:var(--signal); transform:scale(1.25); }

.term-tour-card__actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.term-tour-btn{
  font-family:var(--font-body); font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:6px; cursor:pointer; border:1px solid transparent;
}
.term-tour-btn--ghost{ background:none; border-color:var(--line); color:var(--ink); }
.term-tour-btn--ghost:hover{ background:var(--panel-hover); }
.term-tour-btn--primary{ background:var(--signal); color:#000000; }
.term-tour-btn--primary:hover{ filter:brightness(1.08); }

@media (max-width:700px){
  .term-tour-card{ bottom:0; left:0; transform:translateY(16px); width:100%; border-radius:12px 12px 0 0; padding:16px 16px 18px; }
  .term-tour-card--on{ transform:translateY(0); }
}

.term-tour-spot--light{ box-shadow:0 0 0 9999px rgba(20,22,26,0.55), 0 0 0 1px rgba(0,0,0,0.08); }
.term-tour-backdrop--light{ background:rgba(20,22,26,0.55); }