/* ================================
   Rede Transformers — NEW styles.css
   ================================ */

/* ---------- Design tokens ---------- */
:root{
  --bg: #f3f6fc;
  --text: #0f172a;
  --muted:#475569;

  --primary:#1e66d0;
  --primary-600:#0b5ed7;
  --accent:#38bdf8;

  --border:#e2e8f0;
  --ring: rgba(30,102,208,.25);

  --glass: #ffffffcc;
  --shadow-sm: 0 8px 20px rgba(2,6,23,.08);
  --shadow:    0 12px 30px rgba(2,6,23,.12);
  --shadow-lg: 0 24px 64px rgba(2,6,23,.18);

  --wa:#25D366;
  --danger:#ef4444;
  --danger-600:#dc2626;

  --blue-800:#0f3f86;
  --blue-700:#1e66d0;
  --blue-600:#2a7be6;

  --safe-left:  env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* ---------- Reset minimal ---------- */
*{ box-sizing:border-box; min-width:0 }
html, body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(30,102,208,.12), transparent 55%),
    radial-gradient(800px 500px at 110% 0%, rgba(56,189,248,.12), transparent 50%),
    var(--bg);
  overflow-x:hidden;
}
img{ display:block; max-width:100% }

/* ---------- Background ornaments ---------- */
.stars{
  position:fixed; inset:-50vmax;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="2" cy="2" r="1" fill="black" opacity=".08"/><circle cx="20" cy="70" r="1" fill="black" opacity=".06"/><circle cx="80" cy="10" r="1" fill="black" opacity=".05"/><circle cx="60" cy="50" r="1" fill="black" opacity=".09"/></svg>') repeat;
  opacity:.18; animation:drift 90s linear infinite; pointer-events:none; z-index:-1;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(200px,120px,0)}}

/* ---------- Header / Hero ---------- */
header{
  max-width:1200px; margin:32px auto 22px; padding:0 16px;
  position:relative; text-align:center;
}
.hero-bg{
  position:absolute; inset:-24px -32px -16px -32px; z-index:-1; pointer-events:none; border-radius:28px;
  background:
    radial-gradient(600px 260px at 10% -10%, rgba(30,102,208,.20), transparent 60%),
    radial-gradient(560px 240px at 95% 0%, rgba(139,124,247,.18), transparent 60%),
    radial-gradient(420px 200px at 55% 35%, rgba(90,103,247,.12), transparent 60%),
    linear-gradient(180deg, rgba(30,102,208,.06), rgba(139,124,247,.06));
  animation:heroFloat 18s ease-in-out infinite alternate;
}
@keyframes heroFloat{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}

.hero-logo{
  position:absolute; top:22px; right:30px; height:90px; width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12)); opacity:.98
}
@media (max-width:900px){
  .hero-logo{height:44px; right:18px; top:10px}
}
@media (max-width:560px){
  .hero-logo{height:36px; right:12px; top:8px}
  .brand {
    flex-direction: column; /* No celular, logo em cima e texto embaixo */
    gap: 6px;
  }
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center; /* centraliza logo + texto no container */
  gap: 14px;
  padding: 4px 10px;
  border-radius: 16px;
  position: relative;
  width: 100%; /* garante alinhamento central */
  text-align: center;
}

.brand::after {
  content:"";
  position:absolute;
  inset:-6px -10px;
  border-radius:20px;
  background:radial-gradient(180px 40px at 50% -10px, rgba(255,255,255,.25), transparent 60%);
}

.brand-logo {
  height:54px;
  width:auto;
  filter:drop-shadow(0 4px 12px rgba(11,94,215,.25));
}

.brand-text {
  font-weight:800;
  font-size:clamp(32px, 6vw, 56px);
  letter-spacing:.2px;
  background:linear-gradient(100deg,#0b1220 0%,#10213a 25%,#1e66d0 55%,#38bdf8 75%,#0b5ed7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 7s linear infinite;
  background-size:200% 100%;
  display:inline-block;
}

@keyframes shine {
  to {background-position:-200% 0}
}

.subtitle {
  color:var(--muted);
  margin:10px 0 16px;
}

/* ---------- Toolbar ---------- */
.toolbar{
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; text-align:left; margin-top:8px;
}
.toolbar > *{ min-width:0 }

.search{
  position:relative; display:flex; align-items:center; gap:10px;
  background:var(--glass); border:1px solid var(--border); padding:12px 14px;
  border-radius:999px; box-shadow:var(--shadow);
}
.search::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:radial-gradient(600px 100px at var(--mx,50%) -20%, rgba(30,102,208,.22), transparent 60%);
  opacity:.6; pointer-events:none; transition:.15s;
}
.search input{border:0; outline:none; width:100%; font-size:15px; color:inherit; background:transparent}

.account-toolbar {
  display: flex;
  gap: 14px;                /* um pouco mais de espaço entre os botões */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-toolbar .btn, 
#openCreate.btn {
  flex: 0 0 auto;           /* não deixa o botão encolher */
  min-width: 140px;         /* largura mínima confortável */
  padding: 14px 20px;       /* mais respiro interno */
  font-size: 15px;
}


/* ---------- Buttons ---------- */
.btn{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff; border:0; padding:12px 16px; border-radius:999px; font-weight:600;
  box-shadow:0 10px 30px rgba(11,94,215,.25); cursor:pointer; overflow:hidden; min-width:0;
}
.btn::before{
  content:""; position:absolute; inset:-150% -50%;
  background:conic-gradient(from 180deg at 50% 50%, transparent 10%, rgba(255,255,255,.18), transparent 60%);
  animation:spin 6s linear infinite; z-index:-1;
}
.btn::after{
  content:""; position:absolute; left:var(--mx,50%); top:var(--my,50%);
  width:0; height:0; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.35), transparent 45%);
  transition:width .25s ease, height .25s ease; z-index:-1;
}
.btn:hover::after{ width:200%; height:500% }
@keyframes spin{to{transform:rotate(360deg)}}

.btn-ghost{
  background:#eef3fb; color:#0f172a; border:1px solid rgba(30,102,208,.25);
  box-shadow:0 12px 30px rgba(11,94,215,.12);
}

/* Danger para Sair sem mudar HTML */
#btnLogout.btn, #btnLogout.btn-ghost{
  background:linear-gradient(180deg,var(--danger),var(--danger-600));
  color:#fff; border:0; box-shadow:0 10px 30px rgba(239,68,68,.25);
}

/* ---------- Main grid & cards ---------- */
main{ max-width:1200px; margin:0 auto; padding:16px }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:20px }
.card{
  position:relative;
  background:linear-gradient(180deg,#fafcff,#f7fbff 65%, #f0f6ff 100%);
  border:3px solid var(--blue-700); border-radius:24px; padding:14px 12px;
  display:grid; grid-auto-rows:auto; gap:10px; align-items:start; justify-items:center; text-align:center;
  box-shadow:0 12px 30px rgba(2,6,23,.06), inset 0 0 0 6px #ffffff;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:transform .12s ease-out, box-shadow .25s; min-height:300px;
}

.card:hover{ 
  box-shadow:
    0 0 25px rgba(30,102,208,.6),   /* brilho azul externo */
    0 40px 80px rgba(11,94,215,.45), 
    inset 0 0 0 6px #ffffff; 
}


.avatar{ width:92px; height:92px; border-radius:50%; overflow:hidden; display:grid; place-items:center; border:4px solid var(--blue-700); background:#fff; box-shadow:0 4px 10px rgba(2,6,23,.06) }
.avatar img{ width:100%; height:100%; object-fit:cover }

.title,.dept,.phone{ overflow-wrap:anywhere; word-break:break-word; text-align:center }
.title{ font-weight:800; font-size:17px; letter-spacing:.3px; color:var(--blue-800) }
.dept,.phone{ color:var(--blue-800); font-weight:700 }

/* ---------- Skills ---------- */
.skills{ width:100%; display:grid; gap:8px; margin-top:4px }

/* bloco da skill */
.skill{
  display:flex;
  align-items:center;
  /* NÃO usar space-between para não espremer o título longo */
  justify-content:flex-start;
  gap:10px;

  background:linear-gradient(180deg,#58a6ff,#2a7be6);
  color:#fff;
  border:2px solid rgba(255,255,255,.6);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(30,102,208,.22);
}

/* texto da skill */
.skill .label{
  flex:1 1 auto;     /* ocupa o espaço disponível */
  min-width:0;       /* permite encolher dentro do flex */
  white-space:normal;
  overflow-wrap:anywhere;  /* quebra palavras longas (ex.: Comunicação) */
  word-break:break-word;   /* fallback */
  hyphens:auto;            /* adiciona hífen quando suportado */
}

/* pontuação */
.skill .score{
  flex:0 0 auto;
  background:#eef6ff; color:#0b2f6b; font-weight:900;
  border:2px solid rgba(30,102,208,.35);
  min-width:38px; height:30px; border-radius:10px;
  display:grid; place-items:center; padding:0 8px;
  margin-left:auto;            /* cola à direita */
  box-shadow:0 4px 10px rgba(2,6,23,.06);
}

/* variação dourada */
.skill.gold{
  background:linear-gradient(180deg,#f7d046,#d4a017);
  color:#2a1b00; border-color:rgba(255,255,255,.85);
  box-shadow:0 8px 22px rgba(212,160,23,.35);
}

/* reforço para telas pequenas (opcional) */
@media (max-width: 480px){
  .skill{ row-gap:6px; }
}

.skill > :not(.score){
  flex:1 1 auto;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* ---------- Modals (sempre centralizados) ---------- */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding-left:max(16px,var(--safe-left));
  padding-right:max(16px,var(--safe-right));
  background:rgba(2,6,23,.35);
  z-index:20;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease-out;
}
.modal.open{ opacity:1; pointer-events:auto }

.modal-card{
  inline-size:100%;
  max-inline-size:720px;
  background:#fff; color:var(--text);
  border-radius:20px; border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  max-block-size:calc(100vh - 48px);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border)
}
.modal-body{
  padding:20px; flex:1 1 auto; min-height:0;
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable both-edges;
}
.modal-actions{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; border-top:1px solid var(--border); background:#fff
}
.actions-left,.actions-right{ display:flex; align-items:center; gap:10px }
.icon-btn{ background:transparent; border:0; font-size:22px; cursor:pointer; color:var(--muted) }

/* Detalhes */
#modalDetails .modal-card{ max-inline-size:560px; border-radius:24px }
#modalDetails .detail{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px }
#modalDetails .detail .avatar{ width:120px; height:120px; border-width:3px }
#modalDetails .detail .title{ font-size:20px; font-weight:800; margin-top:6px }
#modalDetails .detail .dept,#modalDetails .detail .phone{ font-size:14px; color:var(--muted) }
#modalDetails #dSkills{ display:grid; gap:8px; width:100%; margin-top:12px }

/* Confirm genérico compacto */
#modalConfirm .modal-card{
  max-inline-size:420px; border-radius:18px; box-shadow:var(--shadow-lg);
}
#modalConfirm .modal-head{ justify-content:center; gap:8px }
#modalConfirm .modal-head strong{ margin:0 auto }
#modalConfirm .modal-body{ text-align:center }

/* ---------- Forms ---------- */
.form-row{ display:grid; gap:8px; margin-bottom:14px }
label{ font-weight:600; font-size:14px }
input[type="text"], input[type="tel"], input[type="url"], input[type="file"], input[type="number"]{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px;
  outline:none; background:#fff; color:#0f172a; font-size:15px;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus{
  box-shadow:0 0 0 4px var(--ring); border-color:var(--primary-600)
}

.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.skill-input{ display:grid; grid-template-columns:1fr auto; gap:10px }
.skill-input.two{ grid-template-columns:1fr auto auto; align-items:center }
.skill-input.three{ grid-template-columns:1fr auto auto auto; align-items:center }
.score-wrap{ display:flex; align-items:center; gap:8px; white-space:nowrap }
.score-wrap output{ display:inline-block; min-width:28px; text-align:center; font-weight:800 }

.golden-ctrl{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-size:13px; font-weight:700;
  background:#fff7d1; border:1px solid #f1d37a; color:#6a4c00;
}
.golden-ctrl input{ accent-color:#d4a017 }

.pill{
  background:#f8fafc; color:#0f172a; border:1px solid var(--border);
  border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:8px; font-size:13px;
  margin-right:8px; margin-top:8px;
}
.pill.gold{ background:#fff7d1; border-color:#f1d37a; color:#2a1b00 }
.pill .gold-tag{ padding:2px 6px; border-radius:999px; font-size:11px; font-weight:700; background:#ffefb3; border:1px solid #f1d37a; color:#6a4c00 }
.pill button{ border:0; background:transparent; cursor:pointer; color:var(--muted) }

/* Detalhe horizontal (desktop) */
.detail{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center }
.detail .avatar{ width:96px; height:96px; border-width:3px }
.detail .title{ font-size:22px }

.wa-btn{
  display:inline-flex; align-items:center; gap:10px; background:var(--wa); color:#fff;
  border:0; padding:12px 16px; border-radius:14px; font-weight:700; box-shadow:0 8px 20px rgba(37,211,102,.25); text-decoration:none;
}
.wa-btn:hover{ filter:brightness(.96) }
.wa-btn svg{ width:20px; height:20px }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%); background:#0b1f3a; color:#fff;
  padding:10px 16px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:30;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px) }

/* ---------- Mobile ---------- */
@media (max-width:480px){
  input[type="text"], input[type="tel"], input[type="url"], input[type="number"], input[type="file"]{ font-size:16px }

  .toolbar{ grid-template-columns:1fr; gap:16px }
  .search{ padding:10px 12px; gap:8px }
  .btn{ padding:12px 14px; font-size:15px }
  .account-toolbar{ justify-content:stretch }
  .account-toolbar .btn, #openCreate.btn{ width:100% }

  .grid{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px }

  /* CREATE centralizado no mobile */
  #modalCreate{
    padding-left:max(16px,var(--safe-left));
    padding-right:max(16px,var(--safe-right));
    align-items:center; justify-items:center;
  }
  #modalCreate .modal-card{
    inline-size:min(92vw, 560px);
    max-block-size:88svh;
    border-radius:20px;
    box-shadow:var(--shadow-lg);
    justify-self:center; align-self:center;
  }

  /* DETAILS compacto e central */
  #modalDetails{
    padding-left:max(16px,var(--safe-left));
    padding-right:max(16px,var(--safe-right));
  }
  #modalDetails .modal-card{
    max-width:min(92vw,560px);
    max-height:88svh; border-radius:22px;
    box-shadow:var(--shadow-lg);
  }
  #modalDetails .modal-head{
    position:sticky; top:0; z-index:2; background:#fff; padding:14px 16px; border-bottom:1px solid var(--border);
  }
  #modalDetails .modal-body{ padding:16px 16px 8px }

  /* Actions coláveis no rodapé com safe area */
  .modal-actions{
    position:sticky; bottom:0; z-index:2;
    padding:12px 16px calc(12px + var(--safe-bottom));
    gap:10px; flex-wrap:wrap;
  }
  #modalCreate .actions-right .btn,
  #modalCreate .actions-right .btn-ghost{
    flex:1 1 calc(50% - 5px); min-width:0; padding:12px 14px; font-size:15px;
  }
  
  #btnLogout {
  padding: 16px 22px;   /* altura/largura maiores */
}

  

  .row{ grid-template-columns:1fr; gap:10px }
  .skill-input, .skill-input.two, .skill-input.three{ grid-template-columns:1fr; gap:10px }
  .score-wrap{ justify-content:space-between }
  #goldenWrap{ width:100% }
  #addSkill{ width:100% }

  /* Confirm compacto */
  #modalConfirm .modal-card{
    max-width:min(92vw, 420px);
    max-height:85svh; border-radius:16px; margin:0 auto;
  }
  #modalConfirm .modal-body{ font-size:14px; line-height:1.35 }
}

/* ============================
   PATCH: sem scroll horizontal + modais centralizados
   ============================ */

/* 1) Nunca rolar pro lado (com fallback) */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; } /* mais robusto que hidden */
}

/* 2) Nada pode “passar” da largura da página */
body > * { max-width: 100%; }

/* 3) Header não deixa o fundo (hero-bg) vazar pros lados */
header {
  overflow: hidden;             /* corta os insets negativos do .hero-bg */
  contain: paint;               /* evita calcular áreas fora do header */
}

/* 4) Elementos fixos/decorativos nunca causam overflow */
.stars { left: 0; right: 0; }

/* 5) Grid se adapta sem forçar largura extra */
.grid {
  margin-inline: 0;             /* garante que não some margin + padding */
  overflow-x: clip;             /* por via das dúvidas em navegadores novos */
}

/* 6) Modal SEMPRE centralizado (desktop e mobile) */
.modal{
  position: fixed;
  inset: 0;
  display: grid !important;
  place-items: center !important;      /* alinha no meio */
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  background: rgba(2,6,23,.35);
  z-index: 20;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
}
.modal.open{ opacity: 1; pointer-events: auto }

/* Cartão do modal: largura fluida e limitada, sem usar 100vw */
.modal-card{
  inline-size: min(720px, 92svw);      /* usa viewport “estável” */
  max-block-size: calc(100svh - 48px);
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  overflow: hidden;
}

/* 7) Create/Edit no mobile — centralizado, sem 100vw + padding somando */
@media (max-width: 480px){
  #modalCreate{
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    align-items: center !important;
    justify-items: center !important;
  }

  #modalCreate .modal-card{
    inline-size: min(560px,
      calc(100svw - (max(16px, var(--safe-left)) + max(16px, var(--safe-right))))
    );
    max-block-size: 88svh;
    border-radius: 20px;
    box-shadow: var(--shadow, 0 12px 30px rgba(2,6,23,.12));
  }
}

#modalDetails .modal-card{
  inline-size: min(560px, 92svw);
  max-block-size: calc(100svh - 48px);
}
#modalConfirm .modal-card{
  inline-size: min(420px, 92svw);
  max-block-size: calc(100svh - 48px);
}

img, video, canvas, svg, iframe { max-width: 100%; height: auto }

[class*="container"], [class*="wrapper"], [class*="content"]{
  overflow-x: clip;
}


/* Botão "+ Criar minha carta" largo e arredondado */
#openCreate {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 720px;           /* aumentei o limite */
  margin-top: 14px;
  transform: translateY(-10px); /* sobe ~4px visualmente */
  margin-inline: 20px;        /* respira nas laterais */
  font-size: 18px;            /* texto maior */
  padding: 16px 22px;         /* mais “alto” e confortável */
  border-radius: 999px;       /* borda super arredondada (pílula) */
}

/* ===== AUTH PAGE — look & feel alinhado com a home ===== */

/* layout */
.auth-wrap{
  max-width: 520px;
  margin: 44px auto;
  padding: 0 16px;
}

/* cartinha com “vidro” */
.card-auth{
  background: linear-gradient(180deg,#ffffff, #fbfdff);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(2,6,23,.14), var(--shadow-sm);
  overflow: hidden;
}

/* abas */
/* abas */
.card-auth .tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: transparent;
  border-bottom: 1px solid var(--border); /* só a linha cinza de base */
}

.card-auth .tabs button{
  position: relative;
  padding: 16px 12px;
  border: 0;
  background: transparent;
  font-weight: 800;
  font-size: 16px; /* maior e mais legível */
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}

.card-auth .tabs button:hover{
  color: var(--text);
}

.card-auth .tabs button.active{
  color: var(--text);
}

.card-auth .tabs button.active::after{
  content:"";
  position:absolute;
  left:10%; right:10%; bottom:0;
  height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}


/* conteúdo do cartão */
.card-auth .body{ padding: 20px }

/* rótulos mais fortes e alinhados */
.form-row{ display:grid; gap:8px; margin-bottom:14px }
.form-row label{
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

/* INPUTS — robustos, arredondados, com foco azul “ring” */
.card-auth input[type="email"],
.card-auth input[type="password"],
.card-auth input[type="text"]{
  width: 100%;
  font-size: 15px;
  color: var(--text);
  background: #f9fbff;
  border: 2px solid #e6efff;
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(30,102,208,.06);
}
.card-auth input::placeholder{ color:#8aa0bf }
.card-auth input:hover{
  background:#ffffff;
  border-color:#d7e6ff;
}
.card-auth input:focus{
  background:#fff;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 4px var(--ring), inset 0 1px 0 #fff, 0 10px 26px rgba(30,102,208,.12);
}

/* linha de ações “padrão modal” mas mais compacta no auth */
.card-auth .modal-actions{
  padding: 0;
  margin-top: 10px;
  border-top: 0;
}
.card-auth .actions-right .btn,
.card-auth .actions-right .btn-ghost{
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
}

/* botão primário um pouco mais marcante aqui */
.card-auth .actions-right .btn{
  box-shadow: 0 14px 36px rgba(11,94,215,.28);
}

/* link “Já tenho conta” com estilo ghost cápsula */
#btnToLogin,
#linkToSignup{
  text-decoration:none;
}
#btnToLogin.btn-ghost{
  background:#f4f7ff;
  border:1px solid rgba(30,102,208,.25);
}

/* mensagens auxiliares */
.muted{ color:var(--muted); font-size:14px; margin-top:8px }
.error{ color:#b91c1c; margin-top:6px; font-size:13px; font-weight:600 }
.ok   { color:#166534; margin-top:6px; font-size:13px; font-weight:600 }

/* topbar alinhada com a home */
.topbar{
  max-width:1200px; margin:20px auto 0; padding:0 16px;
  display:flex; justify-content:space-between; align-items:center;
}
.topbar a{ text-decoration:none }

/* responsivo: dá um respiro extra nos campos no mobile */
@media (max-width: 480px){
  .auth-wrap{ margin: 28px auto }
  .card-auth .body{ padding: 16px }
  .card-auth .actions-right{
    gap:10px; flex-wrap:wrap; justify-content:flex-end;
  }
  #btnToLogin.btn-ghost, .card-auth .actions-right .btn{
    flex: 1 1 auto;
  }
}

/* Centralizar conteúdo de todos os .btn (anchors e buttons) */
.btn{
  display: inline-flex;        /* funciona para <a> e <button> */
  align-items: center;        
  justify-content: center;     
  text-align: center;
  vertical-align: middle;
  text-decoration: none;       /* remove underline em <a> */
}

/* Garantia para a variação ghost (anchors) */
.btn-ghost{
  text-decoration: none;
}

/* (opcional) só no mobile, manter largura total */
@media (max-width:480px){
  .account-toolbar .btn{ width:100%; }
}


/* ===== SUPER TRUNFO – igual ao efeito do "Rede Transformers" ===== */
.super-trunfo{
  margin-top: 6px;
  display: grid;
  justify-items: center;   /* centraliza */
  gap: 6px;
}

.super-trunfo .st-text{
  font-weight: 900;                      /* mais grosso */
  font-size: clamp(18px, 2.8vw, 28px);   /* menor que o título principal */
  line-height: 1.05;
  letter-spacing: .12em;                 /* “espalha” letras */
  text-transform: uppercase;

  /* mesmo gradiente/efeito do .brand-text */
  background: linear-gradient(
    100deg,
    #0b1220 0%,
    #10213a 25%,
    #1e66d0 55%,
    #38bdf8 75%,
    #0b5ed7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shine 7s linear infinite;   /* já existe no seu CSS */
}

/* deixa TRUNFO com o mesmo peso do SUPER (opcional) */
.super-trunfo .st-text .st-trunfo{
  font-weight: 900;
}

/* linha decorativa sob o texto (mantém central e discreta) */
.super-trunfo .st-rule{
  width: min(360px, 60%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e66d0, #38bdf8);
  opacity: .6;
}


#btnAuth {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  text-align: center;
}

#btnAuth u {
  font-size: 0.85em;
  font-weight: 600;
}

#btnExportPdf,
#btnExportPng {
  background: #f9fafb;
  color: #0f172a;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
}

#btnExportPdf:hover,
#btnExportPng:hover {
  background: #eef2f7;
}

/* --- AUTH: Topo centralizado --- */
.auth-topbar{
  justify-content: center;        /* centraliza a marca no topo */
  position: relative;
}

/* --- Botão Voltar fixo no canto inferior esquerdo --- */
#btnBack{
  position: fixed;
  left: max(16px, var(--safe-left));
  bottom: calc(16px + var(--safe-bottom));
  z-index: 40;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}

/* Evita “duplicar” o botão no topo em telas muito estreitas */
@media (max-width: 560px){
  .auth-topbar{
    margin-top: 12px;
  }
  #btnBack{
    padding: 12px 14px;
  }
}


/* botão que vira chip */
.btn.as-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;        /* mesmo “tamanho” do botão */
  border-radius: 999px;     /* pílula */
}

/* avatar dentro do botão */
.btn.as-chip .avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b5;        /* verde sólido */
  color: #fff;
  font-weight: 700;
  font-size: .8rem;

  /* neutraliza o estilo global de .avatar das cartas */
  border: none !important;
  box-shadow: none !important;
}


.btn.as-chip .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn.as-chip .label {
  font-weight: 600;
  font-size: .9rem;
  opacity: .9;
}


.photo-preview {
  display: flex;
  align-items: center;
  gap: 8px;              /* espaçamento entre imagem e botão */
  margin-top: 8px;
}

.photo-preview img {
  display: block;
  max-width: 120px;
  max-height: 120px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}


/* Avatar genérico */
.card .avatar img,
.detail .avatar img,
.btn.as-chip .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px; /* bolinha */
}


.brand-logo { height: auto; width: 98px; }

input.error {
  border: 2px solid #e63946;   /* vermelho */
  background-color: #ffe5e5;   /* fundo claro */
}

#authMsg.error {
  color: #e63946;
  font-weight: 600;
}


/* Linha da skill: trava altura pelo conteúdo, centraliza os itens */
.skill{
  display: flex;           /* se já era, ok */
  align-items: center;     /* evita esticar a bolinha */
  gap: 8px;
}

/* Badge numérico: tamanho fixo e não estica nunca */
.skill .idx{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;          /* impede crescer/encolher */
  border-radius: 50%;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: .72rem;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* 1,2,3 com largura consistente */

  color: #fff;             /* número branco */
  background: transparent; /* sem fundo */
  border: 1.5px solid #fff;/* contorno branco */
}

/* Nome ocupa o meio; score fica à direita */
.skill .name{ flex: 1 1 auto; min-width: 0; }
.skill .score{ flex: 0 0 auto; }

/* Dourada (se quiser sutilmente diferente) */
.skill.gold .idx{
  /* opcional: um véu claro para destacar levemente */
  /* background: rgba(255,255,255,.12); */
  border-color: #fff;
  color: #fff;
}

/* Mini-legend do slider de pontos */
.mini-hint{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px 2px;
  font-size: .78rem;
  font-weight: 500;
  opacity: .75;                 /* discreto */
}
.mini-hint::before{
  content: "↔";                 /* sugestão de “arraste” sutil */
  font-size: .9rem;
  opacity: .8;
}


/* Layout padrão do slider + número */
.score-wrap{
  display: flex;
  align-items: center;
  gap: 12px;                 /* espaço entre barra e número no desktop */
}

.score-wrap input[type="range"]{
  flex: 1 1 auto;            /* barra ocupa todo o espaço possível */
}

.score-wrap output{
  min-width: 2ch;            /* largura estável (1 ou 10 não "pula") */
  text-align: right;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

/* --- MOBILE: encostar o número na barra --- */
@media (max-width: 480px){
  .score-wrap{
    position: relative;
    gap: 0;                  /* tira o espaçamento */
    padding-right: 28px;     /* reserva espaço pro número sem sobrepor a barra */
  }
  .score-wrap output{
    position: absolute;
    right: 6px;              /* cola na ponta direita da barra */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;               /* sem margens extras */
  }
}



/* ===== Ajuste do bloco "Adicionar soft skill" =====
   – Só em telas a partir de ~notebook
   – Coloca o botão à direita e dá mais espaço ao campo de escrita
*/
@media (min-width: 992px) {
  .modal-card .skill-input.three {
    display: grid !important;                  /* vence qualquer flex anterior */
    grid-template-columns: minmax(0, 1fr) auto;/* esquerda: campos | direita: botão */
    grid-template-rows: auto auto auto auto;   /* name | hint | slider | dourada */
    grid-template-areas:
      "name  add"
      "hint  add"
      "score add"
      "gold  add";
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
  }

  /* mapeamento das áreas */
  .modal-card .skill-input.three > #skillName  { grid-area: name; }
  .modal-card .skill-input.three > #scoreHint  { grid-area: hint; }
  .modal-card .skill-input.three > .score-wrap { grid-area: score; }
  .modal-card .skill-input.three > #goldenWrap { grid-area: gold; }
  .modal-card .skill-input.three > #addSkill   { grid-area: add; align-self: start; }

  /* campo de escrita maior/alto */
  .modal-card #skillName {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 16px;
  }

  /* slider com output ao lado, sem quebrar layout */
  .modal-card .score-wrap {
    display: grid !important;
    grid-template-columns: 1fr auto; /* range | output */
    gap: 8px;
    align-items: center;
  }

  /* botão compacto e alinhado ao topo */
  .modal-card #addSkill {
    height: 44px;
    padding: 0 16px;
    white-space: nowrap;
  }
}