/* Kx Puremode - /perfil. A tela de entrada espelha o acesso do app (src/renderer: .auth-*),
   e o painel usa os módulos do app: borda em gradiente de 1px, rótulos em caixa alta, órbita. */

.perfil { position: relative; }

/* ---- carregando / falha ---- */
.perfil-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 78vh; padding: calc(var(--nav-h) + 40px) var(--gutter) 60px; color: var(--mut); text-align: center; }
.perfil-state h1 { font-size: clamp(24px, 3vw, 30px); color: var(--txt); }
.perfil-state p { max-width: 460px; }
.spinner { width: 30px; height: 30px; border: 2px solid var(--red); border-right-color: transparent; border-radius: 50%; animation: spin .85s linear infinite; }
.state-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 37, 64, .4); background: rgba(255, 37, 64, .12); color: var(--red-mid); }

/* ---- entrar ---- */
.login { position: relative; display: grid; place-items: center; min-height: 100vh; padding: calc(var(--nav-h) + 40px) var(--gutter) 72px; overflow: hidden; }
.login-glow { position: absolute; left: -130px; top: 50%; width: 820px; height: 820px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 37, 64, .24), rgba(255, 37, 64, .06) 45%, transparent 70%); transform: translateY(-50%); animation: auth-pulse 7s ease-in-out infinite; pointer-events: none; }
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: clamp(40px, 7vw, 110px); width: min(1090px, 100%); }
.login-brand { min-width: 0; animation: auth-brand-in .75s var(--ease) both; }
.login-brand > img { width: min(300px, 60vw); height: auto; margin-bottom: 12px; filter: drop-shadow(0 18px 42px rgba(255, 37, 64, .38)); }
.login-brand .wordmark { display: block; font-size: 18px; letter-spacing: 9px; }
.login-brand h1 { max-width: 580px; margin: 26px 0 12px; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -1.2px; text-wrap: balance; }
.login-brand h1 em { display: block; font-style: normal; color: var(--red-mid); }
.login-brand > p { max-width: 520px; color: var(--mut); font-size: 15px; }
.login-points { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.login-points li { display: flex; align-items: center; gap: 14px; }
.login-points li > span { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 37, 64, .3); background: rgba(255, 37, 64, .1); color: var(--red-mid); }
.login-points li > span svg { width: 17px; height: 17px; }
.login-points strong { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.3; }
.login-points small { display: block; color: #7e7e8c; font-size: 13px; line-height: 1.45; }

/* cartão de autenticação - medidas do app */
.auth-card { position: relative; padding: 1px; background: linear-gradient(145deg, rgba(255, 37, 64, .95), rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, .035) 72%); box-shadow: 0 34px 90px rgba(0, 0, 0, .62), 0 0 70px rgba(255, 37, 64, .08); animation: auth-card-in .75s cubic-bezier(.2, .85, .2, 1) .08s both; }
.auth-card::before { content: ""; position: absolute; z-index: 2; left: 0; top: 38px; width: 2px; height: 94px; background: var(--red); box-shadow: 0 0 20px 2px rgba(255, 37, 64, .8); }
.auth-card-inner { position: relative; padding: 28px 30px 25px; background: linear-gradient(165deg, rgba(255, 37, 64, .08), rgba(12, 12, 17, .98) 34%), #0a0a0e; }
.auth-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-shield { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 37, 64, .34); background: rgba(255, 37, 64, .12); color: var(--red-mid); }
.auth-card-head > div { flex-grow: 1; min-width: 0; }
.auth-card-head small { display: block; margin-bottom: 3px; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 2.2px; color: var(--red-mid); }
.auth-card-head strong { font-family: var(--display); font-size: 20px; font-weight: 600; }
.auth-state-chip { flex-shrink: 0; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); font-family: var(--display); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; color: #858591; }
.auth-state-chip.checking { border-color: rgba(255, 176, 32, .35); color: var(--amber-soft); }
.auth-state-chip.error { border-color: rgba(255, 37, 64, .45); background: rgba(255, 37, 64, .1); color: #ff91a0; }
.auth-state-chip.ok { border-color: rgba(255, 37, 64, .45); background: rgba(255, 37, 64, .12); color: var(--red-soft); }
.auth-lead { color: #8a8a97; font-size: 13.5px; line-height: 1.55; }

/* ---- painel ---- */
.dash { max-width: var(--page); margin: 0 auto; padding: calc(var(--nav-h) + 44px) var(--gutter) clamp(80px, 9vw, 110px); }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; animation: rise .6s var(--ease) both; }
.dash-head > div { min-width: 0; }
.dash-head h1 { margin: 10px 0 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; overflow-wrap: anywhere; }
.dash-head p { color: var(--mut); }
.dash-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 20px; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dash-side > :nth-child(2) { animation-delay: .1s; }

/* views fade in; the skeleton mirrors the dashboard so nothing jumps when data arrives */
.perfil > [data-view]:not([hidden]) { animation: perfil-fade .4s var(--ease) both; }
.perfil-skeleton { max-width: var(--page); margin: 0 auto; padding: calc(var(--nav-h) + 44px) var(--gutter) 80px; }
.perfil-skeleton i { display: block; background: linear-gradient(90deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .075) 40%, rgba(255, 255, 255, .035) 80%); background-size: 260% 100%; animation: perfil-shimmer 1.5s ease-in-out infinite; }
.sk-head { display: grid; gap: 12px; margin-bottom: 30px; }
.sk-head .sk-eyebrow { width: 92px; height: 10px; }
.sk-head .sk-title { width: min(260px, 70%); height: 42px; }
.sk-head .sk-text { width: min(520px, 90%); height: 14px; }
.sk-side, .sk-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.perfil-skeleton .sk-card { border: 1px solid rgba(255, 255, 255, .06); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.sk-id { height: 500px; }
.sk-sec { height: 290px; }
.sk-dl { height: 250px; background-color: rgba(255, 37, 64, .05); }
.sk-ka { height: 380px; }
.sk-orders { height: 200px; }

.card { padding: 1px; background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); animation: rise .62s var(--ease) both; }
.dash-main > :nth-child(1) { animation-delay: .06s; }
.dash-main > :nth-child(2) { animation-delay: .12s; }
.dash-main > :nth-child(3) { animation-delay: .18s; }
.card-body { position: relative; height: 100%; padding: 22px 24px 24px; background: var(--carbon); }
.card-label { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 2.4px; color: #6e6e7c; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head > div { flex-grow: 1; min-width: 0; }
.card-head small { display: block; margin-bottom: 3px; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 2.2px; color: var(--red-mid); }
.card-head strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.2; }
.card-icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 37, 64, .34); background: rgba(255, 37, 64, .12); color: var(--red-mid); }
.card-note { margin-top: 14px; color: #7e7e8c; font-size: 13px; }
.recovery-profile-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 11px 12px; border: 1px solid rgba(255,37,64,.18); background: linear-gradient(100deg,rgba(255,37,64,.07),rgba(255,255,255,.015)); font-size: 12px; line-height: 1.45; }
.recovery-profile-note a { flex: 0 0 auto; color: #ff7183; font-family: var(--display); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.card-security .card-body { background: linear-gradient(170deg, rgba(255, 37, 64, .05), rgba(10, 10, 14, .98) 46%), var(--carbon); }
.card-security .recovery-profile-note { margin-top: 14px; }
.profile-security-links { display: grid; gap: 8px; margin-top: 18px; }
.profile-security-links a { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 62px; padding: 12px 14px; border: 1px solid var(--hair); background: rgba(255,255,255,.025); transition: border-color .22s ease, background .22s ease, transform .22s var(--ease); }
.profile-security-links a:hover, .profile-security-links a:focus-visible { border-color: rgba(255,37,64,.5); background: rgba(255,37,64,.065); outline: 0; transform: translateX(2px); }
.profile-security-links a > svg:first-child { width: 20px; height: 20px; color: var(--red-mid); }
.profile-security-links a > svg:last-child { width: 14px; height: 14px; margin-left: auto; color: var(--dim); transition: color .22s ease, transform .22s var(--ease); }
.profile-security-links a:hover > svg:last-child { color: var(--red-soft); transform: translateX(2px); }
.profile-security-links a > span { min-width: 0; }
.profile-security-links strong { display: block; font-family: var(--display); font-size: 12px; font-weight: 600; line-height: 1.35; }
.profile-security-links small { display: block; margin-top: 4px; font-size: 12px; color: var(--mut); line-height: 1.4; }
.chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); font-family: var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.4px; color: #7b7b88; white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.on { border-color: rgba(255, 37, 64, .38); background: rgba(255, 37, 64, .14); color: var(--red-soft); }
.chip.bad { border-color: rgba(255, 37, 64, .55); background: rgba(255, 37, 64, .1); color: #ff8b9b; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* identidade (a órbita é a mesma do "Perfil selecionado" do app) */
.card-id { background: linear-gradient(150deg, rgba(255, 37, 64, .5), rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .03)); }
.card-id .card-body { display: flex; flex-direction: column; align-items: center; background: linear-gradient(170deg, rgba(255, 37, 64, .09), rgba(10, 10, 14, .98) 52%), var(--carbon); }
.card-id .card-label { align-self: flex-start; }
.id-orb { position: relative; display: grid; place-items: center; width: 136px; height: 136px; margin-top: 12px; }
.id-orb i { position: absolute; border-radius: 50%; }
.id-orb .ring-a { inset: 0; border: 1px solid transparent; border-top-color: var(--red); border-right-color: rgba(255, 37, 64, .3); animation: spin 7s linear infinite; }
.id-orb .ring-b { inset: 9px; border: 1px dashed rgba(255, 255, 255, .14); animation: spin-reverse 13s linear infinite; }
.id-orb img { position: relative; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: var(--graphite); box-shadow: 0 0 0 2px rgba(255, 37, 64, .55), 0 0 34px rgba(255, 37, 64, .35); }
.id-name { max-width: 100%; margin-top: 14px; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.id-handle { max-width: 100%; margin-top: 2px; overflow: hidden; font-family: var(--mono); font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.id-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.id-list { width: 100%; margin: 20px 0 0; border-top: 1px solid var(--hair); }
.id-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.id-list dt { flex-shrink: 0; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: var(--dim); }
.id-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; font-size: 13.5px; color: #d6d6e0; }
/* download */
.card-download { background: linear-gradient(150deg, rgba(255, 37, 64, .7), rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .03)); }
.card-download .card-body { background: linear-gradient(165deg, rgba(255, 37, 64, .07), var(--carbon) 40%); }
.download-lead { max-width: 650px; margin-top: 16px; color: #898996; font-size: 13.5px; line-height: 1.55; }
.profile-download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.profile-download-actions .btn-red { font-size: 10px; letter-spacing: 1px; }
.card-download .card-head { flex-wrap: wrap; }
.card-download .card-head > div { flex-basis: 180px; }
.shared-login { display: flex; align-items: center; gap: 12px; margin-top: 15px; padding: 12px 14px; border: 1px solid rgba(255, 37, 64, .25); background: linear-gradient(100deg, rgba(255, 37, 64, .1), rgba(255, 255, 255, .025)); }
.shared-login-icon { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 37, 64, .34); background: rgba(255, 37, 64, .1); color: var(--red-soft); }
.shared-login-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shared-login > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.shared-login strong { display: block; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #fff; }
.shared-login small { display: block; margin-top: 3px; color: #8f8f9c; font-size: 12.5px; line-height: 1.4; }
.shared-login small b { color: #d6d6df; font-weight: 600; }
.shared-login-badge { flex-shrink: 0; padding: 5px 8px; border: 1px solid rgba(255, 37, 64, .32); background: rgba(255, 37, 64, .1); color: var(--red-soft); font-family: var(--display); font-size: 7.5px; font-weight: 700; letter-spacing: 1.1px; }
.edition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.edition-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 238px; padding: 17px 17px 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); outline: 0; background: linear-gradient(150deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); color: var(--txt); font: inherit; text-align: left; cursor: pointer; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; }
.edition-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: transparent; transition: background .22s ease, box-shadow .22s ease; }
.edition-card::after { content: ""; position: absolute; right: -52px; bottom: -72px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 37, 64, .11), transparent 68%); pointer-events: none; }
.edition-card:hover { border-color: rgba(255, 255, 255, .18); background: linear-gradient(150deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02)); transform: translateY(-2px); }
.edition-card:focus-visible { box-shadow: 0 0 0 3px rgba(255, 37, 64, .18); }
.edition-card.active { border-color: rgba(255, 37, 64, .56); background: linear-gradient(145deg, rgba(255, 37, 64, .12), rgba(255, 255, 255, .025) 55%); box-shadow: inset 0 0 32px rgba(255, 37, 64, .035), 0 16px 38px rgba(0, 0, 0, .2); }
.edition-card.active::before { background: var(--red); box-shadow: 0 0 18px rgba(255, 37, 64, .85); }
.edition-top { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 11px; }
.edition-icon { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); }
.edition-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.edition-risk .edition-icon { border-color: rgba(255, 176, 32, .28); background: rgba(255, 176, 32, .07); color: var(--amber-soft); }
.edition-safe .edition-icon { border-color: rgba(255, 37, 64, .32); background: rgba(255, 37, 64, .09); color: var(--red-soft); }
.edition-name { flex: 1 1 auto; min-width: 0; }
.edition-name strong { display: block; font-family: var(--display); font-size: 17px; font-weight: 650; line-height: 1.2; }
.edition-name em { display: block; margin-top: 3px; font-family: var(--display); font-size: 8px; font-style: normal; font-weight: 700; line-height: 1.35; letter-spacing: 1.1px; text-transform: uppercase; }
.edition-risk .edition-name em { color: var(--amber-soft); }
.edition-safe .edition-name em { color: var(--red-soft); }
.edition-choice { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; border: 1px solid #555560; border-radius: 50%; box-shadow: inset 0 0 0 3px #101015; background: #292930; }
.edition-card.active .edition-choice { border-color: var(--red-mid); background: var(--red); box-shadow: inset 0 0 0 3px #16070c, 0 0 13px rgba(255, 37, 64, .65); }
.edition-copy { position: relative; z-index: 1; display: block; min-height: 58px; margin-top: 14px; color: #8c8c98; font-size: 12.5px; line-height: 1.5; }
.edition-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.edition-features i { padding: 4px 6px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .2); color: #777783; font-family: var(--display); font-size: 7px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: .7px; }
.edition-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; color: #656570; font-family: var(--mono); font-size: 10px; }
.edition-foot b { font-family: var(--display); font-size: 8px; letter-spacing: 1.3px; color: #8a8a96; }
.edition-card.active .edition-foot > span { color: #fff; }
.download-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 12px; padding: 20px 22px; border: 1px solid var(--hair); background: rgba(0, 0, 0, .28); }
.download-meta { min-width: 0; }
.download-version { display: block; font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; color: #fff; text-shadow: 0 0 26px rgba(255, 37, 64, .45); font-variant-numeric: tabular-nums; }
.download-meta ul { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0 0; padding: 0; list-style: none; }
.download-meta li { min-width: 0; }
.download-meta small { display: block; font-family: var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--dim); }
.download-meta b { display: block; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 600; color: #d6d6e0; }
.download-meta b.mono { font-size: 12px; }
.download-row .btn-red { flex-shrink: 0; }
.download-locked { flex: 0 1 410px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px 13px; padding: 14px; border: 1px solid rgba(255, 37, 64, .3); background: linear-gradient(135deg, rgba(255, 37, 64, .1), rgba(255, 255, 255, .025)); }
.download-lock-icon { grid-row: 1 / 3; display: grid; place-items: center; align-self: start; width: 42px; height: 42px; border: 1px solid rgba(255, 37, 64, .34); background: rgba(255, 37, 64, .1); color: var(--red-soft); }
.download-lock-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.download-lock-copy strong { display: block; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #fff; }
.download-lock-copy p { margin-top: 4px; color: #858592; font-size: 12px; line-height: 1.4; }
.download-lock-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; }
.download-lock-actions .btn-red, .download-lock-actions .gbtn { min-height: 34px; height: 34px; padding: 0 11px; font-size: 8.5px; letter-spacing: .9px; }
.release-note { margin-top: 10px; color: #7e7e8c; font-size: 12px; line-height: 1.5; }
/* conta do app */
.ka-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.stat { min-width: 0; padding: 14px 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .02); }
.stat small, .ka-details dt { display: block; font-family: var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--dim); }
.stat strong { display: block; margin-top: 5px; overflow: hidden; font-family: var(--display); font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stat span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--red-soft); }
.stat span.stat-muted { color: #7e7e8c; }
.stat span.expired { color: #ff8b9b; }
.ka-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .012); }
.ka-details > div { min-width: 0; padding: 0 2px; }
.ka-details dd { margin: 3px 0 0; font-size: 13.5px; color: #c9c9d4; }
.ka-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ka-intro { margin-top: 16px; color: #8a8a97; font-size: 13.5px; }
.ka-intro b { color: #c4c4ce; font-weight: 600; }
.ka-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.ka-form-actions .auth-submit { flex: 1 1 auto; margin-top: 0; }
.ka-form-actions .gbtn { height: 56px; padding: 0 22px; }
.ka-help { margin-top: 12px; color: #6f6f7b; font-size: 12.5px; }
.ka-help b { color: #c4c4ce; font-weight: 600; }
.ka-help a { color: var(--red-soft); border-bottom: 1px solid rgba(255, 115, 135, .4); }

/* primeiros passos */
.mini-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.mini-steps li { display: flex; gap: 12px; min-width: 0; }
.mini-steps li > span { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 37, 64, .45); background: #16070c; color: var(--red-soft); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.mini-steps strong { display: block; font-family: var(--display); font-size: 15px; font-weight: 600; }
.mini-steps small { display: block; margin-top: 3px; color: #7e7e8c; font-size: 12.5px; line-height: 1.5; }
.mini-steps b { color: #c4c4ce; font-weight: 600; }

@keyframes perfil-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes perfil-shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@keyframes auth-pulse { 0%, 100% { opacity: .72; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.07); } }
@keyframes auth-brand-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes auth-card-in { from { opacity: 0; transform: translateX(34px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1000px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); width: min(520px, 100%); gap: 36px; }
  .login-brand { text-align: center; }
  .login-brand > img { width: min(220px, 50vw); margin-inline: auto; }
  .login-brand > p { margin-inline: auto; }
  .login-points { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .login-glow { left: 50%; top: 20%; transform: translate(-50%, -50%); animation: none; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .ka-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  /* one column: identity and security side by side while there is room */
  .dash-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sk-side { flex-direction: row; }
  .sk-side .sk-card { flex: 1; }
}
@media (max-width: 760px) {
  .dash-side { display: flex; }
  .sk-side { flex-direction: column; }
  /* compact identity: avatar beside the name instead of a tall centered orb */
  .card-id .card-body { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .card-id .card-label { grid-column: 1 / -1; margin-bottom: 14px; }
  .card-id .id-orb { grid-row: 2 / span 3; width: 76px; height: 76px; margin: 0; }
  .card-id .id-orb img { width: 60px; height: 60px; }
  .card-id .id-orb .ring-b { inset: 6px; }
  .card-id .id-name { grid-column: 2; margin-top: 0; font-size: 20px; text-align: left; }
  .card-id .id-handle { grid-column: 2; }
  .card-id .id-chips { grid-column: 2; justify-content: flex-start; margin-top: 8px; }
  .card-id .id-list { grid-column: 1 / -1; margin-top: 18px; }
  .sk-id { height: 330px; }
}
@media (max-width: 700px) {
  .dash-head { flex-direction: column; align-items: flex-start; }
  .ka-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ka-stats .stat:first-child { grid-column: 1 / -1; }
  .ka-stats .stat strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .mini-steps { grid-template-columns: minmax(0, 1fr); }
  .edition-grid { grid-template-columns: minmax(0, 1fr); }
  .edition-card { min-height: 0; }
  .edition-copy { min-height: 0; }
  .download-row { flex-direction: column; align-items: stretch; }
  .download-row .btn-red { width: 100%; }
  .download-locked { flex-basis: auto; width: 100%; }
  .download-lock-actions .btn-red, .download-lock-actions .gbtn { width: auto; flex: 1 1 150px; }
}
@media (max-width: 600px) {
  .login-points { display: none; }
  .login-brand h1 { margin-top: 20px; }
  .auth-card-inner { padding: 22px 18px 20px; }
  .card-body { padding: 20px 18px 22px; }
  .card-head strong { font-size: 18px; }
  .shared-login { align-items: flex-start; }
  .shared-login-badge { display: none; }
  .ka-form-actions { flex-direction: column-reverse; }
  .ka-form-actions .gbtn { height: 46px; }
}

/* ---- minhas compras ---- */
.card-orders .card-head .gbtn { flex-shrink: 0; height: 34px; padding: 0 12px; font-size: 10px; }
.orders-empty { margin-top: 18px; color: var(--mut); font-size: 14px; }
.orders, .subs { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.subs:empty { display: none; }
.order, .sub { padding: 14px 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .02); }
.sub { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; border-color: rgba(255, 37, 64, .28); background: linear-gradient(120deg, rgba(255, 37, 64, .08), rgba(255, 255, 255, .02)); }
.sub-text { flex: 1 1 260px; min-width: 0; }
.sub .gbtn, .sub .btn-red { height: 34px; padding: 0 12px; font-size: 10px; }
.order-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-top strong { font-family: var(--display); font-size: 15px; font-weight: 600; }
.order-meta { margin-top: 3px; color: var(--mut); font-size: 12.5px; }
.order-msg { margin-top: 8px; color: #a3a3ae; font-size: 13px; }
.order-msg.ok { color: #c4c4ce; }
.order-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 37, 64, .3); background: rgba(255, 37, 64, .05); }
.order-key small { font-family: var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--red-mid); }
.order-key code { flex: 1 1 180px; min-width: 0; font-family: var(--mono); font-size: 13.5px; font-weight: 700; letter-spacing: .6px; color: #fff; overflow-wrap: anywhere; }
.order-key .gbtn { height: 30px; padding: 0 10px; font-size: 9.5px; }
.order-resume { height: 32px; margin-top: 10px; padding: 0 12px; font-size: 10px; }