/* =========================================================
   onboard.css — first-run guided flow + footer + auth gate
   Reuses the core design tokens from styles.css.
   ========================================================= */

.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(77,141,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 8% 8%, rgba(52,225,213,0.10), transparent 55%),
    var(--bg-0);
  overflow-y: auto;
  animation: fade .25s;
}
.ob-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  animation: modalIn .35s cubic-bezier(.2,.8,.2,1);
  position: relative;
  margin: auto;
}

.ob-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.ob-head .mark {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 22px -8px var(--acc-glow);
  overflow: hidden;
}
.ob-head .mark svg { width: 18px; height: 18px; color: #061018; }
.ob-head .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ob-head .name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--tx-0); }
.ob-head .name b { color: var(--acc-bright); }
.ob-head .skip {
  margin-left: auto;
  background: none; border: none; color: var(--tx-3); font-size: 12.5px;
  padding: 6px 8px; border-radius: 6px; transition: color .14s, background .14s;
}
.ob-head .skip:hover { color: var(--tx-1); background: var(--bg-2); }

/* step progress */
.ob-progress { display: flex; gap: 6px; padding: 16px 24px 0; }
.ob-progress i {
  flex: 1; height: 4px; border-radius: 20px; background: var(--bg-3);
  transition: background .3s;
}
.ob-progress i.on { background: linear-gradient(90deg, var(--acc), var(--acc-cyan)); }

.ob-body { padding: 22px 24px 8px; min-height: 240px; }
.ob-step-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.ob-body h2 {
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--tx-0); margin-top: 8px;
}
.ob-body > p { color: var(--tx-2); font-size: 14px; margin-top: 8px; max-width: 46ch; }

/* welcome icons */
.ob-welcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.ob-wc {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-2);
}
.ob-wc .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.ob-wc .ic svg { width: 17px; height: 17px; }
.ob-wc b { display: block; font-size: 13px; color: var(--tx-0); }
.ob-wc span { font-size: 11.5px; color: var(--tx-3); }

/* use-case picker */
.ob-cases { display: grid; gap: 10px; margin-top: 20px; }
.ob-case {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--tx-1); transition: border-color .14s, background .14s, transform .08s;
}
.ob-case:hover { border-color: var(--bg-4); background: var(--bg-3); }
.ob-case.on { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 3px var(--acc-soft); }
.ob-case .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-3); color: var(--acc-bright); }
.ob-case.on .ic { background: var(--acc); color: #fff; }
.ob-case .ic svg { width: 19px; height: 19px; }
.ob-case .t b { display: block; font-size: 14px; color: var(--tx-0); }
.ob-case .t span { font-size: 12px; color: var(--tx-2); }
.ob-case .chk { margin-left: auto; color: var(--acc-bright); opacity: 0; transition: opacity .14s; }
.ob-case .chk svg { width: 18px; height: 18px; }
.ob-case.on .chk { opacity: 1; }

/* key preview */
.ob-keybox {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #060810;
  display: flex; align-items: center; gap: 12px;
}
.ob-keybox .ic { color: var(--acc-bright); flex-shrink: 0; }
.ob-keybox .ic svg { width: 18px; height: 18px; }
.ob-keybox .secret { font-family: var(--font-mono); font-size: 12.5px; color: var(--ok); word-break: break-all; }
.ob-keybox .secret span { color: var(--tx-3); }

/* mini playground */
.ob-pg { margin-top: 18px; }
.ob-pg .try-row { display: flex; gap: 10px; }
.ob-pg .try-row .input { flex: 1; }
.ob-pg .out {
  margin-top: 14px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: #060810; overflow: hidden;
}
.ob-pg .out .head {
  display: flex; align-items: center; gap: 8px; padding: 8px 13px;
  border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-2);
}
.ob-pg .out pre { padding: 14px 16px; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.65; overflow-x: auto; max-height: 180px; }
.ob-pg .out .placeholder { padding: 26px 16px; text-align: center; color: var(--tx-3); font-size: 13px; }

/* finish */
.ob-finish-check {
  width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 0;
  display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok);
  animation: obPop .4s cubic-bezier(.2,1.4,.4,1);
}
.ob-finish-check svg { width: 32px; height: 32px; }
@keyframes obPop { from { transform: scale(.4); opacity: 0; } }
.ob-next-grid { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.ob-next-grid a {
  display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2);
  color: var(--tx-1); font-size: 13.5px; transition: border-color .14s, background .14s;
}
.ob-next-grid a:hover { border-color: var(--bg-4); background: var(--bg-3); color: var(--tx-0); }
.ob-next-grid a svg { width: 16px; height: 16px; color: var(--acc-bright); }
.ob-next-grid a .arr { margin-left: auto; color: var(--tx-3); }

.ob-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-0);
}
.ob-foot .back { margin-right: auto; }
.ob-foot .err-hint { color: var(--err); font-size: 12px; margin-right: auto; }

/* =========================================================
   App footer (admin discoverability)
   ========================================================= */
.app-footer {
  border-top: 1px solid var(--line);
  margin-top: 36px;
  padding: 22px 30px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  color: var(--tx-3); font-size: 12.5px;
}
.app-footer .brand-mini { display: flex; align-items: center; gap: 8px; color: var(--tx-2); }
.app-footer .brand-mini svg { width: 15px; height: 15px; color: var(--acc-bright); }
.app-footer .brand-mini .footer-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; background: #fff; }
.app-footer .links { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-footer .links a, .app-footer .links button {
  color: var(--tx-2); font-size: 12.5px; background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 6px; transition: color .14s;
}
.app-footer .links a:hover, .app-footer .links button:hover { color: var(--acc-bright); }
.app-footer .links svg { width: 13px; height: 13px; }
.app-footer .admin-link {
  border: 1px solid var(--line-2) !important; border-radius: 6px; padding: 5px 11px !important;
  background: var(--bg-2) !important; color: var(--tx-1) !important;
}
.app-footer .admin-link:hover { border-color: var(--acc) !important; color: var(--acc-bright) !important; }

@media (max-width: 560px) {
  .ob-welcome-grid { grid-template-columns: 1fr; }
  .ob-body h2 { font-size: 20px; }
  .app-footer { padding: 18px 16px; }
  .app-footer .links { margin-left: 0; width: 100%; }
}