/* ZIPPRI AI HUB V5.8.6 — onboarding compatibility layer
   Styles only components injected by live-v55.js. */

body.hub-v58 #access{
  scroll-margin-top:132px;
  padding-bottom:112px!important;
}
body.hub-v58 #access>.shell{position:relative;z-index:2}
body.hub-v58 #access .head{margin-bottom:26px!important}
body.hub-v58 #access .authWrap{grid-template-columns:.88fr 1.12fr!important;gap:18px!important;align-items:start}
body.hub-v58 #access .infoPanel{position:sticky;top:126px}

body.hub-v58 .zOptionalHidden{display:none!important}
body.hub-v58 .zAuthHint{
  text-align:center;color:var(--muted);font-size:11px;line-height:1.5;margin:10px 0 0;
}
body.hub-v58 .zAuthHint b{color:var(--cyan);font-size:1.05em}

body.hub-v58 .zQuickPromise{
  display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 0;
}
body.hub-v58 .zQuickPromise span{
  display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font:800 9px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.025em;background:var(--panel2);
}

body.hub-v58 .zHubGateway{
  margin:18px 0 2px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
body.hub-v58 .zHubGoal{
  appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;justify-content:center;
  width:100%;min-height:66px;padding:11px 13px;text-align:left;
  border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--text);
  cursor:pointer;font:inherit;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s;
}
body.hub-v58 .zHubGoal:hover,body.hub-v58 .zHubGoal:focus-visible{
  transform:translateY(-2px);border-color:var(--cyan);outline:none;
  box-shadow:0 10px 24px color-mix(in srgb,var(--cyan) 9%,transparent);
}
body.hub-v58 .zHubGoal b{display:block;font-size:12px;line-height:1.2;color:var(--text)}
body.hub-v58 .zHubGoal small{display:block;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.35}

body.hub-v58 .zWizard{margin-top:8px}
body.hub-v58 .zWizardBar{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
body.hub-v58 .zWizardBar span{
  border:1px solid var(--line);border-radius:999px;padding:7px 10px;
  font:900 9px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--muted);text-align:center;background:var(--panel2);
}
body.hub-v58 .zWizardBar span.active{color:var(--text);border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 9%,var(--panel2))}
body.hub-v58 .zWizardBar span.done{color:var(--ok)}
body.hub-v58 .zWizardStep{display:none}
body.hub-v58 .zWizardStep.active{display:block;animation:zV58StepIn .24s var(--ease)}
@keyframes zV58StepIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

body.hub-v58 .zGoalGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
body.hub-v58 .zGoal{
  appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:14px;
  background:var(--panel2);color:var(--text);padding:12px;text-align:left;cursor:pointer;
  font:inherit;transition:.18s;
}
body.hub-v58 .zGoal:hover,body.hub-v58 .zGoal.active{
  border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,var(--panel2));transform:translateY(-1px);
}
body.hub-v58 .zGoal b{display:block;font-size:12px}
body.hub-v58 .zGoal small{display:block;color:var(--muted);font-size:9px;line-height:1.4;margin-top:3px}

body.hub-v58 .zStepNav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
body.hub-v58 .zStepNav .btn{min-width:120px}
body.hub-v58 .zStepSummary{border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:12px;margin-top:10px}
body.hub-v58 .zStepSummary div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:10px}
body.hub-v58 .zStepSummary div:last-child{border-bottom:0}
body.hub-v58 .zStepSummary span{color:var(--muted)}
body.hub-v58 .zFieldError{border-color:var(--bad)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 10%,transparent)!important}

body.hub-v58 .zOnboardingStatus{margin:16px 0 4px;border:1px solid var(--line);border-radius:20px;padding:17px;background:var(--panel)}
body.hub-v58 .zOnboardingTop{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:12px}
body.hub-v58 .zOnboardingTop b{font-size:17px}
body.hub-v58 .zOnboardingTop p{margin:3px 0 0;color:var(--muted);font-size:11px}
body.hub-v58 .zJourney{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
body.hub-v58 .zJourneyStep{border:1px solid var(--line);border-radius:13px;padding:10px;background:var(--panel2)}
body.hub-v58 .zJourneyStep i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:10px;font-weight:900;border:1px solid var(--line);margin-bottom:7px}
body.hub-v58 .zJourneyStep b{display:block;font-size:10px}
body.hub-v58 .zJourneyStep small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
body.hub-v58 .zJourneyStep.done i{background:var(--ok);color:#fff;border-color:transparent}
body.hub-v58 .zJourneyStep.active{border-color:var(--cyan)}
body.hub-v58 .zJourneyStep.active i{background:var(--cyan);color:#fff;border-color:transparent}
body.hub-v58 .zNextAction{display:flex;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:13px;padding-top:13px}
body.hub-v58 .zNextAction span{font-size:10px;color:var(--muted)}
body.hub-v58.zPreOnboard #appNav a[data-dash-target]:not([data-dash-target="userDashboard"]):not([data-dash-target="dashStartProject"]):not([data-dash-target="dashboardAccount"]){display:none!important}

/* Light Hub component treatment */
html[data-theme="light"] body.hub-v58 .zQuickPromise span{
  color:#4c6b87;border-color:rgba(48,113,177,.20);
  background:linear-gradient(180deg,rgba(250,253,255,.97),rgba(229,241,252,.93));
  box-shadow:0 4px 12px rgba(28,80,132,.05);
}
html[data-theme="light"] body.hub-v58 .zHubGoal,
html[data-theme="light"] body.hub-v58 .zGoal{
  color:#173855;border-color:rgba(53,111,177,.22);
  background:linear-gradient(145deg,rgba(250,253,255,.98),rgba(225,240,252,.94));
  box-shadow:0 6px 16px rgba(29,78,128,.06);
}
html[data-theme="light"] body.hub-v58 .zHubGoal b,
html[data-theme="light"] body.hub-v58 .zGoal b{color:#173855}
html[data-theme="light"] body.hub-v58 .zHubGoal small,
html[data-theme="light"] body.hub-v58 .zGoal small{color:#5f7890}
html[data-theme="light"] body.hub-v58 .zHubGoal:hover,
html[data-theme="light"] body.hub-v58 .zHubGoal:focus-visible,
html[data-theme="light"] body.hub-v58 .zGoal:hover,
html[data-theme="light"] body.hub-v58 .zGoal.active{
  border-color:#2f8fd0;background:linear-gradient(145deg,#f8fcff,#dcefff);
  box-shadow:0 10px 24px rgba(33,108,170,.11);
}
html[data-theme="light"] body.hub-v58 .zWizardBar span,
html[data-theme="light"] body.hub-v58 .zStepSummary{
  border-color:rgba(52,110,174,.20);background:rgba(243,249,255,.92);
}
html[data-theme="light"] body.hub-v58 .zWizardBar span.active{
  color:#164970;border-color:#318fcf;background:#e7f4ff;
}

/* Dark Hub keeps the approved blue/indigo/orange identity */
html[data-theme="dark"] body.hub-v58 .zQuickPromise span{
  color:#a8bdd4;border-color:rgba(46,168,255,.22);background:rgba(7,21,38,.90);
}
html[data-theme="dark"] body.hub-v58 .zHubGoal,
html[data-theme="dark"] body.hub-v58 .zGoal{
  color:#eff7ff;border-color:rgba(46,168,255,.22);
  background:linear-gradient(145deg,rgba(7,24,43,.96),rgba(4,14,28,.97));
}
html[data-theme="dark"] body.hub-v58 .zHubGoal:hover,
html[data-theme="dark"] body.hub-v58 .zHubGoal:focus-visible,
html[data-theme="dark"] body.hub-v58 .zGoal:hover,
html[data-theme="dark"] body.hub-v58 .zGoal.active{
  border-color:#2ea8ff;background:linear-gradient(145deg,rgba(10,43,75,.96),rgba(8,25,50,.98));
  box-shadow:0 10px 25px rgba(46,168,255,.12);
}
html[data-theme="dark"] body.hub-v58 .zJourneyStep.active{border-color:#ff9a1f}
html[data-theme="dark"] body.hub-v58 .zJourneyStep.active i{background:#ff9a1f;color:#101826}

@media(max-width:1000px){
  body.hub-v58 #access .authWrap{grid-template-columns:1fr!important}
  body.hub-v58 #access .infoPanel{position:relative;top:auto}
  body.hub-v58 .zHubGateway,body.hub-v58 .zJourney{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body.hub-v58 #access{scroll-margin-top:112px;padding-bottom:78px!important}
  body.hub-v58 .zHubGateway,body.hub-v58 .zGoalGrid,body.hub-v58 .zJourney{grid-template-columns:1fr}
  body.hub-v58 .zWizardBar span{font-size:8px;padding:6px 4px}
  body.hub-v58 .zOnboardingTop,body.hub-v58 .zNextAction{align-items:flex-start;flex-direction:column}
  body.hub-v58 .zStepNav{position:sticky;bottom:8px;padding:8px;background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:14px;z-index:5}
}