.newcomer-card { display:flex; align-items:center; gap:12px; padding:12px 15px; margin:18px 0 4px; border-radius:16px; background:var(--ui-surface-soft); }
.newcomer-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--ui-surface); color:var(--ui-accent); }
#newcomer-open { flex:1; min-width:0; padding:2px 0; text-align:left; background:none; border:0; }
#newcomer-open strong { display:block; font-size:13px; font-weight:600; }
#newcomer-open small { display:block; font-size:11px; color:var(--ui-muted); margin-top:2px; }
#newcomer-dismiss { border:0; background:none; width:36px; height:36px; flex-basis:36px; padding:8px; }
.onboarding-dialog { width:min(520px,calc(100% - 24px)); }
.onboarding-dialog>.dialog-heading { margin:0; padding:20px 22px 14px; }
.onboarding-dialog .dialog-heading h2 { margin-top:4px; font:600 22px/1.4 var(--ui-font); }
.intro-progress { display:flex; gap:6px; padding:0 22px 14px; border-bottom:1px solid var(--ui-line); flex:none; }
.intro-progress button { flex:1; min-width:0; display:flex; gap:5px; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ui-muted); padding:6px 2px; min-height:36px; border-radius:10px; font-size:11px; }
.intro-progress button span { display:grid; place-items:center; width:18px; height:18px; border:1px solid var(--ui-line); border-radius:50%; font-size:10px; }
.intro-progress button[aria-current=step] { background:var(--ui-surface-soft); color:var(--ui-accent); font-weight:600; }
.intro-progress button[aria-current=step] span { background:var(--ui-accent); color:var(--ui-on-accent,#fff); border-color:var(--ui-accent); }
.onboarding-dialog .intro-content { padding:20px 22px; min-height:0; }
.intro-kicker { color:var(--ui-accent); font-size:10px; font-weight:600; letter-spacing:.6px; }
.intro-lead h3 { font:600 20px/1.45 var(--ui-font); margin:7px 0; }
.intro-lead p { font-size:13px; line-height:1.7; color:var(--ui-muted); margin:0 0 16px; }
.intro-kind-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.intro-kind-choice button,.intro-mode-choice button { min-width:0; text-align:left; border:1px solid var(--ui-line); border-radius:15px; background:var(--ui-surface); padding:13px; }
.intro-kind-choice strong,.intro-mode-choice strong { display:block; font-size:14px; font-weight:600; }
.intro-kind-choice small,.intro-mode-choice small { display:block; color:var(--ui-muted); font-size:10px; line-height:1.6; margin-top:5px; }
.intro-kind-choice [aria-pressed=true],.intro-mode-choice [aria-pressed=true] { border-color:var(--ui-accent); background:var(--ui-surface-soft); box-shadow:inset 0 0 0 .5px var(--ui-accent); }
.intro-showcase { display:flex; align-items:center; gap:18px; padding:20px 0 0; }
.intro-board { width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 6px 14px #173b3210; }
.intro-showcase>.intro-board { width:43%; flex:none; transform:rotate(-4deg); }
.intro-showcase strong { font-size:14px; }
.intro-showcase p { font-size:12px; line-height:1.75; color:var(--ui-muted); }
.intro-mode-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.intro-mode-choice .ui-icon { display:block; width:24px; height:24px; margin-bottom:10px; }
.intro-hint { color:var(--ui-muted); font-size:11px; line-height:1.75; margin:15px 0 0; }
.intro-flow { padding:0; margin:16px 0; list-style:none; }
.intro-flow li { display:flex; align-items:flex-start; gap:12px; margin:18px 0; }
.intro-flow li>span { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:10px; background:var(--ui-surface-soft); color:var(--ui-accent); font-size:13px; }
.intro-flow strong { font-size:14px; }
.intro-flow p { color:var(--ui-muted); font-size:12px; line-height:1.7; margin:4px 0 0; }
.intro-tip { display:flex; gap:10px; padding:12px; border-radius:12px; background:var(--ui-surface-soft); align-items:flex-start; }
.intro-tip p { margin:0; font-size:11px; color:var(--ui-muted); line-height:1.7; }
.intro-tip .ui-icon { flex:none; margin-top:2px; }
.intro-move-demo { display:flex; align-items:center; gap:18px; }
#intro-demo-select { width:45%; padding:0; border:0; border-radius:18px; background:none; flex:none; }
.intro-move-demo>div { min-width:0; }
.intro-demo-label { color:var(--ui-muted); font-size:10px; }
#intro-demo-status { display:block; font-size:13px; margin:7px 0 12px; }
#intro-demo-confirm { min-height:40px; font-size:12px; padding:8px; gap:5px; }
.intro-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 22px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--ui-line); flex:none; }
#intro-prev { justify-self:start; font-size:12px; }
#intro-counter { font-size:11px; color:var(--ui-muted); font-variant-numeric:tabular-nums; }
#intro-next { min-height:44px; padding:9px 12px; font-size:12px; gap:6px; justify-self:end; }
@media(max-width:360px) { .onboarding-dialog>.dialog-heading,.onboarding-dialog .intro-content { padding-left:18px; padding-right:18px; }.intro-progress { padding-left:18px; padding-right:18px; }.intro-progress button { gap:3px; font-size:10px; }.intro-lead h3 { font-size:18px; }.intro-showcase { gap:12px; }.intro-kind-choice button,.intro-mode-choice button { padding:11px; }.intro-footer { padding-left:18px; padding-right:18px; } }
@media(max-height:560px) { .onboarding-dialog>.dialog-heading { padding-top:12px; padding-bottom:8px; }.onboarding-dialog .eyebrow { display:none; }.intro-progress { padding-bottom:8px; }.onboarding-dialog .intro-content { padding-top:12px; padding-bottom:12px; }.intro-footer { padding-top:8px; padding-bottom:8px; } }
@media(max-height:560px) {
  .intro-lead h3 { margin:4px 0; }
  .intro-lead p { margin-bottom:10px; font-size:12px; line-height:1.6; }
  .intro-mode-choice { gap:7px; }
  .intro-mode-choice button { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:3px 7px; min-height:64px; padding:8px; }
  .intro-mode-choice .ui-icon { grid-row:1 / 3; width:20px; height:20px; margin:0; }
  .intro-mode-choice strong { font-size:12px; }
  .intro-mode-choice small { font-size:9px; margin:0; grid-column:2; }
  .intro-hint { margin-top:9px; font-size:10px; line-height:1.6; }
}