/* ════════════════════════════════════════════════════════════════════
         FIRST-TIME ONBOARDING — welcome modal + guided spotlight tour.
         ════════════════════════════════════════════════════════════════════ */
      .onb-overlay {
        position: fixed;
        inset: 0;
        z-index: 11000;
        background: rgba(10, 31, 68, .55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        transition: opacity .25s ease;
      }

      .onb-overlay.show {
        opacity: 1;
      }

      .onb-welcome {
        background: var(--bg2);
        border-radius: var(--r);
        box-shadow: var(--shadow-xl);
        max-width: 440px;
        width: 100%;
        padding: 30px 28px 24px;
        text-align: center;
        transform: translateY(10px) scale(.98);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
      }

      .onb-overlay.show .onb-welcome {
        transform: none;
      }

      .onb-welcome-ico {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        margin: 0 auto 16px;
        background: var(--grad-ink, var(--ac));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px rgba(29, 78, 216, .35);
      }

      .onb-welcome-ico svg {
        width: 30px;
        height: 30px;
      }

      .onb-welcome h2 {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 700;
        color: var(--tx);
        margin: 0 0 8px;
      }

      .onb-welcome p {
        color: var(--tx2);
        font-size: 14.5px;
        line-height: 1.6;
        margin: 0 0 22px;
      }

      .onb-welcome-btns {
        display: flex;
        gap: 10px;
        justify-content: center;
      }

      .onb-btn {
        appearance: none;
        border: 1.5px solid var(--bdr2);
        background: var(--bg2);
        color: var(--tx2);
        border-radius: 12px;
        padding: 11px 20px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: background .12s, transform .1s, box-shadow .12s;
        font-family: inherit;
      }

      .onb-btn:hover {
        background: var(--bg3);
      }

      .onb-btn.primary {
        border: none;
        color: #fff;
        background: var(--grad-ink, var(--ac));
        box-shadow: var(--shadow);
      }

      .onb-btn.primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
      }

      /* Spotlight tour */
      .onb-spot-mask {
        position: fixed;
        inset: 0;
        z-index: 11000;
        pointer-events: none;
      }

      .onb-spot-hole {
        position: absolute;
        border-radius: 14px;
        box-shadow: 0 0 0 9999px rgba(10, 31, 68, .58);
        transition: all .35s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
        border: 2px solid rgba(255, 255, 255, .85);
      }

      .onb-pop {
        position: fixed;
        z-index: 11001;
        max-width: 300px;
        background: var(--bg2);
        border-radius: 14px;
        box-shadow: var(--shadow-xl);
        padding: 16px 18px;
        transition: top .35s ease, left .35s ease, opacity .2s ease;
      }

      .onb-pop-step {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ac);
        margin-bottom: 5px;
      }

      .onb-pop-title {
        font-weight: 800;
        font-size: 15.5px;
        color: var(--tx);
        margin-bottom: 4px;
      }

      .onb-pop-body {
        font-size: 13px;
        line-height: 1.55;
        color: var(--tx2);
        margin-bottom: 14px;
      }

      .onb-pop-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .onb-dots {
        display: flex;
        gap: 5px;
      }

      .onb-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bdr2);
      }

      .onb-dot.on {
        background: var(--ac);
      }

      .onb-pop-btns {
        display: flex;
        gap: 7px;
      }

      .onb-mini {
        appearance: none;
        border: 1px solid var(--bdr2);
        background: var(--bg2);
        color: var(--tx2);
        border-radius: 9px;
        padding: 6px 12px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
      }

      .onb-mini.primary {
        border: none;
        color: #fff;
        background: var(--ac);
      }

      .onb-skip {
        position: fixed;
        z-index: 11002;
        top: 16px;
        right: 18px;
        background: rgba(255, 255, 255, .92);
        color: var(--tx2);
        border: 1px solid var(--bdr);
        border-radius: 99px;
        padding: 7px 14px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
      }

      body[data-theme="dark"] .onb-skip {
        background: rgba(14, 24, 48, .92);
      }