/* Onboarding (depois do cadastro): tela cheia, fora da navegação. Mesma sala de máquinas do resto do app. */
.ob { min-height: 100vh; padding: 40px 24px 56px; display: grid; place-items: start center;
  background: radial-gradient(70% 50% at 50% 0%, rgba(245, 185, 66, .07), transparent 70%), var(--bg); }
.ob-in { width: min(1120px, 100%); }
.ob-top { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; }
.ob-mark { font: 700 15px var(--display); letter-spacing: .3em; color: var(--ink); }
.ob-step { margin-left: auto; font: 500 12px var(--mono); color: var(--mute); letter-spacing: .06em; }
.ob-back { background: none; border: 0; color: var(--ink-2); font: 500 13px var(--sans); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.ob-back:hover, .ob-back:focus-visible { color: var(--ink); background: var(--panel); outline: none; }
.ob-eyebrow { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fil); }
.ob h1 { margin: 0; font: 600 clamp(34px, 5vw, 54px)/1.02 var(--display); letter-spacing: .01em; max-width: 24ch; }
.ob-lead { margin: 14px 0 32px; color: var(--ink-2); font-size: 16px; max-width: 60ch; }

.ob-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ob-path { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 22px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; transition: border-color var(--t), transform var(--t), background var(--t); }
.ob-path:hover, .ob-path:focus-visible { border-color: var(--fil); transform: translateY(-2px); background: linear-gradient(180deg, var(--fil-dim), transparent 45%), var(--panel); outline: none; }
.ob-k { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ob-path b { font: 600 28px/1.08 var(--display); letter-spacing: .01em; color: var(--ink); }
.ob-path p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.ob-path ul { margin: 2px 0 6px; padding: 0; list-style: none; display: grid; gap: 7px; }
.ob-path li { font-size: 13px; color: var(--ink); padding-left: 18px; position: relative; }
.ob-path li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--fil); }
.ob-go { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font: 600 14px var(--sans); color: var(--fil); }
.ob-go i { font-style: normal; display: inline-block; transition: transform var(--t); } .ob-path:hover .ob-go i { transform: translateX(4px); }
.ob-both { margin-top: 18px; background: none; border: 1px dashed var(--line-2); color: var(--ink-2); font: 500 14px var(--sans); padding: 12px 18px; border-radius: 10px; cursor: pointer; width: 100%; }
.ob-both:hover, .ob-both:focus-visible { border-color: var(--fil); color: var(--ink); outline: none; }

.ob-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ob-tier { text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; transition: border-color var(--t), background var(--t); }
.ob-tier:hover { border-color: var(--ink-2); } .ob-tier:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
.ob-tier.on { border-color: var(--fil); background: linear-gradient(180deg, var(--fil-dim), transparent 40%), var(--panel); box-shadow: 0 0 0 1px var(--fil) inset; }
.ob-g { display: block; height: 64px; margin: -2px 0 4px; } .ob-g svg { height: 100%; width: auto; }
.ob-g .ln, .ob-g line { stroke: var(--line-2); stroke-width: 1.5; fill: none; } .ob-g .arr { stroke: var(--fil); stroke-width: 2; fill: none; stroke-linejoin: round; }
.ob-g .you { fill: var(--fil); } .ob-g .oth { fill: var(--line-2); } .ob-g .hub { fill: var(--panel-2); stroke: var(--ink-2); stroke-width: 1.5; }
.ob-g .fence { fill: none; stroke: var(--fil); stroke-width: 1.5; stroke-dasharray: 4 4; } .ob-g .house { fill: none; stroke: var(--fil); stroke-width: 2; stroke-linejoin: round; }
.ob-tier:not(.on) .ob-g .you { fill: var(--ink-2); } .ob-tier:not(.on) .ob-g .fence, .ob-tier:not(.on) .ob-g .house, .ob-tier:not(.on) .ob-g .arr { stroke: var(--ink-2); }
.ob-tn { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .ob-tier.on .ob-tn { color: var(--fil); }
.ob-tier b { font: 600 21px/1.1 var(--display); color: var(--ink); }
.ob-tier p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ob-fit { font-size: 12px; color: var(--ink); } 
.ob-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font: 600 13px var(--mono); color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.ob-price small { font: 400 11px var(--sans); color: var(--mute); }
.ob-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; } .ob-foot .btn { margin-left: auto; }
@media (max-width: 980px) { .ob-tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .ob-paths, .ob-tiers { grid-template-columns: 1fr; } .ob-top { margin-bottom: 28px; } .ob-foot .btn { width: 100%; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .ob-path, .ob-go i { transition: none; } .ob-path:hover { transform: none; } }

/* Chaves de API: formulário com os parâmetros da chave */
.kform { display: grid; gap: 16px; margin-bottom: 8px; }
.kname input { width: 100%; }
.kf { border: 0; padding: 0; margin: 0; } .kf legend { font: 500 12px var(--sans); color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.ktiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ktier { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; background: var(--panel-2); }
.ktier input { position: absolute; opacity: 0; } .ktier b { font-size: 14px; } .ktier span { font-size: 12px; color: var(--mute); }
.ktier em { position: absolute; top: 10px; right: 12px; font: 600 12px var(--mono); font-style: normal; color: var(--ink-2); }
.ktier.on { border-color: var(--fil); background: var(--fil-dim); } .ktier.on em { color: var(--fil); }
.ktier:has(input:focus-visible) { outline: 2px solid var(--cool); outline-offset: 2px; }
.kwarn { margin: 8px 0 0; font-size: 12px; color: var(--fil); }
.krow { display: flex; gap: 12px; flex-wrap: wrap; } .krow .field { min-width: 200px; }
.kmodes { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; } .kmodes label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.kmodels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.kchip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px var(--mono); cursor: pointer; }
.kchip input { margin: 0; } .kchip.on { border-color: var(--fil); color: var(--fil); background: var(--fil-dim); }
.kadd { display: inline-flex; gap: 6px; } .kadd input { width: 200px; font-family: var(--mono); font-size: 12px; }
.kact { display: flex; justify-content: flex-end; } .knew { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 900px) { .ktiers { grid-template-columns: 1fr 1fr; } }
.kpools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.kpool { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; background: var(--panel-2); }
.kpool input { position: absolute; opacity: 0; } .kpool b { font-size: 14px; } .kpool span { font-size: 12px; color: var(--mute); } .kpool em { font-style: normal; align-self: flex-start; font-size: 11px; }
.kpool.on { border-color: var(--fil); background: var(--fil-dim); } .kpool:has(input:focus-visible) { outline: 2px solid var(--cool); outline-offset: 2px; }
.khosts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kchip .kx { background: none; border: 0; color: inherit; cursor: pointer; font: 600 14px var(--sans); line-height: 1; padding: 0 0 0 2px; }
.kform.editing { border-color: rgba(245, 185, 66, .45); }
.kedit-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; } .kedit-h .mute { font-size: 12px; }