/* =====================================================================
   client.css — folha de estilo COMPLETA do cliente (/acesso e /gerar).

   Autossuficiente: nao importa nada. As paginas do cliente carregam apenas
   este arquivo.

   FRONTEIRA DO PROJETO:
     cliente  ->  client.css   (este arquivo)
     admin    ->  admin-ui.css

   As duas superficies nao compartilham nenhuma folha. Antes compartilhavam, e
   isso causou bugs reais: o `.formStack{max-width:420px; margin:auto}` do
   admin.css vazava e deixava o formulario da tela da key estreito e
   centralizado, desalinhado do texto acima.

   Se precisar de um estilo novo no cliente, o lugar e aqui. Nao volte a
   linkar style.css, base.css, components.css, admin.css ou overrides.css
   nas paginas do cliente.

   Ordem abaixo = exatamente a ordem em que o antigo style.css aplicava os
   @import, para a cascata permanecer identica:
     1. base        (variaveis de cor)
     2. components  (card, container, row, msg, botoes, campos)
     3. cliente     (tudo que e especifico de /acesso e /gerar)
   ===================================================================== */


/* ============================ 1. BASE ============================ */
/* (era /assets/css/base.css) */

html{
  height: 100%;
}
:root{color-scheme:dark;--border:#243245;--bg:#0b0f14;--card:#111826;--card2:#0e1522;--text:#e8eef6;--muted:rgba(232,238,246,.8);--accent:#3a8bfd;--success:#2ea043;--danger:#f85149;--warn:#f0b429}

/* ========================= 2. COMPONENTS ========================= */
/* (era /assets/css/components.css) */

/* ===== UI PATCH ===== */
html, body { overflow: hidden; }

body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

a{color:#8ab4ff}

.container{
  max-width:720px;
  margin:0 auto;
  padding:24px;
  box-sizing:border-box;
}

.card{
  max-width:100%;
  box-sizing:border-box;
  padding:18px;
  border:1px solid #1f2a3a;
  border-radius:12px;
  background:var(--card);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

input,
button,
textarea,
select{
  font:inherit;
  border-radius:10px;
  border:1px solid #243245;
  background:#0f1624;
  color:var(--text);
  padding:10px 12px;
}

button {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: 1px solid #243245;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
button:active { transform: scale(.98); }
button:disabled{opacity:.6;cursor:not-allowed}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
}
.msg.ok{background:rgba(46,160,67,.15);border-color:rgba(46,160,67,.45)}
.msg.err{background:rgba(248,81,73,.12);border-color:rgba(248,81,73,.45)}

.small{opacity:.8;font-size:.9rem}

hr{border:0;border-top:1px solid #1f2a3a;margin:16px 0}

input[type=file] {
  border: 1px dashed #3b82f6;
  padding: 8px;
  border-radius: 8px;
  max-width: 100%;
}


/* ===== Buttons polish ===== */
button{
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, filter .15s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
button:hover:not(:disabled){
  border-color: rgba(58,139,253,.55);
  filter: brightness(1.08);
}
button:active:not(:disabled){
  transform: translateY(1px);
  filter: brightness(0.98);
}
button.success{
  background: linear-gradient(180deg, rgba(46,160,67,.20), rgba(46,160,67,.08));
  border-color: rgba(46,160,67,.55);
}
button.success:hover:not(:disabled){ box-shadow: 0 10px 24px rgba(46,160,67,.12); }
button.secondary{
  background: rgba(138,180,255,.06);
}
button.secondary:hover:not(:disabled){ box-shadow: 0 10px 24px rgba(58,139,253,.10); }
button.danger{
  background: linear-gradient(180deg, rgba(248,81,73,.18), rgba(248,81,73,.06));
  border-color: rgba(248,81,73,.55);
}
button.danger:hover:not(:disabled){ box-shadow: 0 10px 24px rgba(248,81,73,.10); }

/* ===== Admin forms layout (prevent overflow) ===== */
.field{min-width:0}
.field input,.field textarea,.field select{width:100%; max-width:100%}

/* ====================== 3. ESPECIFICO DO CLIENTE ====================== */
/* (era /assets/css/client.css) */

/* ===== Client theme (Home / Gerar) ===== */
body.clientPage{
  min-height: 100vh;
  margin: 0;
  overflow: auto;
  background:
    radial-gradient(circle at top, rgba(37,99,235,.18), transparent 35%),
    #070d18;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

body.clientPage .container{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
}

body.clientPage .container.center-screen{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.clientPage .authModal{
  width: 100%;
  max-width: 780px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #263852;
  background: rgba(16,24,39,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

body.clientPage .authHeader{
  padding: 18px;
  text-align: center;
  border-bottom: 1px solid #263852;
  background: linear-gradient(180deg, #1b2b46, #111b2d);
}

body.clientPage .authHeaderInner{
  display: flex;
  align-items: center;
  justify-content: center;
}

body.clientPage .authTitle{
  width: 100%;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
}

body.clientPage .authBody{
  padding: 18px;
}

body.clientPage .small{
  color: #aebbd1;
  font-size: 14px;
  line-height: 1.5;
  opacity: 1;
}

body.clientPage .hidden{
  display: none !important;
}

body.clientPage .clientLead{
  margin: 0;
}

body.clientPage .formStack{
  display: grid;
  gap: 16px;
  margin-top: 16px;
  /* O admin.css define .formStack com max-width:420px e margens automaticas, e ele
     vaza para ca porque o cliente carrega /assets/style.css (que o importa). Sem
     estes tres resets o formulario ficava estreito e centralizado, desalinhado do
     paragrafo acima, que ocupa a largura toda. */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.clientPage label,
body.clientPage .field{
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

body.clientPage .inputWithIcon{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

body.clientPage .inputWithIcon .icon{
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: #aebbd1;
  opacity: .9;
  pointer-events: none;
}

body.clientPage input,
body.clientPage button,
body.clientPage textarea{
  font: inherit;
}

body.clientPage input{
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #263852;
  outline: none;
  background: #070d18;
  color: #ffffff;
}

body.clientPage .inputWithIcon input{
  padding-left: 44px;
}

body.clientPage input:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

body.clientPage button{
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  color: #ffffff;
  background: #2563eb;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body.clientPage button:hover:not(:disabled){
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.clientPage button:active:not(:disabled){
  transform: translateY(1px);
}

body.clientPage button:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

body.clientPage button.success{
  width: 100%;
  background: #2563eb;
}

body.clientPage button.success:hover:not(:disabled){
  background: #1d4ed8;
  box-shadow: 0 12px 28px rgba(37,99,235,.18);
}

body.clientPage button.secondary{
  border: 1px solid #263852;
  background: #142034;
}

body.clientPage button.danger{
  border: 1px solid rgba(248,113,113,.42);
  background: rgba(127,29,29,.34);
  color: #fecaca;
}

body.clientPage button.danger:hover:not(:disabled){
  background: rgba(153,27,27,.48);
  box-shadow: 0 12px 28px rgba(248,113,113,.12);
}

body.clientPage .full{
  width: 100%;
}

body.clientPage .row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

body.clientPage .genActions{
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

body.clientPage .genActions #btnGerar{
  width: 100%;
}

body.clientPage .msg{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #263852;
  background: rgba(0,0,0,.20);
  color: #aebbd1;
  line-height: 1.5;
}

body.clientPage .msg.ok{
  color: #bbf7d0;
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.14);
}

body.clientPage .msg.err{
  color: #fecaca;
  border-color: rgba(239,68,68,.40);
  background: rgba(239,68,68,.16);
}

body.clientPage hr{
  border: 0;
  border-top: 1px solid #263852;
  margin: 16px 0;
}

body.clientPage .codePanel{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #263852;
}

body.clientPage .codeBox{
  position: relative;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid #263852;
  background: rgba(0,0,0,.28);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

body.clientPage .codeGlass{
  width: 100%;
  padding: 18px;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff;
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
}

body.clientPage .clickToCopy{
  margin-top: 8px;
  color: #aebbd1;
  font-size: 14px;
  text-align: center;
}

body.clientPage .copyToast{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(15,23,42,.92);
  color: #bbf7d0;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0;
}

body.clientPage .progressBar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width .25s linear;
}

body.clientPage .bottomRow{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

body.clientPage .bottomRow .left,
body.clientPage .bottomRow .right{
  min-width: 120px;
}

body.clientPage .bottomRow .left{
  display: flex;
  justify-content: flex-start;
}

body.clientPage .bottomRow .right{
  display: flex;
  justify-content: flex-end;
}

body.clientPage .releaseButton{
  width: auto;
  min-width: 140px;
  margin-top: 0;
}

body.clientPage .accountScrollBox{
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 430px;
  margin-top: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 10px 6px 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}

body.clientPage .accountScrollBox:hover,
body.clientPage .accountScrollBox:focus,
body.clientPage .accountScrollBox:focus-within{
  scrollbar-color: rgba(96,165,250,.65) rgba(15,23,42,.25);
}

body.clientPage .accountScrollBox::-webkit-scrollbar{
  width: 8px;
}

body.clientPage .accountScrollBox::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}

body.clientPage .accountScrollBox::-webkit-scrollbar-thumb{
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}

body.clientPage .accountScrollBox:hover::-webkit-scrollbar-thumb,
body.clientPage .accountScrollBox:focus::-webkit-scrollbar-thumb,
body.clientPage .accountScrollBox:focus-within::-webkit-scrollbar-thumb{
  border: 2px solid rgba(15,23,42,.35);
  background: rgba(96,165,250,.65);
  background-clip: padding-box;
}

body.clientPage .accountList{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  gap: 12px;
}

body.clientPage .accountItem{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: auto;
  padding: 14px;
  border: 1px solid #263852;
  border-radius: 14px;
  background: rgba(15,23,42,.82);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

body.clientPage .accountItem:hover:not(.is-disabled){
  filter: brightness(1.08);
  transform: translateY(-1px);
}

body.clientPage .accountItem.is-disabled{
  opacity: .78;
  cursor: not-allowed;
}

body.clientPage .accountItem.selected{
  outline-color: rgba(96,165,250,.95);
  box-shadow:
    0 0 0 1px rgba(96,165,250,.35),
    0 0 18px rgba(37,99,235,.22);
}

body.clientPage .accountItem.free{
  border-color: rgba(34,197,94,.35);
}

body.clientPage .accountItem.active{
  border-color: rgba(20,184,166,.55);
  background: rgba(20,184,166,.08);
}

body.clientPage .accountItem.busy{
  border-color: rgba(245,158,11,.65);
  background: rgba(245,158,11,.08);
}

body.clientPage .accountItem.cooldown{
  border-color: rgba(239,68,68,.85);
  background: rgba(127,29,29,.18);
}

body.clientPage .accountItem.disabled{
  border-color: rgba(148,163,184,.24);
}

body.clientPage .accountTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.clientPage .accountName{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  text-align: left;
}

body.clientPage .status{
  flex: 0 0 auto;
  max-width: 50%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #263852;
  background: rgba(255,255,255,.07);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 900;
}

body.clientPage .status.free{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.14);
  color: #bbf7d0;
}

body.clientPage .status.active{
  border-color: rgba(20,184,166,.35);
  background: rgba(20,184,166,.14);
  color: #99f6e4;
}

body.clientPage .status.busy{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.14);
  color: #fed7aa;
}

body.clientPage .status.cooldown{
  border-color: rgba(239,68,68,.40);
  background: rgba(239,68,68,.16);
  color: #fecaca;
}

body.clientPage .status.disabled{
  background: rgba(148,163,184,.08);
  color: #cbd5e1;
}

body.clientPage .accountInfo{
  margin-top: 8px;
  color: #aebbd1;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

/* Selo do Denuvo: so a letra, para nao competir com o nome da conta nem com o
   status. Fica entre os dois porque pertence a conta, nao ao estado dela. */
body.clientPage .denuvoBadge{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(251,191,36,.42);
  background: rgba(180,120,10,.22);
  color: #fcd34d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}

body.clientPage .tags{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

body.clientPage .tag{
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.28);
  background: rgba(37,99,235,.18);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
  /* line-height explicito: com "normal" a altura do chip muda conforme os glifos
     (uma tag com acento fica 2px mais alta que uma so-ASCII), e ai dois cards com
     a mesma quantidade de tags saem com alturas diferentes. */
  line-height: 16px;
  /* Teto de largura para um nome comprido sozinho nao ocupar a linha inteira.
     Aqui as reticencias sao do CSS; o titulo tem o nome completo. */
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O "+N" e um controle, nao um jogo: sem preenchimento e com borda tracejada,
   para nao ser confundido com o nome de um jogo chamado "+7".
   Precisa desfazer o botao padrao do cliente (min-height 46px, padding 12x16),
   senao um unico chip estica a linha de tags de 26px para 46px. */
body.clientPage .tagMore{
  min-height: 0;
  padding: 5px 10px;
  max-width: none;
  border: 1px dashed rgba(96,165,250,.42);
  border-radius: 999px;
  background: transparent;
  color: #93b4e8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  transition: border-color .15s ease, color .15s ease;
}

body.clientPage .tagMore:hover{
  border-color: rgba(147,180,232,.75);
  color: #dbeafe;
  transform: none;
}

body.clientPage .accountEmpty{
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed #263852;
  color: #aebbd1;
  text-align: center;
}

body.clientPage .selectedBox{
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(96,165,250,.35);
  background: rgba(37,99,235,.12);
  color: #aebbd1;
}

body.clientPage .selectedBox b{
  color: #ffffff;
}

body.clientPage .accountActions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

body.clientPage .queueBox{
  margin-top: 4px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,.45);
  background:
    linear-gradient(180deg, rgba(245,158,11,.13), rgba(15,23,42,.78)),
    rgba(15,23,42,.72);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

body.clientPage .queueTitle{
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-align: left;
}

body.clientPage .queueMain{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

body.clientPage .queueItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,6,23,.30);
}

body.clientPage .queueItem span{
  min-width: 0;
  color: #aebbd1;
  font-size: 13px;
  font-weight: 700;
}

body.clientPage .queueItem b{
  min-width: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.clientPage .queueNotice{
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(245,158,11,.32);
  background: rgba(245,158,11,.11);
  color: #fed7aa;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

body.clientPage .queueHelp{
  margin-top: 12px;
  margin-bottom: 0;
  text-align: left;
}

body.clientPage .queueActions{
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 14px;
}

@media (max-width: 560px){
  body.clientPage .container{
    padding: 14px;
  }

  body.clientPage .authBody{
    padding: 16px;
  }

  body.clientPage .genActions,
  body.clientPage .bottomRow,
  body.clientPage .accountActions,
  body.clientPage .queueActions{
    display: grid;
    grid-template-columns: 1fr;
  }

  body.clientPage .genActions #btnGerar,
  body.clientPage .bottomRow button,
  body.clientPage .accountActions button,
  body.clientPage .queueActions button{
    width: 100%;
    margin-left: 0;
  }

  body.clientPage .bottomRow .right{
    justify-content: center;
  }

  body.clientPage .bottomRow .left{
    justify-content: center;
  }

  body.clientPage .releaseButton{
    width: 100%;
  }
}

/* =====================================================================
   Painel do código — blocos por caractere e hierarquia dos dois tempos.
   ===================================================================== */

/* Os blocos. O espaçamento vem do gap, nunca de texto: assim
   codeEl.textContent continua sendo exatamente o código, e a cópia funciona. */
body.clientPage .codeGlass{
  display: flex;
  gap: clamp(6px, 1.8vw, 10px);
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  padding: 20px 14px 28px;
}

body.clientPage .codeChar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 11vw, 62px);
  height: clamp(56px, 14vw, 76px);
  border-radius: 12px;
  border: 1px solid #2b3f5c;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  font-size: clamp(24px, 6.2vw, 36px);
  font-weight: 800;
  line-height: 1;
}

/* Espera pelo proximo ciclo: ocupa o mesmo espaco vertical dos blocos, para o
   painel nao pular de altura quando o codigo finalmente aparece. */
body.clientPage .codeWaiting{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(56px, 14vw, 76px);
  padding: 0 10px;
  color: #aebbd1;
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  animation: codeWaitingPulse 1.6s ease-in-out infinite;
}

@keyframes codeWaitingPulse{
  0%, 100%{ opacity: .55; }
  50%{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  body.clientPage .codeWaiting{ animation: none; opacity: .8; }
}

body.clientPage .codeChar.isEmpty{
  border-style: dashed;
  border-color: #24354e;
  background: rgba(255,255,255,.02);
  box-shadow: none;
}

/* Barra de 30s colada ao código: ela fala sobre o código, então mora nele. */
body.clientPage .totpBar{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}
body.clientPage .totpBar .progressBar{ height: 100%; }

/* Legendas do código: ação à esquerda, ciclo do código à direita. */
body.clientPage .codeFoot{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #aebbd1;
}
body.clientPage .codeFoot .clickToCopy{ margin: 0; }

/* A janela de acesso é o outro relógio — rótulo explícito e número destacado,
   para nunca ser confundido com o ciclo de 30s acima. */
body.clientPage .sessionLine{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #263852;
  background: rgba(0,0,0,.18);
  color: #aebbd1;
  font-size: 13px;
}
body.clientPage .sessionValue{ color: #aebbd1; white-space: nowrap; }
body.clientPage .sessionValue b{
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-right: 1px;
}

body.clientPage .bottomRow{ margin-top: 14px; }

@media (max-width: 420px){
  body.clientPage .codeFoot{ font-size: 12px; }
  body.clientPage .sessionLine{ font-size: 12px; }
}


/* ===== Modal de confirmacao do cliente (Denuvo) ===== */

body.clientPage .clientModalOverlay{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 9, 18, .68);
}

body.clientPage .clientModalCard{
  width: 100%;
  max-width: 420px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid #263852;
  background: #0e1726;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  text-align: left;
}

body.clientPage .clientModalBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(251,191,36,.42);
  background: rgba(180,120,10,.22);
  color: #fcd34d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

body.clientPage .clientModalTitle{
  margin-top: 12px;
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
}

body.clientPage .clientModalText{
  margin: 12px 0 0;
  color: #aebbd1;
  font-size: 14px;
  line-height: 1.55;
}

body.clientPage .clientModalText b{ color: #e8eef6; }

/* Lista de regras do modal Denuvo: duas linhas curtas, mais faceis de ler
   do que um paragrafo corrido. */
body.clientPage .clientModalList{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

body.clientPage .clientModalList li{
  position: relative;
  padding-left: 18px;
  color: #aebbd1;
  font-size: 14px;
  line-height: 1.55;
}

body.clientPage .clientModalList li::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(252, 211, 77, .75);
}

body.clientPage .clientModalList b{ color: #e8eef6; }

body.clientPage .clientModalNote{
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(38, 56, 82, .8);
  color: #8b9ab1;
  font-size: 13px;
  line-height: 1.5;
}

body.clientPage .clientModalActions{
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

body.clientPage .clientModalActions button{
  flex: 1 1 0;
  min-width: 0;
}