/* =========================================================
   SportyBet Studio — tema claro
   Primária: vermelho da marca. Fundo: branco com gradiente blush.
   ATENÇÃO: --sb-red foi amostrado da logo. Trocar pelo hex oficial.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* marca */
  --sb-red:        #ED1C24;   /* AMOSTRADO — substituir pelo oficial */
  --sb-red-dark:   #A50E14;   /* hover / pressed */
  --sb-red-soft:   #FFECEC;   /* chips, estados leves, linha selecionada */
  --sb-red-line:   #FBD5D6;   /* borda dos estados leves */
  --sb-blush:      #FFD9DB;   /* início do gradiente da página */

  /* texto */
  --sb-ink:        #14141A;
  --sb-text-2:     #5C5E6B;
  --sb-text-3:     #9296A3;
  --sb-text-4:     #B9BCC6;   /* placeholders */

  /* superfícies */
  --sb-surface:    #FFFFFF;
  --sb-surface-2:  #F7F8FA;   /* campos e áreas internas */
  --sb-border:     #E8EAEF;
  --sb-border-2:   #D9DCE4;   /* tracejado dos placeholders */

  /* cores de dado — NUNCA em botão */
  --sb-green:      #17B26A;
  --sb-blue:       #2E7DF7;
  --sb-amber:      #F5A524;
  --sb-violet:     #6E56CF;

  /* raios */
  --sb-r-sidebar:  28px;
  --sb-r-panel:    22px;
  --sb-r-card:     16px;
  --sb-r-field:    12px;
  --sb-r-pill:     999px;

  /* sombras — no tema claro é a sombra que dá o volume */
  --sb-sh-sidebar: 0 20px 48px -16px rgba(22,26,43,.20);
  --sb-sh-panel:   0 12px 30px -12px rgba(22,26,43,.16);
  --sb-sh-login:   0 18px 44px -16px rgba(22,26,43,.18);
  --sb-sh-ghost:   0 2px 6px -2px rgba(22,26,43,.06);
  --sb-sh-red:     0 8px 20px -6px rgba(237,28,36,.42);
  --sb-sh-nav:     0 6px 16px -4px rgba(237,28,36,.40);

  /* gradientes */
  --sb-grad-page:  linear-gradient(125deg, #FFD9DB 0%, #FFEEEF 20%, #FFFCFC 44%, #FFFFFF 100%);
  --sb-grad-card:  linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);

  /* tipografia */
  --sb-font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --sb-font-display: 'Space Grotesk', 'Inter', sans-serif;
}

/* ---------- 1. PÁGINA ---------- */
body{
  margin:0; background:#fff; color:var(--sb-ink);
  font-family:var(--sb-font-ui); -webkit-font-smoothing:antialiased;
}
/* o gradiente é da PÁGINA e nasce atrás da barra, morrendo em branco por volta de 44% */
.sb-app{
  position:relative; min-height:100vh; padding:24px;
  display:flex; gap:32px;
  background:var(--sb-grad-page); background-attachment:fixed;
}
.sb-app::before{                       /* halo vermelho difuso, evita banding */
  content:""; position:fixed; left:30px; top:70px;
  width:660px; height:660px; border-radius:50%;
  background:var(--sb-red); opacity:.07; filter:blur(190px);
  pointer-events:none; z-index:0;
}
.sb-app > *{ position:relative; z-index:1; }

/* ---------- 2. SIDEBAR FLUTUANTE (branca) ---------- */
.sb-sidebar{
  position:sticky; top:24px; flex:0 0 252px; width:252px;
  height:calc(100vh - 48px); display:flex; flex-direction:column;
  padding:32px 16px 16px; box-sizing:border-box;
  background:var(--sb-surface);
  border:1px solid var(--sb-border);
  border-radius:var(--sb-r-sidebar);
  box-shadow:var(--sb-sh-sidebar);
  overflow:hidden;
}
.sb-sidebar__logo{ width:144px; height:auto; margin:0 8px; }
.sb-sidebar__tag{
  align-self:flex-start; margin:10px 8px 26px; padding:5px 14px;
  border-radius:var(--sb-r-pill);
  background:var(--sb-red-soft); border:1px solid var(--sb-red-line);
  font:700 9px var(--sb-font-ui); letter-spacing:.12em; color:var(--sb-red);
}
.sb-nav{ display:flex; flex-direction:column; gap:6px; }
.sb-nav-item{
  display:flex; align-items:center; gap:10px; height:44px; padding:0 14px;
  border:0; border-radius:14px; background:transparent; cursor:pointer;
  color:var(--sb-text-2); font:500 13.5px/1 var(--sb-font-ui);
}
.sb-nav-item svg{ width:18px; height:18px; fill:none; stroke:var(--sb-text-3); stroke-width:1.7; }
.sb-nav-item:hover{ background:var(--sb-surface-2); color:var(--sb-ink); }
.sb-nav-item.is-active{
  background:var(--sb-red); color:#fff; font-weight:600; box-shadow:var(--sb-sh-nav);
}
.sb-nav-item.is-active svg{ stroke:#fff; }

.sb-sidebar__footer{ margin-top:auto; }
.sb-sidebar__divider{ height:1px; margin:16px 4px; background:var(--sb-border); }
.sb-account{ display:flex; align-items:center; gap:12px; padding:9px;
  border-radius:14px; background:var(--sb-surface-2); }
.sb-avatar{ width:34px; height:34px; border-radius:50%; background:var(--sb-red);
  color:#fff; display:grid; place-items:center; font:700 11.5px var(--sb-font-ui); }

/* ---------- 3. CONTEÚDO ---------- */
.sb-main{ flex:1 1 auto; min-width:0; padding:24px 24px 48px 0; }
.sb-page-title{ margin:0; display:flex; align-items:center; gap:10px;
  font:700 28px/1.2 var(--sb-font-display); color:var(--sb-ink); }
.sb-page-title svg{ width:24px; height:24px; fill:none; stroke:var(--sb-red); stroke-width:1.7; }
.sb-page-sub{ margin:6px 0 0 34px; font-size:13px; color:var(--sb-text-3); }
.sb-section-label{
  margin:36px 0 12px; font:700 10px/1 var(--sb-font-ui);
  letter-spacing:.18em; text-transform:uppercase; color:var(--sb-text-3);
}

/* ---------- 4. SUPERFÍCIE ----------
   No claro o volume vem de sombra + hairline (não do brilho na aresta). */
.sb-panel{
  background:var(--sb-grad-card);
  border:1px solid var(--sb-border);
  border-radius:var(--sb-r-panel);
  box-shadow:var(--sb-sh-panel);
  overflow:hidden;
}

/* card de métrica */
.sb-kpi{ position:relative; padding:26px 24px; }
.sb-kpi__label{ font:700 10px/1 var(--sb-font-ui); letter-spacing:.15em;
  text-transform:uppercase; color:var(--sb-text-3); }
.sb-kpi__value{ margin:14px 0 0; font:700 36px/1 var(--sb-font-display); color:var(--sb-ink); }
.sb-kpi__value small{ margin-left:8px; font:500 15px/1 var(--sb-font-ui); color:var(--sb-text-2); }
.sb-kpi__meta{ margin:14px 0 0; font-size:12px; color:var(--sb-text-3); }
.sb-kpi__icon{ position:absolute; top:22px; right:24px; width:38px; height:38px;
  border-radius:12px; display:grid; place-items:center; }
/* tint do chip por natureza do dado */
.sb-kpi--red    .sb-kpi__icon{ background:#FFECEC; } .sb-kpi--red    .sb-kpi__icon svg{ stroke:var(--sb-red); }
.sb-kpi--violet .sb-kpi__icon{ background:#EFECFB; } .sb-kpi--violet .sb-kpi__icon svg{ stroke:var(--sb-violet); }
.sb-kpi--blue   .sb-kpi__icon{ background:#E8F1FE; } .sb-kpi--blue   .sb-kpi__icon svg{ stroke:var(--sb-blue); }
.sb-kpi--amber  .sb-kpi__icon{ background:#FEF3E2; } .sb-kpi--amber  .sb-kpi__icon svg{ stroke:var(--sb-amber); }
.sb-kpi--amber  .sb-kpi__value{ color:var(--sb-amber); }

/* hero */
.sb-hero{ border-radius:24px; padding:38px 40px; }
.sb-hero__value{ font:700 78px/1 var(--sb-font-display); color:var(--sb-red); }
.sb-hero__unit { margin-left:10px; font:700 32px/1 var(--sb-font-display); color:var(--sb-ink); }

/* barra de distribuição */
.sb-dist{ display:flex; gap:4px; }
.sb-dist span{ height:10px; border-radius:var(--sb-r-pill); }
.sb-dist .is-1{ background:var(--sb-red); }
.sb-dist .is-2{ background:var(--sb-violet); }

/* linha selecionada em lista */
.sb-row{ border:1px solid var(--sb-border); border-radius:14px; background:#fff; padding:14px 16px; }
.sb-row.is-active{ background:var(--sb-red-soft); border-color:var(--sb-red-line); }
.sb-row.is-active .sb-row__time{ color:var(--sb-red); }

/* ---------- 5. CONTROLES ---------- */
.sb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border:0; border-radius:var(--sb-r-pill);
  font:600 13.5px var(--sb-font-ui); cursor:pointer; }
.sb-btn--primary{ background:var(--sb-red); color:#fff; box-shadow:var(--sb-sh-red); }
.sb-btn--primary:hover{ background:var(--sb-red-dark); }
.sb-btn--dark   { background:var(--sb-ink); color:#fff; }
.sb-btn--ghost  { background:#fff; color:var(--sb-ink); font-weight:500;
                  border:1px solid var(--sb-border); box-shadow:var(--sb-sh-ghost); }
.sb-btn--soft   { background:var(--sb-red-soft); color:var(--sb-red);
                  border:1px solid var(--sb-red-line); }

.sb-pill{ height:36px; padding:0 18px; border-radius:var(--sb-r-pill);
  background:#fff; border:1px solid var(--sb-border);
  color:var(--sb-text-2); font:500 12.5px var(--sb-font-ui); cursor:pointer; }
.sb-pill.is-active{ background:var(--sb-red); border-color:var(--sb-red); color:#fff; font-weight:600; }

.sb-field{ width:100%; height:46px; padding:0 16px; box-sizing:border-box;
  background:var(--sb-surface-2); border:1px solid var(--sb-border);
  border-radius:var(--sb-r-field); color:var(--sb-ink); font:400 13.5px var(--sb-font-ui); }
.sb-field::placeholder{ color:var(--sb-text-4); }
.sb-field:focus{ outline:0; border-color:var(--sb-red); box-shadow:0 0 0 3px rgba(237,28,36,.12); }
.sb-label{ display:block; margin-bottom:8px; font:500 12px var(--sb-font-ui); color:var(--sb-text-2); }

/* ---------- 6. LOGIN ---------- */
.sb-login{ min-height:100vh; display:grid; place-content:center; justify-items:center;
  gap:36px; background:var(--sb-grad-page); }
.sb-login__logo{ width:144px; height:auto; }
.sb-login__card{ width:420px; box-sizing:border-box; padding:36px 40px 40px;
  background:#fff; border:1px solid var(--sb-border);
  border-radius:24px; box-shadow:var(--sb-sh-login); }
.sb-login__forgot{ display:block; margin-top:12px; text-align:right;
  font:600 12px var(--sb-font-ui); color:var(--sb-red); text-decoration:none; }
.sb-login__submit{ width:100%; height:48px; margin-top:16px; }
.sb-login__foot{ font:400 11.5px var(--sb-font-ui); color:var(--sb-text-4); }

/* ---------- 7. UPLOAD E ARTE GERADA ---------- */
.sb-dropzone{ display:grid; place-content:center; justify-items:center; gap:6px;
  min-height:160px; text-align:center; border-radius:var(--sb-r-card);
  background:var(--sb-surface-2); border:1px dashed var(--sb-border-2);
  color:var(--sb-text-2); font:500 13.5px var(--sb-font-ui); cursor:pointer; }
.sb-dropzone svg{ width:28px; height:28px; fill:none; stroke:var(--sb-red); stroke-width:1.7; }
.sb-dropzone small{ font-weight:400; font-size:11px; color:var(--sb-text-4); }

/* moldura da arte que o APP gera — o tema define só o box, nunca a arte.
   use style="aspect-ratio:1080/1350" (ou 1080/1920, 16/9) */
.sb-artwork{ display:grid; place-content:center; gap:6px; text-align:center;
  border-radius:var(--sb-r-field); background:var(--sb-surface-2);
  border:1px dashed var(--sb-border-2); color:var(--sb-text-3);
  font:600 12.5px var(--sb-font-ui); }
.sb-artwork small{ font-weight:400; font-size:11px; color:var(--sb-text-4); }
.sb-artwork img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* card do banco de imagens */
.sb-media-card{ background:var(--sb-grad-card); border:1px solid var(--sb-border);
  border-radius:var(--sb-r-card); box-shadow:var(--sb-sh-panel); overflow:hidden; }
.sb-media-card__body{ padding:16px 14px; }
.sb-media-card__pose { font:600 12.5px var(--sb-font-ui); color:var(--sb-ink); }
.sb-media-card__club { margin-top:6px; font:600 11.5px var(--sb-font-ui); color:var(--sb-red); }
.sb-media-card__time { margin-top:5px; font:400 10.5px var(--sb-font-ui); color:var(--sb-text-4); }