.onboarding-invite {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:16px;background:#eaf2fb;border:1px solid #c9daed;border-radius:12px;color:#183956}
.onboarding-invite[hidden] {display:none}
.onboarding-focus {position:fixed;z-index:1055;pointer-events:none;border:3px solid #397fbd;border-radius:12px;box-shadow:0 0 0 9999px rgba(13,32,52,.46)}
.onboarding-panel {box-sizing:border-box;position:fixed;z-index:1060;width:360px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:#20374e;border:1px solid #c9daed;border-radius:14px;padding:20px;box-shadow:0 12px 36px #132c4933}
.onboarding-panel h2 {color:inherit;font-size:1.1rem;font-weight:700;margin-bottom:10px}
.onboarding-panel p {font-size:.95rem}
.onboarding-panel .onboarding-counter {font-size:.8rem;color:#607a94;margin-bottom:8px}
.onboarding-controls {display:flex;align-items:center;justify-content:flex-end;gap:8px}
.onboarding-controls [data-skip] {margin-right:auto}
@media(max-width:600px) {.onboarding-invite {align-items:flex-start;flex-direction:column}.onboarding-panel {width:auto;max-width:none;padding:16px;max-height:45dvh}}
/* Self-contained controls also work in Django admin, which does not load Bootstrap. */
.onboarding-root .btn,.onboarding-panel .btn {display:inline-block;padding:8px 12px;border:1px solid #c9daed;border-radius:6px;background:#fff;color:#285d8d;font-size:14px;line-height:1.4;cursor:pointer}
.onboarding-root .btn-primary,.onboarding-panel .btn-primary {background:#285d8d;color:#fff;border-color:#285d8d}
.onboarding-panel button:disabled {opacity:.45;cursor:default}
.onboarding-panel [hidden],.onboarding-root [hidden] {display:none}
.onboarding-panel button:focus-visible {outline:3px solid #80b5e4;outline-offset:2px}
.onboarding-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.onboarding-heading > h1,.onboarding-heading > h2,.onboarding-heading > h3 {margin:0;min-width:0}
.onboarding-help-slot {display:inline-flex;align-items:center;flex:0 0 auto}
.onboarding-help-slot .onboarding-root {display:inline-flex;align-items:center;position:relative}
.onboarding-help-slot .onboarding-root[hidden] {display:none}
.onboarding-help-button {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid #cad9e8;border-radius:8px;background:#f5f8fc;color:#285d8d;font:500 14px/1.2 system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.onboarding-help-icon {display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border:1.5px solid currentColor;border-radius:50%;font-weight:700;font-size:13px}
.onboarding-help-button:hover {background:#e8f0f9;border-color:#8cafcf}
.onboarding-help-button:focus-visible {outline:3px solid #80b5e4;outline-offset:2px}
.onboarding-help-slot [data-tour-error] {position:absolute;right:0;top:100%;width:240px;padding:8px;background:#fff;border:1px solid #e4b4b4;border-radius:8px;z-index:1061;color:#a52834;font-size:13px}
.onboarding-help-slot .onboarding-invite {display:none}
.composition-header > .onboarding-help-slot {margin-left:auto;margin-right:8px}
@media(max-width:600px) {.onboarding-help-label {display:none}.onboarding-help-button {width:44px;height:44px;padding:0}.onboarding-heading {gap:8px}.onboarding-help-icon {width:21px;height:21px;font-size:14px}}