/* ============================================================
   Onboarding — first-run guided flow + account menu
   ============================================================ */
.onb-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: var(--ink-900);
  background-image:
    radial-gradient(80% 60% at 15% 0%, rgba(124, 77, 255, .35), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(255, 107, 157, .18), transparent 55%);
  display: grid; place-items: center; padding: 24px;
  animation: fadeIn .25s var(--ease);
  overflow-y: auto;
}
.onb-card {
  background: var(--surface); border-radius: 22px; width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
  animation: modalIn .35s var(--ease);
}
.onb-progress { height: 4px; background: var(--line); width: 100%; }
.onb-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet-500), var(--violet-400)); transition: width .4s var(--ease); border-radius: 0 4px 4px 0; }
.onb-body { padding: 34px 38px 30px; }
.onb-step-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-600); margin-bottom: 12px; }
.onb-card h2 { font-family: var(--font-display); font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.12; }
.onb-card p.onb-sub { color: var(--txt-500); font-size: 14.5px; margin-top: 10px; line-height: 1.5; }

.onb-logo { width: 60px; height: 60px; border-radius: 17px; background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 28px; box-shadow: var(--shadow-violet); margin-bottom: 22px; overflow: hidden; }
.onb-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.onb-fields { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
.onb-fields .field label { display: block; font-size: 12px; font-weight: 700; color: var(--txt-700); margin-bottom: 6px; }
.onb-fields .field input { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.onb-fields .field input:focus { border-color: var(--violet-400); box-shadow: 0 0 0 3px var(--violet-50); }

/* channel connect grid */
.onb-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 24px; }
.onb-chan {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 14px; cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s; text-align: left;
  background: var(--surface);
}
.onb-chan:hover { border-color: var(--violet-400); }
.onb-chan:disabled { opacity: .78; background: var(--surface-2); }
.onb-chan.connected { border-color: var(--violet-400); background: var(--violet-50); box-shadow: 0 0 0 3px var(--violet-50); }
.onb-chan .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.onb-chan .ic svg { width: 20px; height: 20px; }
.onb-chan .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.onb-chan .nm { font-weight: 700; font-size: 14px; }
.onb-chan .st { font-size: 11.5px; font-weight: 700; color: var(--txt-300); }
.onb-chan.connected .st { color: var(--mint); }
.onb-chan .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: 0 0 auto; transition: all .18s; color: transparent; }
.onb-chan.connected .tick { background: var(--violet-500); border-color: var(--violet-500); color: #fff; }
.onb-chan .tick svg { width: 13px; height: 13px; }

/* option pills (goal / tone) */
.onb-opts { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.onb-opt {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 13px; cursor: pointer;
  transition: border-color .18s, background .18s; text-align: left; background: var(--surface);
}
.onb-opt:hover { border-color: var(--violet-400); }
.onb-opt.sel { border-color: var(--violet-500); background: var(--violet-50); box-shadow: 0 0 0 3px var(--violet-50); }
.onb-opt .emoji { font-size: 22px; flex: 0 0 auto; }
.onb-opt .meta { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.onb-opt .nm { font-weight: 700; font-size: 14px; }
.onb-opt .ds { font-size: 12px; color: var(--txt-500); margin-top: 1px; }
.onb-opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; transition: all .18s; position: relative; }
.onb-opt.sel .radio { border-color: var(--violet-500); }
.onb-opt.sel .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--violet-500); }

.onb-tone-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 22px; }
.onb-tone { padding: 16px 12px; border: 1.5px solid var(--line-strong); border-radius: 13px; cursor: pointer; text-align: center; transition: all .18s; background: var(--surface); }
.onb-tone:hover { border-color: var(--violet-400); }
.onb-tone.sel { border-color: var(--violet-500); background: var(--violet-50); box-shadow: 0 0 0 3px var(--violet-50); }
.onb-tone .emoji { font-size: 26px; }
.onb-tone .nm { font-weight: 700; font-size: 13.5px; margin-top: 8px; }
.onb-tone .ds { font-size: 11px; color: var(--txt-500); margin-top: 2px; }

/* finish summary */
.onb-summary { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.onb-sum-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.onb-sum-row .k { color: var(--txt-500); font-weight: 600; }
.onb-sum-row .v { font-weight: 700; margin-left: auto; }
.onb-sum-row svg { width: 17px; height: 17px; color: var(--mint); flex: 0 0 auto; }

.onb-foot { display: flex; align-items: center; gap: 12px; padding: 18px 38px 26px; }
.onb-foot .spacer { flex: 1; }
.onb-skip { font-size: 13px; font-weight: 700; color: var(--txt-500); padding: 9px 6px; }
.onb-skip:hover { color: var(--txt-900); }
.onb-dots { display: flex; gap: 7px; }
.onb-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: all .25s; }
.onb-dots span.on { background: var(--violet-500); width: 22px; border-radius: 99px; }

.onb-confetti { font-size: 46px; text-align: center; margin-bottom: 6px; animation: pop .4s var(--ease); }

/* ---- account menu (rail avatar) ---- */
.acct-menu {
  position: fixed; z-index: 300; min-width: 232px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; animation: pop .14s var(--ease);
}
.acct-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-head .avatar { background: linear-gradient(135deg, #ffb86b, #ff6b9d); }
.acct-head .nm { font-weight: 700; font-size: 13.5px; }
.acct-head .em { font-size: 11.5px; color: var(--txt-500); }
.acct-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--txt-700); transition: background .12s; }
.acct-item:hover { background: var(--surface-2); }
.acct-item svg { width: 17px; height: 17px; color: var(--txt-500); flex: 0 0 auto; }
.acct-item.accent { color: var(--violet-600); }
.acct-item.accent svg { color: var(--violet-600); }

@media (max-width: 560px) {
  .onb-body { padding: 26px 22px 22px; }
  .onb-foot { padding: 16px 22px 22px; }
  .onb-channels { grid-template-columns: 1fr; }
  .onb-tone-row { grid-template-columns: 1fr; }
  .onb-card h2 { font-size: 23px; }
}