/* onboarding.css: the /get-started flow (production-owned pages, not Lovable).
   The look of /login and /setup: the guru mark drifting over soft brand light, a glass card.
   The flow's behaviour is js/onboarding-page.js, bound by element id, and main-compat.css
   styles the parts it shares with the rest of the site (code boxes, build progress tiles,
   .btn, .success-message, .working-spinner). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-var.woff2) format('woff2')}
:root{
  --ink:#14112b;--muted-ink:#5d5a78;--line-soft:rgba(76,58,160,.14);--brand:#7c3aed;--brand-2:#4f46e5;--canvas:#f7f6fc;
  --marks:#2e1065;--marks-2:#1e1b4b;
  /* Lovable's tokens, as HSL channels: main-compat.css reads them as hsl(var(--x)). */
  --background:0 0% 100%;--foreground:260 20% 14%;--primary:265 45% 50%;--primary-foreground:0 0% 100%;
  --muted:260 20% 96%;--muted-foreground:260 10% 40%;--border:260 13% 91%;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--canvas);
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}

/* Canvas. The corner glows stay faint: the wordmark and card sit over them. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(120px)}
.bg::before{width:1100px;height:1100px;left:-360px;top:-420px;background:radial-gradient(circle,color-mix(in srgb,var(--marks) 12%,transparent),color-mix(in srgb,var(--marks) 5%,transparent) 40%,transparent 78%)}
.bg::after{width:1200px;height:1200px;right:-420px;bottom:-480px;background:radial-gradient(circle,color-mix(in srgb,var(--marks-2) 10%,transparent),rgba(14,165,233,.04) 42%,transparent 78%)}
.marks{position:absolute;inset:-25%;background:var(--marks);
  -webkit-mask-image:url(/assets/login-pattern.svg?v=9024e9c3);mask-image:url(/assets/login-pattern.svg?v=9024e9c3);
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
.marks.near{opacity:.075;-webkit-mask-size:300px;mask-size:300px;animation:drift 120s linear infinite}
.marks.far{opacity:.045;background:var(--marks-2);-webkit-mask-size:560px;mask-size:560px;-webkit-mask-position:180px 120px;mask-position:180px 120px;transform:rotate(8deg);animation:drift 180s linear infinite reverse}
@keyframes drift{from{translate:0 0}to{translate:-300px -150px}}
@media (prefers-reduced-motion:reduce){.marks{animation:none}}

/* Shell */
.ob-top,.ob-main,.ob-foot{position:relative;z-index:1}
/* The brand floats over the canvas so the card centres in the whole viewport, not below it. */
.ob-top{position:absolute;top:0;left:0;padding:20px 24px}
.ob-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:700;font-size:18px;letter-spacing:.015em}
.ob-brand img{width:30px;height:30px}
/* The wordmark's AI in the brand color, as in the console. */
.ob-brand b{color:var(--brand);font-weight:inherit}
.ob-main{flex:1;display:flex;align-items:center;justify-content:center;padding:72px 16px 12px}
.ob-card{width:100%;max-width:560px;padding:26px 34px 24px;border-radius:22px;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px var(--line-soft),0 24px 60px -18px rgba(49,32,120,.28),0 6px 18px -8px rgba(49,32,120,.14)}
.ob-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;padding:10px 16px 16px;color:var(--muted-ink);font-size:12px}
.ob-foot a{color:var(--muted-ink);text-decoration:none}
.ob-foot a:hover{text-decoration:underline}

/* Steps: completed steps are links back; nothing links forward. */
.ob-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px;padding:0;list-style:none;font-size:12px;color:var(--muted-ink)}
.ob-steps li{display:inline-flex;align-items:center;gap:8px}
.ob-steps li+li::before{content:"";width:12px;height:1px;background:#dcd9ec;margin-right:2px}
.ob-steps i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:600;background:#e9e6f3;color:var(--muted-ink)}
.ob-steps .on{color:var(--ink);font-weight:600}
.ob-steps .on i,.ob-steps .done i{background:var(--brand);color:#fff}
.ob-steps a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.ob-steps a:hover span{text-decoration:underline}

/* Type */
.ob-card h1,.ob-card h2{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:0 0 10px;font-weight:700}
.ob-card h3{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-size:17px;line-height:1.3;margin:0 0 8px;font-weight:700}
.ob-card h4{font-size:14px;margin:0 0 6px;font-weight:700}
.ob-lede{color:var(--muted-ink);font-size:15px;line-height:1.55;margin:0 0 18px}
.ob-card p{line-height:1.55}
.ob-card strong{color:var(--ink)}
.ob-hint{color:var(--muted-ink);font-size:12px;margin:5px 0 0}
.ob-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Fields */
.ob-field{margin:0 0 14px}
.ob-card label.ob-label{display:block;font-size:13px;font-weight:600;color:#2d2950;margin:0 0 7px}
.ob-input,.ob-card textarea{width:100%;padding:0 14px;border:1px solid #dcd9ec;border-radius:12px;background:rgba(255,255,255,.92);
  font:inherit;font-size:15px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.ob-input{height:44px}
.ob-card textarea{padding:12px 14px;line-height:1.5;resize:vertical}
.ob-input::placeholder,.ob-card textarea::placeholder{color:#a3a0bb}
.ob-input:focus,.ob-card textarea:focus,.ob-prefixed:focus-within{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,58,237,.14)}
.ob-prefixed{display:flex;align-items:center;height:46px;border:1px solid #dcd9ec;border-radius:12px;background:rgba(255,255,255,.92)}
.ob-prefixed span{padding:0 2px 0 14px;color:var(--muted-ink);font-size:14px;white-space:nowrap}
.ob-prefixed input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:0 14px 0 0}
.ob-prefixed input:focus{outline:none}

/* Buttons */
.ob-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(91,53,230,.7),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .12s,box-shadow .12s,filter .12s}
.ob-btn:hover{filter:brightness(1.06)}
.ob-btn:active{transform:translateY(1px)}
.ob-btn:disabled{opacity:.75;cursor:default}
.ob-btn.wide{width:100%}
.ob-btn.outline{background:#fff;color:var(--brand);border:1px solid #d9d2f3;box-shadow:none}
.ob-btn.outline:hover{background:#f6f3ff;filter:none}
.ob-link{background:none;border:0;padding:0;color:var(--brand);cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.ob-link:hover{text-decoration:underline}
.ob-quiet{color:var(--muted-ink);font-size:13px;text-decoration:none}
.ob-quiet:hover{text-decoration:underline}
.ob-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:14px}
.ob-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;color:var(--muted-ink);font-size:12px}
.ob-trust svg{flex:none}

/* Panels (ownership options) */
.ob-panel{margin-top:16px;padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.9);border:1px solid #e6e3f0}
.ob-panel p{color:var(--muted-ink);font-size:14px;margin:0 0 12px}
.ob-panel summary{font-size:14px;font-weight:600;cursor:pointer}
.ob-panel[open] summary{margin-bottom:12px}
.ob-token{margin:6px 0 0;color:var(--brand);font-size:14px;word-break:break-all}
.ob-snippet{margin:0 0 12px;padding:12px;overflow-x:auto;border-radius:12px;border:1px solid #e6e3f0;background:#faf9fe;font-size:12px}
.ob-stack{display:flex;flex-direction:column;gap:12px}
.ob-split{display:flex;flex-direction:column;gap:22px}

/* Notices the script reveals (#ob-notice, #ob-own-notice) */
.ob-notice{margin:18px 0 0;font-size:14px}

/* Build progress header (the tiles, bar and logs below it are main-compat.css) */
.ob-build-head{margin:-6px -8px 0;padding:22px 20px 18px;border-radius:16px;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.ob-build-head .icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 12px;border-radius:16px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2)}
.ob-build-head .icon img{width:32px;height:32px;filter:brightness(0) invert(1)}
.ob-build-head h2{color:#fff;font-size:20px;margin:0}
.ob-build-head p{margin:4px 0 0;color:rgba(255,255,255,.75);font-size:14px}
.ob-build-body{padding:20px 4px 0}

/* Utility names js/onboarding-page.js writes into its result messages. */
.mt-3{margin-top:12px}.mt-5{margin-top:20px}.text-sm{font-size:14px}.text-muted-foreground{color:var(--muted-ink)}.text-destructive{color:#dc2626}

@media(max-width:520px){.ob-card{padding:22px 20px 20px;border-radius:18px}.ob-card h1,.ob-card h2{font-size:24px}.ob-top{padding:16px}.ob-main{padding-top:64px}}