/* Coincidence AI Onboarding — v1.0.0 */

:root {
  --co-primary: var(--primary, hsl(74, 100%, 41%));
  --co-primary-fg: var(--primary-fg, #000);
  --co-bg: var(--bg, var(--background, #f5f5f5));
  --co-fg: var(--fg, var(--foreground, #09090b));
  --co-card: var(--card, #fff);
  --co-border: var(--border, #d4d4d8);
  --co-muted-fg: var(--muted-fg, var(--muted-foreground, #6b6b73));
  --co-accent: var(--accent, #e8e8eb);
  --co-radius: var(--radius, 6px);
}

.co-bk { position:fixed; inset:0; z-index:9990; background:rgba(0,0,0,.6); opacity:0; transition:opacity .35s; pointer-events:none; }
.co-bk.on { opacity:1; pointer-events:all; }

.co-sp { position:fixed; z-index:9991; border-radius:8px; box-shadow:0 0 0 9999px rgba(0,0,0,.6); transition:all .35s cubic-bezier(.4,0,.2,1); pointer-events:none; display:none; }
.co-sp::after { content:''; position:absolute; inset:-3px; border:2px solid var(--co-primary); border-radius:10px; animation:co-pulse 2s ease-in-out infinite; }

.co-tip { position:fixed; z-index:9995; background:var(--co-card); border:1px solid var(--co-border); border-radius:12px; padding:20px; width:360px; box-shadow:0 8px 30px rgba(0,0,0,.12); opacity:0; transform:translateY(8px) scale(.98); transition:all .3s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.co-tip.on { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.co-tip .co-step { font-size:10px; font-weight:700; color:var(--co-primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.co-tip h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.co-tip p { font-size:13px; color:var(--co-muted-fg); line-height:1.6; }
.co-tip .co-acts { display:flex; gap:8px; margin-top:16px; }

.co-arr { position:absolute; width:12px; height:12px; background:var(--co-card); border:1px solid var(--co-border); transform:rotate(45deg); z-index:-1; }
.co-arr.t { border-bottom:none; border-right:none; }
.co-arr.b { border-top:none; border-left:none; }
.co-arr.l { border-top:none; border-right:none; }
.co-arr.r { border-bottom:none; border-left:none; }

.co-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:var(--co-radius); font-weight:600; font-size:13px; cursor:pointer; border:none; font-family:inherit; transition:all .15s; }
.co-btn-primary { background:var(--co-primary); color:var(--co-primary-fg); }
.co-btn-primary:hover { opacity:.9; }
.co-btn-secondary { background:var(--co-card); color:var(--co-fg); border:1px solid var(--co-border); }
.co-btn-secondary:hover { background:var(--co-accent); }
.co-btn-ghost { background:none; border:none; color:var(--co-muted-fg); font-size:12px; cursor:pointer; font-family:inherit; }
.co-btn-ghost:hover { color:var(--co-fg); }

.co-mo { position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s; }
.co-mo.on { opacity:1; pointer-events:all; }
.co-md { background:var(--co-card); border:1px solid var(--co-border); border-radius:16px; padding:28px 32px; max-width:480px; width:92%; transform:translateY(16px) scale(.97); transition:transform .3s cubic-bezier(.4,0,.2,1); max-height:90vh; overflow-y:auto; }
.co-mo.on .co-md { transform:translateY(0) scale(1); }

.co-dots { display:flex; gap:6px; margin-bottom:20px; }
.co-dt { width:8px; height:8px; border-radius:50%; background:var(--co-border); transition:all .3s; }
.co-dt.on { background:var(--co-primary); width:24px; border-radius:4px; }
.co-dt.dn { background:var(--co-primary); opacity:.4; }
.co-md .co-step { display:inline-block; font-size:10px; font-weight:700; color:var(--co-primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.co-md h2 { font-size:20px; font-weight:700; margin-bottom:6px; }
.co-md .co-desc { font-size:13px; color:var(--co-muted-fg); margin-bottom:20px; line-height:1.6; }
.co-md .co-acts { display:flex; gap:8px; margin-top:20px; align-items:center; }

.co-opts { display:grid; gap:10px; }
.co-opts.c3 { grid-template-columns:1fr 1fr 1fr; }
.co-opts.c2 { grid-template-columns:1fr 1fr; }
.co-op { background:var(--co-bg); border:2px solid var(--co-border); border-radius:10px; padding:14px; cursor:pointer; transition:all .2s; text-align:center; }
.co-op:hover { border-color:hsl(74,60%,60%); }
.co-op.sel { border-color:var(--co-primary); background:hsla(74,100%,41%,.06); }
.co-op .co-oi { margin-bottom:6px; display:flex; justify-content:center; }
.co-op .co-oi svg { width:28px; height:28px; stroke:var(--co-muted-fg); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.co-op.sel .co-oi svg { stroke:var(--co-primary); }
.co-op .co-ot { font-size:13px; font-weight:600; }
.co-op .co-od { font-size:11px; color:var(--co-muted-fg); margin-top:2px; }

.co-fld { margin-bottom:12px; }
.co-fld label { display:block; font-size:12px; font-weight:500; color:var(--co-muted-fg); margin-bottom:4px; }
.co-fld input { width:100%; height:36px; padding:0 10px; background:var(--co-bg); border:1px solid var(--co-border); border-radius:var(--co-radius); font-size:13px; color:var(--co-fg); outline:none; font-family:inherit; }
.co-fld input:focus { border-color:var(--co-primary); }
.co-fld input::placeholder { color:hsl(240,4%,65%); }

.co-exg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.co-ex { display:flex; align-items:center; gap:10px; background:var(--co-bg); border:2px solid var(--co-border); border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .2s; }
.co-ex:hover { border-color:hsl(74,60%,60%); }
.co-ex.sel { border-color:var(--co-primary); background:hsla(74,100%,41%,.06); }
.co-exi { width:28px; height:28px; border-radius:50%; background:var(--co-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
.co-exn { font-size:13px; font-weight:600; }

.co-vid { position:relative; width:100%; padding-bottom:56.25%; border-radius:10px; overflow:hidden; background:#000; margin-bottom:12px; }
.co-vid iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

.co-cel { text-align:center; }
.co-cel .co-pnl { font-size:44px; font-weight:800; color:var(--co-primary); margin:12px 0 4px; line-height:1; }
.co-cel .co-pl { font-size:13px; color:var(--co-muted-fg); margin-bottom:20px; }
.co-cel .co-sts { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:20px; }
.co-cel .co-st { background:var(--co-bg); border-radius:10px; padding:12px; border:1px solid var(--co-border); }
.co-cel .co-sv { font-size:18px; font-weight:700; }
.co-cel .co-sl { font-size:11px; color:var(--co-muted-fg); margin-top:2px; }
.co-cel .co-acts { justify-content:center; }

.co-pop { position:fixed; bottom:20px; right:20px; z-index:9998; background:var(--co-card); border:1px solid var(--co-border); border-radius:16px; padding:24px; width:380px; box-shadow:0 12px 40px rgba(0,0,0,.15); transform:translateY(120%) scale(.95); transition:transform .4s cubic-bezier(.16,1,.3,1); visibility:hidden; }
.co-pop.on { transform:translateY(0) scale(1); visibility:visible; }
.co-pop .co-cls { position:absolute; top:12px; right:14px; background:none; border:none; color:var(--co-muted-fg); cursor:pointer; font-size:18px; }
.co-pop h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.co-pop p { font-size:13px; color:var(--co-muted-fg); line-height:1.5; }
.co-pop .co-acts { display:flex; gap:8px; margin-top:16px; }
.co-pop .co-hn { color:var(--co-primary); font-weight:800; font-size:22px; }
.co-pop .co-fl { margin:12px 0; padding:12px; background:var(--co-bg); border-radius:10px; border:1px solid var(--co-border); font-size:13px; line-height:2; }
.co-pop .co-sec { font-size:11px; color:var(--co-muted-fg); margin-top:12px; display:flex; align-items:center; gap:4px; }

.co-cf { position:fixed; z-index:10010; pointer-events:none; animation:co-fall linear forwards; }

@keyframes co-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes co-fall { 0%{opacity:1;transform:translateY(0) rotate(0) scale(1)} 80%{opacity:1} 100%{opacity:0;transform:translateY(100vh) rotate(720deg) scale(.5)} }