.onb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: onb-fade-in 0.25s ease;
}

.onb-card {
  position: relative;
  background: var(--surface-color);
  border-radius: 24px;
  padding: 28px 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.onb-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--secondary-color);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.onb-title {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
  text-align: center;
}

.onb-items {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onb-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.onb-item-icon {
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 1px;
}

.onb-item-text {
  font-size: 0.85rem;
  color: var(--text-color);
  line-height: 1.4;
}

.onb-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.onb-empty-hint {
  color: var(--secondary-color);
  font-size: 0.75rem;
  text-align: center;
  padding: 8px 0;
  margin: 0;
}

/* ─── Tips page ─────────────────────────────────────────────────────────── */

.onb-tip-card {
  background: var(--surface-color);
  border: 1px solid var(--soft-border-color);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
}

.onb-tip-title {
  margin: 0 0 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-color);
}

.onb-tip-card .onb-items {
  margin-bottom: 16px;
}

.onb-tip-replay-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: none;
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Inline demo (Tips page) ────────────────────────────────────────────── */

/* Wrapper — shown above the card title, always visible, auto-playing */
.onb-demo-inline {
  background: var(--input-bg-color);
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Fixed-height stage: task button and timer circle are absolute-centered here */
.onb-demo-stage {
  position: relative;
  width: 100%;
  height: 96px;
}

/* Mock task button — styled to resemble real quick-task buttons */
.onb-demo-task {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  border-radius: 1rem;
  padding: 12px 20px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  animation: onb-task-anim 9s infinite both;
}

/* Colored dot mimicking the task category indicator */
.onb-demo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

/* Timer circle — centered in stage, fades in after the first press */
.onb-demo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  background: var(--surface-color);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: onb-circle-anim 9s infinite both;
}

.onb-demo-time {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
}

/* Touch dot — centered on stage, appears for hold and second tap */
.onb-demo-finger {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  animation: onb-finger-anim 9s infinite both;
}

/* Expanding ring — centered on stage, appears during hold only */
.onb-demo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  animation: onb-ring-anim 9s infinite both;
}

/* Saved badge — replaces the circle after the second tap */
.onb-demo-saved-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
  pointer-events: none;
  animation: onb-saved-anim 9s infinite both;
}

/* Captions — fixed height, three crossfading lines */
.onb-demo-captions {
  position: relative;
  width: 100%;
  height: 18px;
  text-align: center;
}

.onb-demo-cap {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 0.74rem;
  color: var(--secondary-color);
  line-height: 1.3;
  opacity: 0;
}

/* ─── Keyframes (9-second loop) ──────────────────────────────────────────── */
/*
  Timeline:
    0s   – 1.5s  (0%  – 17%) : task button idle
    1.5s – 3s    (17% – 33%) : hold — finger appears, ring expands
    3s   – 4s    (33% – 44%) : transition button → circle
    4s   – 6s    (44% – 67%) : timer circle visible, subtle pulse
    6s   – 6.5s  (67% – 72%) : second tap on circle
    6.5s – 7.5s  (72% – 83%) : saved badge
    7.5s – 9s    (83% – 100%): task button returns, loop
*/

@keyframes onb-task-anim {
  0%, 15%    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  20%        { opacity: 1; transform: translate(-50%, -50%) scale(0.91); }
  32%        { opacity: 1; transform: translate(-50%, -50%) scale(0.91); }
  38%        { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  44%, 91%   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  97%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%       { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes onb-circle-anim {
  0%, 36%    { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  44%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  52%        { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  60%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  67%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%        { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100%       { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes onb-finger-anim {
  0%, 15%    { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  19%        { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  31%        { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  36%        { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
  66%, 68%   { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
  70%        { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  73%        { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
  100%       { opacity: 0;   transform: translate(-50%, -50%) scale(0); }
}

@keyframes onb-ring-anim {
  0%, 17%    { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  21%        { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  37%        { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
  100%       { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@keyframes onb-saved-anim {
  0%, 71%    { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  76%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%        { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  91%        { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100%       { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes onb-cap1 {
  0%, 30%    { opacity: 1; }
  37%        { opacity: 0; }
  93%        { opacity: 0; }
  98%        { opacity: 1; }
  100%       { opacity: 1; }
}

@keyframes onb-cap2 {
  0%, 37%    { opacity: 0; }
  44%        { opacity: 1; }
  63%        { opacity: 1; }
  69%        { opacity: 0; }
  100%       { opacity: 0; }
}

@keyframes onb-cap3 {
  0%, 67%    { opacity: 0; }
  73%        { opacity: 1; }
  85%        { opacity: 1; }
  91%        { opacity: 0; }
  100%       { opacity: 0; }
}

.onb-demo-cap-1 { animation: onb-cap1 9s infinite both; opacity: 1; }
.onb-demo-cap-2 { animation: onb-cap2 9s infinite both; opacity: 0; }
.onb-demo-cap-3 { animation: onb-cap3 9s infinite both; opacity: 0; }

/* ─── Animation ──────────────────────────────────────────────────────────── */

@keyframes onb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}