/* Обучение новых пользователей: подсветка и карточка-подсказка */

.site-header .header-help-btn {
  cursor: pointer;
  padding: 0;
}
.header-help-btn.is-active {
  background: rgba(248, 181, 0, 0.28);
  border-color: var(--color-accent, #f8b500);
}
.header-help-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent, #f8b500);
  pointer-events: none;
}

.ob-root {
  position: fixed;
  inset: 0;
  z-index: 10050;
  font-family: var(--font-sans);
}
.ob-root[hidden] { display: none !important; }

.ob-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: auto;
}
html[data-theme="dark"] .ob-overlay {
  background: rgba(2, 6, 23, 0.72);
}

.ob-spot {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  border-radius: 12px;
  outline: 2px solid var(--color-accent, #f8b500);
  outline-offset: 3px;
  pointer-events: none;
  transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}
html[data-theme="dark"] .ob-spot {
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.72);
}

.ob-card {
  position: absolute;
  z-index: 1;
  width: min(360px, calc(100vw - 24px));
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a1a1a);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 14px;
  padding: 16px 16px 14px;
  pointer-events: auto;
}
html[data-theme="dark"] .ob-card {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #1e293b;
}

.ob-card-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-light, #2a5298);
}
html[data-theme="dark"] .ob-card-kicker { color: var(--color-accent, #f8b500); }

.ob-card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary, #1e3c72);
  line-height: 1.3;
}
html[data-theme="dark"] .ob-card-title { color: #f8fafc; }

.ob-card-text {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-muted, #555);
}
html[data-theme="dark"] .ob-card-text { color: #cbd5e1; }

.ob-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  margin: 0 0 12px;
  overflow: hidden;
}
.ob-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-primary-light, #2a5298);
  transition: width .2s ease;
}

.ob-card-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ob-card-nav .ob-btn-ghost { margin-right: auto; }
.ob-card-count {
  margin-right: auto;
  font-size: 0.8rem;
  color: var(--color-text-muted, #777);
}
.ob-btn {
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ob-btn-ghost {
  background: transparent;
  color: var(--color-text-muted, #666);
}
.ob-btn-ghost:hover { text-decoration: underline; }
.ob-btn-next {
  background: var(--color-primary, #1e3c72);
  color: #fff;
}
.ob-btn-next:hover { background: var(--color-primary-light, #2a5298); }
.ob-btn-skip {
  background: transparent;
  color: var(--color-text-muted, #777);
  margin-left: 0;
  padding-left: 0;
}

.ob-welcome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 576px) {
  .ob-card {
    left: 12px !important;
    right: 12px;
    width: auto;
  }
  .ob-welcome {
    left: 12px;
    right: 12px;
    transform: translateY(-50%);
    width: auto;
  }
}