
.app-nav-help-wrap{ order:9; position:relative; margin-top:auto; margin-bottom:2px; flex-shrink:0; }
.app-nav-help-wrap ~ .app-nav-avatar-wrap{ margin-top:0; }
.app-nav-help-btn{
  position:relative; width:44px; height:44px; padding:0; border:none; border-radius:12px; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ui-muted); font-size:var(--text-2xl);
}
.app-nav-help-btn:hover, .app-nav-help-btn[aria-expanded="true"]{ background:var(--md-neutral-background-2-rest); color:var(--ui-text); }
.app-nav-help-ring{
  display:none; position:absolute; inset:5px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--ui-accent) calc(var(--onb-pct, 0) * 1%), var(--ui-border) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.app-nav-help-btn.has-progress .app-nav-help-ring{ display:block; }
.app-nav-help-wrap .split-menu.app-nav-help-menu{ top:auto; right:auto; bottom:0; left:calc(100% + 8px); min-width:190px; }
.app-nav-help-count{ margin-left:auto; padding-left:16px; font-size:var(--text-xs); color:var(--ui-muted); }

.onboarding-panel{
  position:fixed; z-index:var(--z-panel); width:320px; max-width:calc(100vw - 96px);
  background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border);
  border-radius:16px; box-shadow:var(--shadow-raised); font-family:var(--font-sans);
  overflow:hidden; animation:onboarding-in .2s cubic-bezier(.2,.8,.2,1);
}
.onboarding-panel[hidden]{ display:none; }
@keyframes onboarding-in{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.onboarding-head{ display:flex; align-items:center; gap:8px; padding:10px 8px 10px 14px; }
.onboarding-title-text{ font-size:var(--text-base); font-weight:var(--font-weight-semibold); }
.onboarding-count{ font-size:var(--text-xs); color:var(--ui-muted); margin-right:auto; }
.onboarding-head-btn{ width:24px; height:24px; flex-shrink:0; color:var(--ui-muted); font-size:var(--text-sm); }
.onboarding-head-btn:hover{ color:var(--ui-text); }
.onboarding-body{ border-top:1px solid var(--ui-border); max-height:min(60vh, 460px); overflow-y:auto; }
.onboarding-steps{ list-style:none; margin:0; padding:6px 0; }
.onboarding-step{ display:flex; gap:10px; padding:7px 14px; align-items:flex-start; }
.onboarding-check{
  width:15px; height:15px; border-radius:50%; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ui-border-strong); color:transparent; font-size:7px; box-sizing:border-box;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.onboarding-step.done .onboarding-check{ background:var(--ui-accent); border-color:var(--ui-accent); color:#fff; }
.onboarding-step-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.onboarding-step-label{ font-size:var(--text-md); font-weight:var(--font-weight-semibold); color:var(--ui-text); }
.onboarding-step.done .onboarding-step-label{ color:var(--ui-muted); text-decoration:line-through; font-weight:var(--font-weight-regular, 400); }
.onboarding-step-hint{ font-size:var(--text-sm); color:var(--ui-muted); line-height:1.4; }
.onboarding-step.done .onboarding-step-hint{ display:none; }
.onboarding-cta{
  align-self:flex-start; margin-top:4px; font-size:var(--text-sm); font-weight:var(--font-weight-semibold);
  color:var(--ui-accent); text-decoration:none;
}
.onboarding-cta:hover{ text-decoration:underline; }
.onboarding-done{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; margin:12px 14px 14px; padding:12px; border-radius:12px; background:var(--ui-surface-2); }
.onboarding-done-msg{ margin:0; font-size:var(--text-md); color:var(--ui-text); line-height:1.45; }
.onboarding-done-actions{ display:flex; gap:8px; }
.onboarding-done-actions .btn{ display:inline-flex; align-items:center; gap:6px; }
.onboarding-foot{ display:flex; align-items:center; justify-content:flex-end; padding:4px 10px 10px; }
.onboarding-dismiss{ color:var(--ui-muted); }
.onboarding-dismiss:hover{ color:var(--ui-text); }
.onboarding-panel.onboarding-celebrate .onboarding-done{ animation:onboarding-pop .5s ease; }
@keyframes onboarding-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.03); } 100%{ transform:scale(1); } }

.onboarding-dot{
  display:none; position:fixed; z-index:var(--z-hint); width:10px; height:10px; border-radius:50%; pointer-events:none;
  color:var(--md-color-pink-500); background:currentColor; box-shadow:0 0 0 2px var(--ui-surface);
}
.onboarding-dot.open{ display:block; }
.onboarding-dot::after{
  content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid currentColor;
  animation:onboarding-dot-pulse 1.6s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes onboarding-dot-pulse{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
body.tour-open .onboarding-panel, body.tour-open .onboarding-dot,
body.welcome-open .onboarding-panel, body.welcome-open .onboarding-dot{ display:none; }
@media (max-width: 900px){
  .app-nav-help-wrap, .onboarding-panel, .onboarding-dot{ display:none !important; }
  .app-nav-help-wrap ~ .app-nav-avatar-wrap{ margin-top:auto; }
}
