/* Kx Puremode — cromo, carmesim e chanfro.
   A linguagem vem do logotipo: facetas de metal com luz vermelha na borda. */

@font-face { font-family: "Oxanium"; src: url("assets/fonts/oxanium-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --void: #050507;
  --carbon: #0a0a0e;
  --graphite: #131318;
  --ink: #0b0b0f;
  --hair: rgba(255, 255, 255, .07);
  --hair-2: rgba(255, 255, 255, .12);
  --red: #ff2540;
  --red-soft: #ff7387;
  --red-mid: #ff3c55;
  --red-deep: #b00c22;
  --amber: #ffb020;
  --amber-soft: #ffcb80;
  --txt: #f4f4f7;
  --mut: #8a8a97;
  --dim: #5e5e6b;
  --faint: #4b4b57;
  --display: "Oxanium", system-ui, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  font-family: var(--body);
}

* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }
html { margin: 0; width: 100%; min-height: 100%; background: transparent; }
body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: var(--txt);
  background: var(--void);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  -webkit-app-region: no-drag;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button, input, label { -webkit-app-region: no-drag; }
button:disabled { cursor: not-allowed; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ---- geometria: chanfro nos cantos ↖ ↘, no lugar do raio uniforme ---- */
.chamfer { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.chamfer-s { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.chamfer-xs { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

.chrome {
  background: linear-gradient(177deg, #fff, #d3d6dd 44%, #7f838d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- camadas decorativas ---- */
.aurora, .aurora-2, .tex, .facet, .vig { position: absolute; pointer-events: none; }
.aurora { left: 50%; top: -330px; width: 1180px; height: 620px; transform: translate(-50%, 0); background: radial-gradient(closest-side, rgba(255, 37, 64, .30), rgba(255, 37, 64, .07) 56%, transparent 74%); animation: breathe 9s ease-in-out infinite; }
.aurora-2 { right: -220px; bottom: -280px; width: 760px; height: 560px; background: radial-gradient(closest-side, rgba(255, 37, 64, .16), transparent 70%); animation: breathe-2 12s ease-in-out infinite; }
.tex { inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(130% 95% at 50% -6%, #000 0, transparent 74%); mask-image: radial-gradient(130% 95% at 50% -6%, #000 0, transparent 74%); }
.facet { inset: 0; opacity: .8; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .017) 0 1px, transparent 1px 148px); }
.vig { inset: 0; background: radial-gradient(135% 105% at 50% 44%, transparent 42%, rgba(0, 0, 0, .7) 100%); }

/* ---- brilho deslizante ---- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset-block: -25%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  transform: translate3d(-170%, 0, 0) skewX(-14deg);
  pointer-events: none;
}
.sheen:hover:not(:disabled)::after { animation: sheen .85s cubic-bezier(.3, .7, .4, 1); }

/* ---- botões fantasma ---- */
.gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, #17171d, #101015);
  color: #b7b7c2;
  font-family: var(--display);
  font-weight: 600;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.gbtn svg { width: 14px; height: 14px; }
.gbtn:hover:enabled { transform: translateY(-1px); border-color: rgba(255, 37, 64, .55); color: #fff; background: linear-gradient(180deg, #1d1d25, #131318); box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 37, 64, .1); }
.gbtn:active:enabled { transform: translateY(1px); }
.gbtn:disabled { opacity: .34; }
.gbtn.on { border-color: rgba(255, 37, 64, .6); color: var(--red-soft); background: linear-gradient(180deg, rgba(255, 37, 64, .18), rgba(255, 37, 64, .07)); box-shadow: inset 0 0 18px rgba(255, 37, 64, .12); }
.gbtn.amber { border-color: rgba(255, 176, 32, .6); color: var(--amber-soft); background: linear-gradient(180deg, rgba(255, 176, 32, .16), rgba(255, 176, 32, .06)); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 2px; }
.chamfer:focus-visible, .chamfer-s:focus-visible, .chamfer-xs:focus-visible { outline-offset: -3px; }

kbd {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--hair-2);
  border-bottom-color: rgba(0, 0, 0, .6);
  border-radius: 5px;
  background: var(--graphite);
  color: #a8a8b4;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
}

/* =========================================================
   Acesso KeyAuth
   ========================================================= */
.auth-screen {
  position: fixed;
  z-index: 70;
  inset: 1px;
  overflow: hidden;
  border-radius: 17px;
  background: radial-gradient(ellipse at 24% 48%, #1d0710 0%, #0b080d 40%, #050507 74%);
  -webkit-app-region: no-drag;
}
.auth-screen.auth-leaving { animation: auth-out .42s cubic-bezier(.4, 0, .7, .2) both; pointer-events: none; }
body.access-open, body.access-open * { -webkit-app-region: no-drag !important; }
.access-overlay { position: fixed; z-index: 75; inset: 1px; border-radius: 17px; display: grid; place-items: center; padding: 54px 24px; overflow-y: auto; background: radial-gradient(ellipse at 50% 35%, #4a102322, transparent 65%), #060609ed; backdrop-filter: blur(12px); }
.access-card { width: min(560px, 100%); padding: 1px; background: linear-gradient(140deg, #ff25408c, #ffffff25 35%, #ffffff12 85%, #ff254042); filter: drop-shadow(0 24px 50px #0008); animation: access-in .28s ease-out both; }
.access-inner { padding: 26px 30px 22px; background: radial-gradient(ellipse at 50% 0%, #25121c, #101015 55%); }
.access-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #aaaab6; font: 600 10px var(--display); letter-spacing: 1.5px; }
.access-verified { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #ff738726; background: #ff25400b; color: var(--red-soft); font-size: 9px; letter-spacing: .8px; white-space: nowrap; }
.access-verified svg { width: 13px; height: 13px; stroke-width: 2.2; }
.access-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.access-tabs:has(#access-tab-feedback[hidden]) { grid-template-columns: 1fr; }
.access-tab { position: relative; display: flex; align-items: center; gap: 11px; min-height: 59px; padding: 10px 12px; border: 1px solid #ffffff12; background: #ffffff02; color: #b1b1be; text-align: left; font: 600 12px var(--body); transition: border-color .18s, background .18s; }
.access-tab.active { border-color: #ff254067; background: linear-gradient(120deg, #ff254019, #ff254005); color: var(--txt); }
.access-tab.active::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 12px; right: 12px; background: linear-gradient(90deg, var(--red), #ff254040); pointer-events: none; }
.access-tab:hover:enabled { border-color: #ff7387a0; }
.access-step { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #ffffff12; background: #ffffff03; font: 11px var(--mono); color: #a8a8b5; }
.access-tab.active .access-step, .access-tab.complete .access-step { border-color: #ff254043; background: #ff254014; color: var(--red-soft); }
.access-tab small { display: block; margin-top: 4px; font: 500 9px var(--body); letter-spacing: .7px; color: #9a8f9a; }
.access-tab.complete small { color: var(--red-soft); }
.access-step-check { display: none; width: 16px; height: 16px; margin-left: auto; color: var(--red-soft); }
.access-tab.complete .access-step-check { display: block; }
.access-emblem { display: grid; place-items: center; width: 56px; height: 56px; margin: 26px auto 17px; border: 1px solid #ff254044; background: linear-gradient(140deg, #ff25401a, #ff254006); color: var(--red-soft); box-shadow: inset 0 0 24px #ff254007; }
.access-emblem svg { width: 26px; height: 26px; }
.access-inner > h1 { margin: 0 0 10px; text-align: center; font: 600 27px var(--display); letter-spacing: -.6px; line-height: 1.2; }
.access-inner > p { max-width: 400px; margin: 0 auto; text-align: center; font: 400 14px/1.55 var(--body); color: #aaaab8; }
.access-panel { margin-top: 23px; }
.access-panel .access-browser-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; color: #9393a2; font-size: 12px; }
.access-browser-note svg { width: 14px; height: 14px; color: #b2a2af; }
.access-requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.access-requirements > span { display: flex; align-items: flex-start; gap: 10px; padding: 13px 12px; background: #ffffff03; border: 1px solid #ffffff0c; }
.access-requirements svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--red-soft); }
.access-requirements strong { display: block; font: 600 13px var(--body); color: #ddddE5; }
.access-requirements small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; color: #9e9eac; }
.access-channel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); background: #0002; }
.access-channel span { font: 600 10px var(--body); letter-spacing: .6px; color: #9393a1; }
.access-channel code { font: 10px var(--mono); color: #c0b2bd; }
.access-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.access-panel .auth-submit { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 50px; background: linear-gradient(110deg, #f82443, #ce102c); box-shadow: inset 0 1px #ffffff29; transition: background .18s, box-shadow .18s, filter .18s, transform .18s; }
.access-panel .auth-submit span { font: 700 12px var(--display); letter-spacing: 1px; }
.access-panel .auth-submit:hover:enabled { box-shadow: inset 0 1px #ffffff40, 0 0 22px #ff254024; }
.access-panel .auth-submit:active:enabled { transform: translateY(1px); filter: brightness(.95); }
.access-card button > * { pointer-events: none; }
.access-actions .gbtn { font: 600 11px var(--display); letter-spacing: .6px; }
.access-actions .gbtn svg { width: 16px; height: 16px; }
.access-panel .access-account { margin: 13px 0 0; text-align: center; font-size: 12px; color: #c5a2ae; }
.access-message { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 17px; min-height: 36px; color: #9797a6; font: 400 12px/1.5 var(--body); text-align: center; }
.access-message.error { padding: 10px 12px; background: #ff25400b; border: 1px solid #ff254030; color: #ff9bab; }
.access-message.checking { color: #c7aeb8; }
.access-message.checking::before { content: ''; flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; border: 1.5px solid #ff738733; border-top-color: var(--red-soft); border-radius: 50%; animation: spin .8s linear infinite; }
.access-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--hair); color: #9393a1; font-size: 11px; }
.access-footer button { padding: 5px 0 5px 10px; border: 0; background: transparent; color: #b6b6c3; font: 600 10px var(--display); letter-spacing: .7px; transition: color .18s; }
.access-footer button:hover { color: var(--red-soft); }
.access-card button:focus-visible { outline: 2px solid var(--red-soft); outline-offset: -3px; }
@keyframes access-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-height: 730px) { .access-overlay { padding: 45px 24px 20px; } .access-inner { padding: 20px 26px 18px; } .access-tabs { margin-top: 18px; } .access-emblem { width: 42px; height: 42px; margin: 16px auto 11px; } .access-inner > h1 { font-size: 25px; } .access-panel { margin-top: 17px; } .access-requirements > span { padding: 11px 12px; } .access-requirements { margin-bottom: 12px; } .access-message { margin-top: 12px; min-height: 30px; } .access-footer { padding-top: 13px; } }

/* Perfil vinculado e estados de confirmação. */
.discord-avatar { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; border: 1px solid #ff73874a; background: radial-gradient(circle at 30% 20%, #522335, #20141e); box-shadow: 0 0 0 3px #ff25400a; }
.discord-avatar img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font: 600 20px var(--display); color: #ffb5c0; }
.discord-avatar.has-avatar .avatar-fallback { visibility: hidden; }
.discord-handle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px var(--body); color: #aaa0ae; }
.discord-identity { display: flex; align-items: center; gap: 13px; padding: 12px 15px; margin-bottom: 15px; border: 1px solid #ff254032; background: linear-gradient(110deg, #ff25400d, #ffffff03); }
.discord-identity > div { flex: 1; min-width: 0; }
.discord-identity small { display: block; margin-bottom: 4px; font: 600 9px var(--display); letter-spacing: 1px; color: var(--red-soft); }
.discord-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px var(--body); color: #f5f2f6; }
.discord-identity .discord-handle { margin-top: 3px; }
.identity-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--red-soft); }
.access-card[data-step="feedback"] .access-emblem { display: none; }
.access-card[data-step="feedback"] .access-inner > h1 { margin-top: 23px; }
.access-panel .auth-submit[aria-busy="true"] { cursor: wait; filter: none; opacity: .9; background: linear-gradient(110deg, #7c2638, #561d2b); }
.access-panel .auth-submit[aria-busy="true"] svg { display: none; }
.access-panel .auth-submit[aria-busy="true"]::before, #access-check-feedback[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border: 1.8px solid #ffffff38; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.access-panel .auth-submit[aria-busy="true"]::before { margin-right: 10px; }
.access-reopen { display: block; margin: 13px auto 0; padding: 3px 8px; border: 0; background: transparent; color: #c9b2bf; font: 500 12px var(--body); text-decoration: underline; text-underline-offset: 4px; }
.access-reopen:hover:enabled { color: var(--red-soft); }
.access-actions .gbtn { gap: 9px; }
.access-actions .gbtn .access-check-icon { width: 18px; height: 18px; overflow: visible; stroke-width: 1.8; }
#access-check-feedback[aria-busy="true"] .access-check-icon { display: none; }
.setting-list > .account-row { display: block; padding: 15px; }
.account-row .account-profile { display: flex; align-items: center; gap: 12px; }
.account-row .account-identities { flex: 1; min-width: 0; }
.account-row .account-identities strong { font: 600 17px var(--body); margin: 4px 0; }
.account-row .account-license { margin-top: 13px; padding-top: 11px; border-top: 1px solid #ffffff0c; }
.account-row .account-keyauth { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-row .account-keyauth > span { flex-shrink: 0; font: 600 9px var(--display); letter-spacing: 1px; color: #c999a7; }
.account-row .account-keyauth strong { margin: 0; font: 600 12px var(--body); color: #e0dce3; }
.account-row .account-license p { margin-top: 6px; font: 400 10px var(--body); color: #a7a2af; }
@media (max-height: 730px) { .discord-identity { padding: 10px 12px; margin-bottom: 13px; } .access-card[data-step="feedback"] .access-inner > h1 { margin-top: 18px; } .access-card[data-step="feedback"] .access-panel { margin-top: 16px; } }

.auth-glow { position: absolute; left: -130px; top: 50%; width: 820px; height: 820px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 37, 64, .24), rgba(255, 37, 64, .06) 45%, transparent 70%); animation: auth-pulse 7s ease-in-out infinite; }
.auth-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(80% 100% at 30% 50%, #000, transparent 80%); mask-image: radial-gradient(80% 100% at 30% 50%, #000, transparent 80%); }
.auth-window-controls { position: absolute; z-index: 4; right: 20px; top: 20px; -webkit-app-region: no-drag; }
.auth-window-controls button { background: rgba(13, 13, 18, .82); }
.auth-shell { position: relative; z-index: 2; width: min(1090px, calc(100% - 84px)); height: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 430px; align-items: center; gap: clamp(58px, 8vw, 118px); }
.auth-brand { min-width: 0; padding-bottom: 10px; animation: auth-brand-in .75s cubic-bezier(.2, .8, .2, 1) both; -webkit-app-region: drag; }
.auth-brand * { -webkit-app-region: drag; }
.auth-brand > img { display: block; width: min(310px, 31vw); height: 160px; margin: 22px 0 10px; object-fit: contain; object-position: left center; filter: drop-shadow(0 18px 42px rgba(255, 37, 64, .38)); }
.auth-brand .wordmark { display: block; font-size: 18px; letter-spacing: 9px; }
.auth-brand h1 { max-width: 580px; margin: 28px 0 12px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -1.2px; }
.auth-brand h1 em { display: block; font-style: normal; color: var(--red-mid); }
.auth-brand > p { max-width: 520px; margin: 0; color: var(--mut); font-size: 13px; line-height: 1.6; }

.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; -webkit-app-region: no-drag; }
.auth-card, .auth-card * { -webkit-app-region: no-drag; }
.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: 27px; }
.auth-shield { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 37, 64, .12); border: 1px solid rgba(255, 37, 64, .34); color: var(--red-mid); }
.auth-shield svg { width: 18px; height: 18px; }
.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-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; min-height: 48px; padding: 3px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); -webkit-app-region: no-drag; }
.auth-tab { position: relative; width: 100%; min-height: 40px; padding: 0 18px; border: 0; background: transparent; color: #656570; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; transition: color .22s ease, background .22s ease, box-shadow .22s ease; }
.auth-tab:hover:enabled { color: #c4c4ce; background: rgba(255, 255, 255, .035); }
.auth-tab.active { color: #fff; background: linear-gradient(180deg, rgba(255, 37, 64, .24), rgba(255, 37, 64, .09)); box-shadow: inset 0 -2px var(--red), 0 0 18px rgba(255, 37, 64, .08); }
.auth-tab:focus-visible { outline: 1px solid var(--red-soft); outline-offset: -2px; }

.auth-field { display: block; margin-top: 16px; -webkit-app-region: no-drag; }
.auth-field[hidden] { display: none; }
.auth-field > span:first-child { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.8px; color: #7d7d89; }
.auth-field > span:first-child em { font-style: normal; font-size: 8px; color: #4f4f5b; }
.auth-input { position: relative; display: flex; align-items: center; width: 100%; min-height: 54px; padding: 0 10px 0 15px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); cursor: text; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.auth-input:focus-within { border-color: rgba(255, 37, 64, .58); background: rgba(255, 37, 64, .055); box-shadow: 0 0 0 3px rgba(255, 37, 64, .06), inset 0 0 24px rgba(255, 37, 64, .035); }
.auth-input > svg { flex-shrink: 0; width: 18px; height: 18px; margin-right: 12px; color: #696975; pointer-events: none; }
.auth-input input { flex-grow: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #f4f4f7; font-family: var(--mono); font-size: 12px; letter-spacing: .45px; user-select: text; -webkit-user-select: text; }
.auth-input input::placeholder { color: #454550; }
.auth-input button { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: #62626e; cursor: pointer; }
.auth-input button:hover { color: var(--red-soft); }
.auth-input button svg { width: 16px; height: 16px; }

.auth-remember { position: relative; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 9px; min-height: 40px; margin-top: 12px; padding: 5px 2px; color: #a9a9b4; cursor: pointer; -webkit-app-region: no-drag; }
.auth-remember input { position: absolute; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.auth-remember > span { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid rgba(255, 255, 255, .16); background: #15151b; pointer-events: none; }
.auth-remember > span i { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 10px rgba(255, 37, 64, .8); transform: scale(0); transition: transform .2s ease; }
.auth-remember input:checked + span { border-color: rgba(255, 37, 64, .55); background: rgba(255, 37, 64, .1); }
.auth-remember input:checked + span i { transform: scale(1); }
.auth-remember input:focus-visible + span { outline: 2px solid var(--red-soft); outline-offset: 2px; }
.auth-remember b { font-size: 11.5px; font-weight: 500; }
.auth-remember small { font-family: var(--mono); font-size: 9px; color: #555561; }

.auth-submit { position: relative; overflow: hidden; width: 100%; min-height: 56px; margin-top: 17px; padding: 0 24px; border: 0; background: linear-gradient(180deg, var(--red), var(--red-deep)); box-shadow: 0 14px 30px rgba(160, 8, 30, .34), inset 0 1px rgba(255, 255, 255, .25); color: #fff; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 1.3px; }
.auth-submit span, .auth-submit svg { position: relative; z-index: 3; }
.auth-submit svg { width: 17px; height: 17px; margin-left: 9px; vertical-align: middle; }
.auth-submit:hover:enabled { filter: brightness(1.1); transform: translateY(-1px); }
.auth-submit:disabled { filter: grayscale(.6); opacity: .55; cursor: wait; }
.auth-message { min-height: 34px; margin-top: 16px; display: flex; align-items: flex-start; gap: 9px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .06); }
.auth-message > span { flex-shrink: 0; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: #555561; }
.auth-message p { margin: 0; font-size: 11px; line-height: 1.5; color: #747480; }
.auth-message.checking > span { border: 1px solid var(--amber); border-right-color: transparent; background: transparent; animation: spin .8s linear infinite; }
.auth-message.checking p { color: #ae9775; }
.auth-message.error > span { background: var(--red); box-shadow: 0 0 10px rgba(255, 37, 64, .7); }
.auth-message.error p { color: #ff97a5; }
.auth-message.ok > span { background: var(--red); box-shadow: 0 0 10px rgba(255, 37, 64, .7); }
.auth-message.ok p { color: #ff9cab; }

/* =========================================================
   Janela principal
   ========================================================= */
main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-radius: 18px;
  transition: filter .35s ease, transform .35s ease;
}
body.settings-open main { filter: blur(7px) saturate(.75); transform: scale(1.012); }
body.settings-open, body.settings-open * { -webkit-app-region: no-drag !important; }
/* `-webkit-app-region` is inherited, so a full-window overlay computes to `drag` and the OS
   swallows every click as a window drag — `pointer-events: none` does not help. While the
   drawer is closed this element must have no geometry at all. */
.scrim { display: none; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(90deg, rgba(5, 5, 7, .5) 0%, rgba(5, 5, 7, .78) 58%, rgba(5, 5, 7, .9) 100%); }
body.settings-open .scrim { display: block; pointer-events: auto; animation: fade-in .3s ease both; }

/* ---- barra de título ---- */
.titlebar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  height: 56px;
  padding: 0 20px 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  -webkit-app-region: drag;
}
.titlebar > img { width: 46px; height: 28px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(255, 37, 64, .5)); }
.wordmark { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: 3.6px; line-height: 1; }
.titlebar .spacer { flex-grow: 1; }
.titlebar .gbtn { height: 32px; padding: 0 12px; font-size: 10.5px; letter-spacing: .6px; }

.status-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--hair-2);
  background: rgba(255, 255, 255, .035);
  color: var(--mut);
  white-space: nowrap;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
/* Atualização: só aparece enquanto baixa, instala ou espera o FiveM fechar. */
.update-chip { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 176, 32, .45); background: linear-gradient(180deg, rgba(255, 176, 32, .13), rgba(255, 176, 32, .05)); color: var(--amber-soft); font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .9px; white-space: nowrap; }
.update-chip svg { width: 14px; height: 14px; }
.update-chip:disabled { cursor: default; opacity: 1; }
.update-chip:enabled:hover { border-color: var(--amber); color: #fff; }
.update-chip.busy svg { animation: led 1.6s ease-in-out infinite; }
.status-light { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background .3s ease; }
#status-label { font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; }
.chip-split { width: 1px; height: 12px; background: var(--hair-2); }
#status-detail { font-size: 10.5px; color: #a6a6b2; }
.status-chip.ready { border-color: rgba(255, 37, 64, .34); background: linear-gradient(180deg, rgba(255, 37, 64, .13), rgba(255, 37, 64, .05)); color: var(--red-soft); }
.status-chip.ready .status-light { background: var(--red); animation: led 2.4s ease-in-out infinite; }
.status-chip.scanning, .status-chip.applying { border-color: rgba(255, 37, 64, .34); color: #c1c1cc; }
.status-chip.scanning .status-light, .status-chip.applying .status-light { background: transparent; border: 1.6px solid var(--red); border-right-color: transparent; animation: spin .85s linear infinite; }
.status-chip.error { border-color: rgba(255, 37, 64, .55); background: rgba(255, 37, 64, .1); color: #ff8b9b; }
.status-chip.error .status-light { background: var(--red); }
.status-chip.incompatible { border-color: rgba(255, 176, 32, .5); background: rgba(255, 176, 32, .09); color: var(--amber-soft); }
.status-chip.incompatible .status-light { background: var(--amber); }

.window-controls { display: flex; flex-shrink: 0; align-items: center; gap: 7px; margin-left: 4px; }
.window-controls button {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #0d0d12;
  color: #b9b9c4;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.window-controls button svg { width: 14px; height: 14px; }
body.window-expanded, body.window-expanded main, body.window-expanded .auth-screen, body.window-expanded .access-overlay, body.window-expanded .splash { border-radius: 0; }
.window-controls button:hover { background: #1a1a21; border-color: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-1px); }
.window-controls #close:hover { background: rgba(255, 37, 64, .2); border-color: rgba(255, 37, 64, .65); color: #ff8b9b; }

/* ---- corpo ---- */
.shell {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  min-height: 0;
  /* The compatibility notice pushes the panel down; this is the safety valve. */
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: #3f111a transparent;
  padding: 22px 28px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero { flex-shrink: 0; display: flex; align-items: center; gap: 24px; }
.hero > div { flex-grow: 1; min-width: 0; }
.eyebrow { display: block; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 3px; color: var(--red-mid); }
h1 { margin: 7px 0 4px; font-family: var(--display); font-size: clamp(30px, 3vw, 38px); font-weight: 700; letter-spacing: -.8px; line-height: 1; }
.hero p { margin: 0; font-size: 12.5px; color: var(--mut); }
#connect { height: 40px; padding: 0 16px; font-size: 11px; letter-spacing: .8px; }
#connect svg { width: 15px; height: 15px; }

/* While the notice takes room at the top, the profile module gives some back. */
.shell:has(#compatibility-notice:not([hidden])) { gap: 14px; padding-bottom: 8px; }
.shell:has(#compatibility-notice:not([hidden])) .orb { width: 92px; height: 92px; margin-top: 4px; }
.shell:has(#compatibility-notice:not([hidden])) #selected-level { font-size: 44px; }
.shell:has(#compatibility-notice:not([hidden])) #selected-name { margin-top: 8px; font-size: 19px; }
.shell:has(#compatibility-notice:not([hidden])) .module-profile { min-height: 194px; }
/* In this state the notice is the message, so the headline steps back. */
.shell:has(#compatibility-notice:not([hidden])) h1 { font-size: 30px; }
.shell:has(#compatibility-notice:not([hidden])) .hero p { display: none; }
.shell:has(#compatibility-notice:not([hidden])) .statusline { height: 30px; }

.notice {
  flex-shrink: 0;
  display: flex;
  gap: 13px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 176, 32, .45);
  background: linear-gradient(135deg, rgba(255, 176, 32, .12), rgba(20, 14, 8, .9));
  animation: rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
.notice svg { flex-shrink: 0; color: var(--amber); }
.notice strong { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; color: #fff; }
.notice span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; color: #d8b98c; }

/* The single row is capped at the grid's own height, so the columns actually compress
   instead of growing past it when the notice takes room at the top. */
.grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); gap: 20px; }
.col-left, .col-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.col-right { gap: 14px; }

.col-head { flex-shrink: 0; height: 24px; display: flex; align-items: center; gap: 10px; }
.col-head span { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 2.6px; color: #6e6e7c; }
.col-head i { flex-grow: 1; height: 1px; background: linear-gradient(90deg, var(--hair-2), transparent); }

/* ---- cartões de nível ---- */
.profile-list { flex: 1 1 auto; min-height: 0; margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.level-card {
  flex: 1 1 0;
  min-height: 96px;
  width: 100%;
  padding: 1px;
  border: 0;
  text-align: left;
  background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .28s ease;
  animation: rise .62s cubic-bezier(.2, .8, .2, 1) both;
}
.level-card:nth-child(1) { animation-delay: .04s; }
.level-card:nth-child(2) { animation-delay: .11s; }
.level-card:nth-child(3) { animation-delay: .18s; }
.level-card:hover { transform: translateY(-2px); }
.level-card:active { transform: translateY(1px); }
.level-card:focus-visible { outline: none; }
.level-card:focus-visible .card-inner { outline: 2px solid var(--red-soft); outline-offset: -3px; }

.card-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 0 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--graphite), #0c0c11);
  transition: background .28s ease;
}
.card-rail { position: absolute; left: 0; top: 26%; bottom: 26%; width: 2px; background: var(--red); box-shadow: 0 0 16px 1px rgba(255, 37, 64, .9); opacity: 0; transition: opacity .3s ease; }
.card-scan { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 37, 64, .9), transparent); }

.level-number { flex-shrink: 0; width: 62px; text-align: center; font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1; color: #55555f; transition: color .3s ease, text-shadow .3s ease; }
.level-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.level-meta { display: flex; align-items: center; gap: 9px; }
.level-chip { padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .05); font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: #7b7b88; transition: color .3s ease, background .3s ease, border-color .3s ease; }
.level-text strong { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
.level-text small { font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; transition: border-color .3s ease; }
.radio i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px rgba(255, 37, 64, .9); transform: scale(0); transition: transform .28s cubic-bezier(.2, 1.5, .5, 1); }

.level-card.selected { background: linear-gradient(140deg, rgba(255, 37, 64, .95), rgba(255, 37, 64, .2) 40%, rgba(255, 255, 255, .05)); }
/* The opaque layer underneath matters: without it the 1px red edge shows through the wash. */
.level-card.selected .card-inner { background: linear-gradient(110deg, rgba(255, 37, 64, .15), var(--ink) 48%), var(--ink); }
.level-card.selected .card-rail { opacity: 1; }
.level-card.selected .card-scan { animation: scanline 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.level-card.selected .level-number { color: #fff; text-shadow: 0 0 28px rgba(255, 37, 64, .6); }
.level-card.selected .level-chip { border-color: rgba(255, 37, 64, .45); background: rgba(255, 37, 64, .16); color: var(--red-soft); }
.level-card.selected .radio { border-color: var(--red); }
.level-card.selected .radio i { transform: scale(1); }

/* ---- chamada principal ---- */
.apply-button {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 68px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  box-shadow: 0 16px 38px rgba(160, 8, 30, .42), inset 0 1px rgba(255, 255, 255, .28);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s ease, box-shadow .22s ease, background .22s ease;
}
.apply-button span { position: relative; z-index: 5; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 1.4px; color: #fff; }
.apply-button svg { position: relative; z-index: 5; width: 19px; height: 19px; color: #fff; }
.apply-button::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: sheen 4.4s cubic-bezier(.35, .7, .4, 1) infinite; }
.apply-button:hover:enabled { transform: translateY(-2px); filter: brightness(1.1); }
.apply-button:active:enabled { transform: translateY(1px); }
.apply-button:disabled { background: #17171d; box-shadow: inset 0 0 0 1px var(--hair); }
.apply-button:disabled span, .apply-button:disabled svg { color: var(--dim); }
.apply-button:disabled::after { animation: none; }

/* ---- módulos da coluna direita ---- */
.module { flex-shrink: 0; padding: 1px; }
.module-body { height: 100%; padding: 18px 20px; overflow: hidden; background: var(--carbon); display: flex; flex-direction: column; }
.module-label { font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 2.4px; color: #6e6e7c; }

.module-profile { flex: 1 1 auto; min-height: 224px; background: linear-gradient(150deg, rgba(255, 37, 64, .5), rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .03)); animation: rise .62s cubic-bezier(.2, .8, .2, 1) .1s both; }
.module-profile .module-body { align-items: center; background: linear-gradient(170deg, rgba(255, 37, 64, .09), rgba(10, 10, 14, .98) 52%), var(--carbon); }
.module-profile .module-label { align-self: flex-start; }

.orb { position: relative; flex-shrink: 0; width: 116px; height: 116px; margin-top: 8px; display: grid; place-items: center; }
.orb i, .orb b { position: absolute; border-radius: 50%; }
.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; }
.orb .ring-b { inset: 11px; border: 1px dashed rgba(255, 255, 255, .14); animation: spin-reverse 13s linear infinite; }
.orb .core { inset: 18px; background: radial-gradient(circle, rgba(255, 37, 64, .24), rgba(255, 37, 64, .04) 62%, transparent 70%); box-shadow: inset 0 0 34px rgba(255, 37, 64, .18); }
#selected-level { position: relative; font-family: var(--display); font-size: 54px; font-weight: 300; line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(255, 37, 64, .6); }

#selected-name { margin-top: 12px; font-family: var(--display); font-size: 22px; font-weight: 600; text-align: center; }
#selection-description { margin: 5px 0 0; max-width: 260px; text-align: center; font-size: 12px; line-height: 1.55; color: #7e7e8c; }
.module-split { width: 100%; height: 1px; margin-top: auto; background: var(--hair); }
.active-row { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; }
.active-row > div { flex-grow: 1; min-width: 0; }
.active-row small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--dim); }
#current-name { font-family: var(--display); font-size: 13px; font-weight: 600; color: #c9c9d4; }
#restore { height: 32px; padding: 0 12px; font-size: 10px; letter-spacing: .8px; }
#restore svg { width: 13px; height: 13px; }

.module-fps { flex: 0 1 246px; min-height: 246px; background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); animation: rise .62s cubic-bezier(.2, .8, .2, 1) .18s both; }
.module-fps .module-body { padding: 16px 20px; }
.module-head { display: flex; align-items: center; gap: 9px; }
.module-head svg { width: 14px; height: 14px; color: var(--red-mid); }
.module-head .spacer { flex-grow: 1; }
.module-chip { padding: 3px 8px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); font-family: var(--display); font-size: 8px; font-weight: 700; letter-spacing: .8px; color: #7b7b88; white-space: nowrap; transition: color .3s ease, border-color .3s ease, background .3s ease; }
.module-chip.on { border-color: rgba(255, 37, 64, .38); background: rgba(255, 37, 64, .14); color: var(--red-soft); }
.module-chip.amber { border-color: rgba(255, 176, 32, .45); background: rgba(255, 176, 32, .12); color: var(--amber-soft); }
.module-fps .module-label { white-space: nowrap; }
.module-fps .module-chip { padding-inline: 6px; font-size: 7px; letter-spacing: .35px; }

.fps-read { flex-shrink: 0; margin-top: 6px; display: flex; align-items: flex-end; gap: 14px; }
#fps-value { font-family: var(--mono); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: var(--dim); transition: color .3s ease, text-shadow .3s ease; }
.fps-unit { padding-bottom: 7px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--dim); transition: color .3s ease; }
.fps-meter { flex-grow: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; height: 34px; }
.fps-meter i { width: 5px; height: 100%; transform-origin: bottom center; transform: scaleY(.26); background: linear-gradient(180deg, #2a2a33, #16161c); transition: background .3s ease; }
#fps-detail { display: block; margin-top: 8px; overflow: hidden; font-size: 11.5px; line-height: 15px; color: #7e7e8c; text-overflow: ellipsis; white-space: nowrap; }
.fps-actions { flex-shrink: 0; margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 8px; }
.fps-actions .gbtn { height: 38px; font-size: 10.5px; letter-spacing: .8px; }

.fps-levels { flex-shrink: 0; margin: 8px 0 10px; display: grid; grid-template-columns: 1fr repeat(2, 54px); align-items: center; gap: 7px; }
.fps-levels > span { font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: #6e6e7c; }
.fps-level { height: 28px; border: 1px solid var(--hair-2); background: #101015; color: #787885; font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.fps-level:hover:not(:disabled) { border-color: rgba(255, 37, 64, .4); color: #d8d8df; }
.fps-level.selected { border-color: rgba(255, 37, 64, .58); background: rgba(255, 37, 64, .14); color: var(--red-soft); box-shadow: 0 0 14px rgba(255, 37, 64, .12); }
.fps-level:disabled { cursor: default; opacity: .46; }
.module-fps.spoofed .fps-level.selected { border-color: rgba(255, 176, 32, .56); background: rgba(255, 176, 32, .13); color: var(--amber-soft); box-shadow: 0 0 14px rgba(255, 176, 32, .12); }
/* O mesmo slider serve ao Kx Crosshair Studio (.cs-range). */
.cs-range { --fill: 50%; flex-grow: 1; min-width: 0; height: 18px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cs-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--red-deep), var(--red) var(--fill), #1e1e26 var(--fill)); box-shadow: 0 0 14px rgba(255, 37, 64, .16); }
.cs-range::-webkit-slider-thumb { width: 12px; height: 18px; margin-top: -7px; background: linear-gradient(177deg, #fff, #d3d6dd 48%, #8a8e98); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); -webkit-appearance: none; appearance: none; transition: transform .15s ease; }
.cs-range:hover::-webkit-slider-thumb, .cs-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.cs-range:focus { outline: 0; }
.cs-range:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 3px; }

.module-fps.live #fps-value { color: #fff; text-shadow: 0 0 26px rgba(255, 37, 64, .45); }
.module-fps.live .fps-unit { color: var(--red-mid); }
.module-fps.live .fps-meter i { background: linear-gradient(180deg, var(--red), rgba(255, 37, 64, .15)); animation: bar 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.module-fps.spoofed #fps-value { text-shadow: 0 0 26px rgba(255, 176, 32, .45); }
.module-fps.spoofed .fps-unit { color: var(--amber); }
.module-fps.spoofed .fps-meter i { background: linear-gradient(180deg, var(--amber), rgba(255, 176, 32, .15)); }
.fps-meter i:nth-child(1) { animation-delay: 0s; }
.fps-meter i:nth-child(2) { animation-delay: .12s; }
.fps-meter i:nth-child(3) { animation-delay: .26s; }
.fps-meter i:nth-child(4) { animation-delay: .38s; }
.fps-meter i:nth-child(5) { animation-delay: .5s; }
.fps-meter i:nth-child(6) { animation-delay: .64s; }
.fps-meter i:nth-child(7) { animation-delay: .78s; }
.fps-meter i:nth-child(8) { animation-delay: .9s; }

.auto-row { flex-shrink: 0; height: 58px; display: flex; align-items: center; gap: 13px; padding: 0 18px; background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .06); animation: rise .62s cubic-bezier(.2, .8, .2, 1) .26s both; }
.auto-icon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; background: rgba(255, 37, 64, .1); border: 1px solid rgba(255, 37, 64, .26); color: var(--red-mid); }
.auto-icon svg { width: 16px; height: 16px; }
.auto-row > div { flex-grow: 1; min-width: 0; }
.auto-row small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--dim); }
.auto-row strong { font-family: var(--display); font-size: 13px; font-weight: 600; color: #c9c9d4; }

/* ---- interruptor ---- */
.switch { position: relative; flex-shrink: 0; display: block; width: 48px; height: 27px; }
.switch, .switch * { -webkit-app-region: no-drag; }
.switch input { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch > span { position: absolute; inset: 0; border: 1px solid var(--hair-2); border-radius: 99px; background: #17171e; transition: background .25s ease, border-color .25s ease; pointer-events: none; }
.switch i { position: absolute; left: 3px; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--dim); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), background .25s ease, box-shadow .25s ease; pointer-events: none; }
.switch input:checked + span { border-color: rgba(255, 37, 64, .5); background: rgba(255, 37, 64, .17); }
.switch input:checked + span i { transform: translateX(19px); background: var(--red); box-shadow: 0 0 12px rgba(255, 37, 64, .7); }
.switch input:focus-visible + span { outline: 2px solid var(--red-soft); outline-offset: 3px; }

/* ---- rodapé ---- */
.statusline { flex-shrink: 0; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 4px; }
#message-bar { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #ff8b9b; }
.message-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); animation: led 2.4s ease-in-out infinite; }
.statusline .spacer { flex-grow: 1; }
#tech-line { font-family: var(--mono); font-size: 10px; color: var(--faint); }

/* =========================================================
   Gaveta de opções
   ========================================================= */
.drawer { position: fixed; z-index: 40; right: 16px; top: 16px; bottom: 16px; width: min(452px, calc(100% - 32px)); padding: 1px; background: linear-gradient(160deg, rgba(255, 37, 64, .75), rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .03)); animation: slide-in .5s cubic-bezier(.2, .9, .25, 1) both; -webkit-app-region: no-drag; }
.drawer * { -webkit-app-region: no-drag; }
.drawer-body { height: 100%; padding: 22px 24px; overflow: auto; scrollbar-width: thin; scrollbar-color: #3f111a transparent; background: linear-gradient(175deg, rgba(255, 37, 64, .07), rgba(9, 9, 12, .99) 38%), #090a0d; box-shadow: -30px 0 70px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
.drawer-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.drawer-head > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(255, 37, 64, .12); border: 1px solid rgba(255, 37, 64, .3); color: var(--red-mid); }
.drawer-head > span:first-child svg { width: 16px; height: 16px; }
.drawer-head > div { flex-grow: 1; }
.drawer-head small { display: block; font-family: var(--display); font-size: 9.5px; font-weight: 700; letter-spacing: 2.4px; color: var(--red-mid); }
.drawer-head strong { font-family: var(--display); font-size: 20px; font-weight: 600; }
#settings-close { width: 34px; height: 34px; padding: 0; }
#settings-close svg { width: 15px; height: 15px; }

.setting-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.account-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid rgba(255, 37, 64, .22); background: linear-gradient(120deg, rgba(255, 37, 64, .09), rgba(255, 255, 255, .02)); }
.account-icon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 37, 64, .3); background: rgba(255, 37, 64, .11); color: var(--red-soft); }
.account-icon svg { width: 16px; height: 16px; }
.account-row > div { flex-grow: 1; min-width: 0; }
.account-row small { display: block; font-family: var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.7px; color: var(--red-mid); }
.account-row strong { display: block; overflow: hidden; margin-top: 2px; font-family: var(--display); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-row p { margin: 2px 0 0; font-family: var(--mono); font-size: 9px; color: #6f6f7b; }
#auth-logout, #update-action { flex-shrink: 0; height: 30px; padding: 0 11px; font-size: 9px; letter-spacing: 1px; }
.update-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 17px; background: rgba(255, 255, 255, .022); border: 1px solid rgba(255, 255, 255, .06); transition: background .22s ease, border-color .22s ease; }
.setting-row:hover { background: rgba(255, 255, 255, .035); border-color: rgba(255, 37, 64, .24); }
.setting-row > div { flex-grow: 1; min-width: 0; }
.setting-row strong { display: block; font-family: var(--display); font-size: 14px; font-weight: 600; }
.setting-row p { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: #84848f; }
.setting-row .switch { margin-top: 2px; }
.shortcut-row { margin-top: 10px; display: flex; gap: 6px; }
#auto-apply-detail { display: inline-block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; color: #ff6076; }
.modules-setting { align-items: center; border-color: rgba(255, 37, 64, .13); background: linear-gradient(120deg, rgba(255, 37, 64, .055), rgba(255, 255, 255, .018)); }
.modules-setting > div { flex: 1; }
.module-state { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-family: var(--mono); font-size: 9.5px; color: #777783; }
.module-state i { width: 5px; height: 5px; border-radius: 50%; background: #555560; box-shadow: 0 0 0 3px rgba(255,255,255,.025); }
.modules-setting[data-state="installed"] .module-state { color: #ff7588; }
.modules-setting[data-state="installed"] .module-state i { background: var(--red); box-shadow: 0 0 9px rgba(255, 37, 64, .75); }
.modules-setting[data-state="paused"] .module-state { color: var(--amber-soft); }
.modules-setting[data-state="paused"] .module-state i { background: var(--amber); box-shadow: 0 0 9px rgba(255, 176, 32, .55); }
#modules-action { flex: 0 0 auto; min-width: 128px; height: 34px; padding: 0 12px; font-size: 8.5px; letter-spacing: 1px; white-space: nowrap; }
#modules-action.danger { border-color: rgba(255, 37, 64, .34); color: #ff8b9b; }
#modules-action.confirm { background: rgba(255, 37, 64, .17); border-color: rgba(255, 37, 64, .64); color: #ffd7dd; box-shadow: 0 0 20px rgba(255, 37, 64, .11); }


.compat-row { display: flex; align-items: center; gap: 14px; padding: 15px 17px; background: rgba(255, 255, 255, .022); border: 1px solid rgba(255, 255, 255, .06); }
.compat-row > span:first-child { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; background: rgba(255, 37, 64, .1); border: 1px solid rgba(255, 37, 64, .26); color: var(--red-mid); }
.compat-row > span:first-child svg { width: 15px; height: 15px; }
.compat-row > div { flex-grow: 1; min-width: 0; }
.compat-row small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: var(--dim); }
.compat-row strong { font-family: var(--display); font-size: 13.5px; font-weight: 600; color: #c9c9d4; }
#compat-chip { flex-shrink: 0; 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; }
#compat-chip.ok { border-color: rgba(255, 37, 64, .36); background: rgba(255, 37, 64, .14); color: var(--red-soft); }
#compat-chip.bad { border-color: rgba(255, 176, 32, .45); background: rgba(255, 176, 32, .12); color: var(--amber-soft); }


/* =========================================================
   Novidades da versão
   ========================================================= */
body.release-notes-open main {
  filter: blur(9px) saturate(.62) brightness(.48);
  transform: none;
}
body.release-notes-open, body.release-notes-open * { -webkit-app-region: no-drag !important; }
.release-notes-overlay {
  position: fixed;
  z-index: 80;
  inset: 1px;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
  border-radius: 17px;
  background:
    radial-gradient(circle at 51% 37%, rgba(86, 7, 22, .24), transparent 42%),
    rgba(1, 1, 3, .70);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: release-backdrop-in .32s ease both;
}
.release-notes-overlay[hidden] { display: none; }
.release-notes-card {
  position: relative;
  width: min(700px, calc(100vw - 80px));
  max-height: calc(100vh - 72px);
  padding: 1px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  background: linear-gradient(145deg, rgba(255, 37, 64, .78), rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, .035) 74%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .82), 0 0 52px rgba(255, 37, 64, .09);
  animation: release-card-in .48s cubic-bezier(.18, .88, .22, 1) both;
}
.release-notes-card-inner {
  position: relative;
  max-height: calc(100vh - 74px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 37, 64, .42) transparent;
  padding: 26px 28px 20px;
  clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px);
  background:
    linear-gradient(180deg, rgba(51, 10, 20, .73) 0, rgba(13, 13, 18, .97) 43%, rgba(10, 10, 14, .99) 100%),
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.012) 8px 9px);
}
.release-notes-card-inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  opacity: .18;
  background: linear-gradient(115deg, transparent 0 48%, rgba(255, 255, 255, .035) 50%, transparent 52%);
}
.release-notes-rail {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 54px;
  width: 2px;
  height: 116px;
  background: var(--red);
  box-shadow: 0 0 18px 2px rgba(255, 37, 64, .82);
}
.release-notes-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.release-notes-head > img {
  width: 58px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px rgba(255, 37, 64, .42));
}
.release-notes-heading { min-width: 0; }
.release-notes-heading small {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2.4px;
  color: var(--red-mid);
}
.release-notes-heading h2 {
  overflow: hidden;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: #efeff4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.release-notes-version {
  padding: 7px 12px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  border: 1px solid rgba(255, 37, 64, .55);
  background: rgba(255, 37, 64, .12);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ff6076;
  white-space: nowrap;
}
.release-notes-intro {
  position: relative;
  z-index: 2;
  margin: 22px 0 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a8a97;
}
.release-notes-section-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.release-notes-section-title span {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #777785;
}
.release-notes-section-title i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), transparent);
}
.release-notes-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.release-note-item {
  --release-order: 0;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 15px 12px 10px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(12, 12, 17, .78);
  animation: release-row-in .42s cubic-bezier(.2, .85, .25, 1) both;
  animation-delay: calc(.14s + var(--release-order) * .06s);
}
.release-note-item:first-child {
  border-color: rgba(255, 37, 64, .38);
  background: linear-gradient(90deg, rgba(255, 37, 64, .09), rgba(9, 9, 13, .86) 28%);
}
.release-note-item:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 2px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 37, 64, .7);
}
.release-note-number {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  color: #51515c;
}
.release-note-item:first-child .release-note-number { color: #fff; }
.release-note-item > div { min-width: 0; }
.release-note-item b {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  color: #f0f0f5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.release-note-item p {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #a1a1b0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.release-note-tag {
  min-width: 62px;
  padding: 4px 8px;
  transform: skewX(-7deg);
  border: 1px solid rgba(255, 37, 64, .46);
  background: rgba(255, 37, 64, .08);
  font-family: var(--mono);
  font-size: 7px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  color: #ff536a;
}
.release-notes-confirm {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 100%;
  height: 55px;
  margin-top: 16px;
  overflow: hidden;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  border: 0;
  background: linear-gradient(95deg, #e71333, #f21d3c 58%, #d50d2b);
  box-shadow: 0 12px 30px rgba(226, 15, 47, .2);
  color: #fff;
  cursor: pointer;
}
.release-notes-confirm::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transition: transform .65s ease;
}
.release-notes-confirm:hover::before,
.release-notes-confirm:focus-visible::before { transform: translateX(110%) skewX(-18deg); }
.release-notes-confirm:focus-visible { outline: 2px solid rgba(255, 255, 255, .88); outline-offset: 3px; }
.release-notes-confirm:disabled { opacity: .62; cursor: wait; }
.release-notes-confirm span,
.release-notes-confirm b {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
}
.release-notes-confirm b { font-size: 18px; font-weight: 500; }
.release-notes-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .8px;
  color: #494955;
}
@keyframes release-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes release-card-in { from { opacity: 0; transform: translateY(20px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes release-row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

@media (max-height: 720px) {
  .release-notes-overlay { padding: 24px; }
  .release-notes-card { max-height: calc(100vh - 48px); }
  .release-notes-card-inner { max-height: calc(100vh - 50px); padding: 20px 24px 15px; }
  .release-notes-intro { margin: 15px 0 13px; }
  .release-note-item { min-height: 56px; }
  .release-notes-confirm { height: 48px; margin-top: 12px; }
}
@media (max-width: 820px) {
  .release-notes-card { width: calc(100vw - 44px); }
  .release-notes-head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .release-notes-head > img { width: 48px; height: 36px; }
  .release-notes-version { grid-column: 2; justify-self: start; margin-top: 3px; }
  .release-note-item { grid-template-columns: 40px minmax(0, 1fr); }
  .release-note-tag { grid-column: 2; justify-self: start; margin-top: 2px; }
}

/* =========================================================
   Aviso flutuante
   ========================================================= */
/* Anchored to the corner so it never covers Apply. It overlaps the auto-detect switch, so it
   must not re-declare a drag region over it (see the note on .scrim). */
#toast {
  position: fixed;
  z-index: 50;
  -webkit-app-region: no-drag;
  right: 22px;
  bottom: 14px;
  max-width: min(560px, calc(100vw - 44px));
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: rgba(22, 8, 12, .97);
  border: 1px solid rgba(255, 37, 64, .55);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 37, 64, .1);
  color: #ffc2cb;
  font-size: 12.5px;
  animation: toast-in .45s cubic-bezier(.2, .9, .25, 1) both;
}
#toast .toast-icon { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; background: rgba(255, 37, 64, .18); color: var(--red-soft); }
#toast .toast-icon svg { width: 14px; height: 14px; }
/* Confirmação: neutro, com o acento vermelho só no ícone. */
#toast[data-kind="ok"] { background: rgba(14, 14, 19, .97); border-color: rgba(255, 255, 255, .16); color: #e4e4ec; }
#toast[data-kind="ok"] .toast-icon { background: rgba(255, 37, 64, .14); }
#toast[data-kind="info"] { background: rgba(18, 13, 9, .98); border-color: rgba(255, 176, 32, .48); color: #ffe1ad; }
#toast[data-kind="info"] .toast-icon { background: rgba(255, 176, 32, .13); color: var(--amber-soft); }
/* Com o Studio aberto, o aviso sobe acima do rodapé de ações. */
body.studio-active #toast { bottom: 74px; }

/* =========================================================
   Abertura
   ========================================================= */
.splash {
  position: fixed;
  z-index: 60;
  inset: 1px;
  border-radius: 17px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #1c060d 0%, #0b070c 38%, #050507 72%);
  transition: opacity .3s ease, transform .3s ease;
}
.splash.leaving { opacity: 0; transform: scale(1.02); pointer-events: none; }
.splash-halo { position: absolute; left: 50%; top: 44%; width: 980px; height: 700px; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 37, 64, .34), rgba(255, 37, 64, .08) 52%, transparent 72%); animation: halo 5.5s ease-in-out infinite; }
.splash-ring { position: absolute; left: 50%; top: 44%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.splash-ring.r1 { width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .06); }
.splash-ring.r2 { width: 700px; height: 700px; border: 1px dashed rgba(255, 37, 64, .14); animation: orbit 34s linear infinite; }
.splash-ring.r3 { width: 860px; height: 860px; border: 1px solid rgba(255, 255, 255, .035); }
.splash .tex { -webkit-mask-image: radial-gradient(90% 80% at 50% 46%, #000 0, transparent 72%); mask-image: radial-gradient(90% 80% at 50% 46%, #000 0, transparent 72%); }
.splash .vig { background: radial-gradient(120% 100% at 50% 44%, transparent 34%, rgba(0, 0, 0, .82) 100%); }

.splash-actions { position: absolute; z-index: 3; right: 22px; top: 22px; display: flex; gap: 8px; }
.splash-actions .gbtn { height: 32px; padding: 0 13px; font-size: 10.5px; letter-spacing: 1.2px; background: rgba(255, 255, 255, .04); }
.splash-actions #splash-close { width: 32px; padding: 0; }
.splash-actions #splash-close svg { width: 14px; height: 14px; }

.splash-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 40px; }
/* Splash text effects and compact sizing are defined in splash/splash.css. */
.splash-content > img { width: min(380px, 42vw); height: 228px; object-fit: contain; filter: drop-shadow(0 18px 46px rgba(255, 37, 64, .42)); animation: reveal .8s cubic-bezier(.2, .8, .2, 1) both; }
.splash-content .wordmark { margin-top: 22px; font-size: 19px; letter-spacing: 11px; animation: rise .55s cubic-bezier(.2, .8, .2, 1) .16s both; }
.splash-content h2 { margin: 18px 0 0; font-family: var(--display); font-size: 26px; font-weight: 500; letter-spacing: -.4px; color: #d6d6e0; animation: rise .55s cubic-bezier(.2, .8, .2, 1) .26s both; }
.splash-content h2 em { font-style: normal; color: var(--red-mid); }

.loading-block { width: 420px; max-width: 60vw; margin-top: 46px; animation: rise .55s cubic-bezier(.2, .8, .2, 1) .36s both; }
.loading-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.loading-line span { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 2.2px; color: var(--mut); }
.loading-line strong { font-family: var(--mono); font-size: 15px; font-weight: 700; color: #fff; }
.progress-wrap { position: relative; height: 5px; border-radius: 99px; overflow: hidden; background: #1a151b; }
.progress-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); transform: translate3d(-100%, 0, 0); animation: sweep 1.6s cubic-bezier(.4, 0, .5, 1) infinite; }
#loading-progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 5px; border: 0; background: transparent; }
#loading-progress::-webkit-progress-bar { background: transparent; }
#loading-progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #8e0a1e, var(--red) 62%, #ffb9c2); box-shadow: 0 0 18px rgba(255, 37, 64, .6); transition: width .2s linear; }

.boot-line { margin-top: 26px; display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 10.5px; color: #7e7e8c; animation: rise .55s cubic-bezier(.2, .8, .2, 1) .48s both; }
.boot-line i { width: 3px; height: 3px; border-radius: 50%; background: #34343e; }
.boot-line em { font-style: normal; color: var(--red-mid); animation: blink 1.1s steps(2, end) infinite; }

/* =========================================================
   Movimento
   ========================================================= */
@keyframes breathe { 0%, 100% { opacity: .7; transform: translate(-50%, 0) scale(1); } 50% { opacity: 1; transform: translate(-50%, 0) scale(1.07); } }
@keyframes breathe-2 { 0%, 100% { opacity: 1; transform: scale(1.06); } 50% { opacity: .7; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes led { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 37, 64, .5), 0 0 14px rgba(255, 37, 64, .85); } 50% { box-shadow: 0 0 0 7px rgba(255, 37, 64, 0), 0 0 20px rgba(255, 37, 64, .4); } }
@keyframes sheen { from { transform: translate3d(-170%, 0, 0) skewX(-14deg); } to { transform: translate3d(470%, 0, 0) skewX(-14deg); } }
@keyframes scanline { 0% { top: -2%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 102%; opacity: 0; } }
@keyframes bar { 0%, 100% { transform: scaleY(.26); } 50% { transform: scaleY(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo { 0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes reveal { 0% { opacity: 0; transform: translateY(26px) scale(.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sweep { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(240%, 0, 0); } }
@keyframes blink { 50% { opacity: .2; } }
@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; } }
@keyframes auth-out { to { opacity: 0; transform: scale(1.025); } }

/* =========================================================
   Janelas menores (a janela varia de 900×680 a 1300×820)
   ========================================================= */
@media (max-height: 760px) {
  .auth-brand > img { height: 118px; margin-top: 14px; }
  .auth-brand h1 { margin-top: 18px; font-size: 34px; }
  .auth-card-inner { padding: 21px 26px 19px; }
  .auth-card-head { margin-bottom: 18px; }
  .auth-field { margin-top: 12px; }
  .auth-input { min-height: 52px; }
  .auth-submit { min-height: 54px; margin-top: 14px; }
  .auth-message { margin-top: 12px; padding-top: 10px; }
  .shell { padding: 16px 22px 10px; gap: 14px; }
  h1 { margin: 5px 0 3px; }
  .orb { width: 96px; height: 96px; margin-top: 4px; }
  #selected-level { font-size: 44px; }
  #selected-name { margin-top: 8px; font-size: 19px; }
  .module-profile { min-height: 196px; }
  .module-fps { flex-basis: 192px; min-height: 188px; }
  .module-fps .module-body { padding: 12px 18px; }
  .fps-levels { margin: 6px 0 8px; }
  #fps-detail { margin-top: 6px; }
  .auto-row { height: 54px; }
  #fps-value { font-size: 38px; }
  .apply-button { height: 58px; margin-top: 12px; }
  .level-card { min-height: 84px; }
  .level-number { font-size: 42px; width: 52px; }
  .statusline { height: 30px; }
}

/* 768p screens get the 680 px window: the profile orb gives the FPS slider its room. */
@media (max-height: 700px) {
  .col-right { gap: 10px; }
  .orb, .shell:has(#compatibility-notice:not([hidden])) .orb { width: 72px; height: 72px; margin-top: 2px; }
  #selected-level, .shell:has(#compatibility-notice:not([hidden])) #selected-level { font-size: 34px; }
  #selected-name, .shell:has(#compatibility-notice:not([hidden])) #selected-name { margin-top: 6px; font-size: 18px; }
  .module-profile { min-height: 186px; }
}

@media (max-width: 1080px) {
  .auth-shell { width: calc(100% - 58px); grid-template-columns: minmax(0, 1fr) 390px; gap: 45px; }
  .auth-brand h1 { font-size: 34px; }
  .grid { grid-template-columns: minmax(0, 1fr) 344px; gap: 16px; }
  .card-inner { gap: 14px; padding: 0 16px; }
  .level-text strong { font-size: 18px; }
  .titlebar { padding: 0 16px 0 18px; gap: 12px; }
  #status-detail, .chip-split { display: none; }
}

/* Below the real minimum window width the two columns stack and the panel scrolls. */
@media (max-width: 760px) {
  .auth-shell { width: calc(100% - 38px); grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card { width: min(430px, 100%); margin: auto; }
  .shell { overflow: auto; scrollbar-width: thin; scrollbar-color: #3f111a transparent; }
  .grid { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); }
  .profile-list { flex: 0 0 auto; }
  .level-card { min-height: 92px; }
  .module-profile { flex: 0 0 auto; }
  .module-fps { flex: 0 0 auto; height: 214px; }
  .titlebar .wordmark, #settings-button span, #connect span { display: none; }
  #settings-button, #connect { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  main, .auth-screen, .splash, .level-card, .apply-button, .gbtn, .switch i, .radio i { transition-duration: .01ms; }
  .fps-meter i { transform: scaleY(.7); }
  .level-card.selected .card-scan { opacity: 0; }
}