body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    background: #f5f6fa;
    color: #1a1a1a;
    margin: 24px;
    line-height: 1.4;
}

header h1 {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    font-weight: 600;
}

header p {
    margin: 0 0 16px 0;
    color: #555;
    font-size: .9rem;
}

.card {
    background: #fff;
    padding: 16px 20px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
    margin-bottom: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 12px;
    margin-bottom: 12px;
}

label {
    font-size: .8rem;
    font-weight: 500;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    font-size: .9rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
}

textarea {
    min-height: 60px;
    font-family: inherit;
}

button {
    background: #4f46e5;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(79,70,229,.3);
    margin-top: 12px;
}

button:hover {
    background: #4338ca;
}

.alert {
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: .9rem;
    margin-bottom: 20px;
}

.combos {
    columns: 2;
    column-gap: 24px;
    padding-left: 20px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: .9rem;
}
@media (max-width:700px){
    .combos { columns:1; }
}
footer {
    font-size: .8rem;
    color:#555;
}
footer ul {
    margin:6px 0 0 18px;
    padding:0;
}

/* ------ LOOK LOTOFÁCIL STYLE ------ */

.bets-wrapper .bets-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 20px;
}

.bet-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #d9dbe3;
    box-shadow: 0 12px 24px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* header roxinho tipo "lotofácil" */
.bet-card-header {
    background: linear-gradient(90deg,#5a007a 0%, #8e1ca8 100%);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bet-game-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bet-game-name {
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.lf-icon {
    background:#fff;
    color:#5a007a;
    font-size:.7rem;
    font-weight:700;
    border-radius:4px;
    padding:2px 4px;
    line-height:1;
    display:inline-block;
}

.bet-sub {
    font-size: .7rem;
    font-weight: 400;
    color: rgba(255,255,255,.9);
}

.bet-meta {
    text-align: right;
    min-width: 60px;
}

.bet-meta-label {
    font-size: .6rem;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    line-height: 1.2;
}
.bet-meta-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

/* corpo com as bolinhas */
.bet-card-body {
    background: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bet-row {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.bet-ball {
    background: #cfd6da;
    color: #000;
    font-weight: 700;
    font-size: .9rem;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", Consolas, monospace;
    line-height: 1;
}

/* rodapé com informações extras */
.bet-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    font-size: .75rem;
    line-height: 1.3;
    color: #1f2937;
}

.bet-price,
.bet-id {
    min-width: 110px;
}

.label-minitext {
    font-size: .65rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 2px;
}

.value-strong {
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
}

.value-dim {
    font-size: .75rem;
    font-weight: 500;
    color: #4b5563;
}

/* badge roxinha de quantidade de jogos */
.badge {
    background:#ede9fe;
    color:#4c1d95;
    font-size:.7rem;
    font-weight:600;
    padding:4px 8px;
    border-radius:999px;
    line-height:1.2;
    border:1px solid #c7bdfd;
}

/* botão secundário roxinho contornado */
.btn-secondary {
    background: #fff;
    color: #5a007a;
    border: 2px solid #5a007a;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-block;
}
.btn-secondary:hover {
    background: #5a007a;
    color: #fff;
}

.app-header {
    background: linear-gradient(90deg,#5a007a 0%, #8e1ca8 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 32px rgba(90,0,122,.4);
    margin-bottom: 24px;
    padding: 16px 20px;
}

.app-header-inner {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
}

.brand-block {
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.brand-icon {
    background:#fff;
    color:#5a007a;
    font-weight:700;
    font-size:.8rem;
    border-radius:8px;
    min-width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 8px 16px rgba(0,0,0,.25);
}

.brand-text {
    line-height:1.2;
    color:#fff;
}
.brand-name {
    font-size:1.1rem;
    font-weight:700;
}
.brand-sub {
    font-size:.75rem;
    font-weight:400;
    color:rgba(255,255,255,.8);
}

.session-block {
    display:flex;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
    color:#fff;
    font-size:.8rem;
    line-height:1.3;
}

.session-user {
    background: rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.3);
    border-radius:10px;
    padding:8px 12px;
    min-width:140px;
    box-shadow:0 8px 16px rgba(0,0,0,.25);
}

.session-label {
    font-size:.65rem;
    color:rgba(255,255,255,.8);
    font-weight:500;
    margin-bottom:2px;
}
.session-value {
    font-size:.8rem;
    font-weight:600;
    color:#fff;
    word-break:break-all;
}

.logout-link {
    align-self:center;
    background:#fff;
    color:#5a007a;
    font-size:.8rem;
    font-weight:600;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
    line-height:1.2;
    border:0;
    box-shadow:0 8px 16px rgba(0,0,0,.3);
}
.logout-link:hover {
    background:#e5e5e5;
}

.login-body {
    background: radial-gradient(circle at 20% 20%, #5a007a 0%, #0a0011 60%);
    min-height: 100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    color:#fff;
}

.login-card {
    background: #fff;
    color:#1f2937;
    width: 100%;
    max-width: 360px;
    border-radius:16px;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
    padding:20px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.login-header {
    display:flex;
    align-items:center;
    gap:12px;
}

.login-brand-icon {
    background:linear-gradient(90deg,#5a007a 0%, #8e1ca8 100%);
    color:#fff;
    font-weight:700;
    font-size:.8rem;
    border-radius:10px;
    min-width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 10px 20px rgba(90,0,122,.4);
}

.login-brand-text {
    line-height:1.2;
}
.login-brand-name {
    font-size:1rem;
    font-weight:700;
    color:#111827;
}
.login-brand-sub {
    font-size:.75rem;
    font-weight:500;
    color:#6b7280;
}

.login-form {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:4px;
}
.login-label {
    font-size:.8rem;
    font-weight:500;
    color:#374151;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.login-input {
    width:100%;
    font-size:.9rem;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #cbd5e1;
    background:#fff;
    box-sizing:border-box;
    font-family: inherit;
}

.login-btn {
    background:linear-gradient(90deg,#5a007a 0%, #8e1ca8 100%);
    color:#fff;
    font-size:.9rem;
    font-weight:600;
    border:0;
    border-radius:10px;
    padding:10px 16px;
    cursor:pointer;
    box-shadow:0 16px 32px rgba(90,0,122,.4);
    line-height:1.2;
}
.login-btn:hover {
    filter:brightness(1.08);
}

.login-hint {
    font-size:.7rem;
    color:#6b7280;
    line-height:1.3;
    text-align:center;
}

/* HEADER LAYOUT NOVO */
.app-header {
    background: linear-gradient(90deg,#5a007a 0%, #8e1ca8 100%);
    color: #fff;
    padding: 12px 16px;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,.45);
}
.app-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
}

/* lado esquerdo: marca + nav */
.brand-left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

/* marca */
.brand-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color:#fff;
}
.brand-icon {
    background:#fff2;
    border:1px solid #fff4;
    color:#fff;
    font-size:.8rem;
    font-weight:600;
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.brand-text {
    display:flex;
    flex-direction:column;
    line-height:1.2;
}
.brand-name {
    font-size:.9rem;
    font-weight:600;
    color:#fff;
}
.brand-sub {
    font-size:.7rem;
    font-weight:400;
    color:#fff9;
}

/* nav */
.main-nav {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
}
.main-nav-link {
    font-size:.8rem;
    font-weight:500;
    color:#fff;
    text-decoration:none;
    line-height:1.4;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid transparent;
    background:rgba(255,255,255,0.06);
    transition:all .15s;
}
.main-nav-link:hover {
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.3);
}
.main-nav-link.active {
    background:#fff;
    color:#4c1d95;
    font-weight:600;
    border-color:#fff;
}

/* bloco sessão/licença à direita */
.session-block {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px 16px;
    color:#fff;
}

.session-user {
    min-width:80px;
}
.session-label {
    font-size:.6rem;
    line-height:1.2;
    font-weight:500;
    color:#fff9;
    margin-bottom:2px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.session-value {
    font-size:.75rem;
    line-height:1.2;
    font-weight:600;
    color:#fff;
    word-break: break-all;
}

.logout-link {
    font-size:.7rem;
    font-weight:500;
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.3);
    padding:6px 10px;
    border-radius:6px;
    line-height:1.2;
    align-self:flex-start;
    transition:.15s;
}
.logout-link:hover {
    background:#fff;
    color:#4c1d95;
    border-color:#fff;
}

/* responsividade */
@media (max-width: 768px) {
    .app-header-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .brand-left {
        flex-direction: column;
        align-items: flex-start;
    }
    .session-block {
        flex-direction: row;
        flex-wrap: wrap;
        border-top:1px solid rgba(255,255,255,0.2);
        padding-top:12px;
    }
}

/* Overlay de tela inteira */
#ia-loading-overlay {
  position: fixed; inset: 0;
  background: rgba(17, 24, 39, .55); /* preto translúcido */
  display: grid; place-items: center;
  z-index: 9999;
}

/* Caixa central */
.ia-loading-box {
  width: min(92vw, 420px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 30px 60px -20px rgba(76,29,149,.35);
  text-align: center;
}

/* Spinner */
.ia-spinner {
  width: 42px; height: 42px;
  border: 4px solid #e5e7eb;
  border-top-color: #8e1ca8;
  border-radius: 50%;
  margin: 6px auto 12px;
  animation: ia-rot 0.9s linear infinite;
}
@keyframes ia-rot { to { transform: rotate(360deg); } }

.ia-loading-title {
  font-weight: 800;
  background: linear-gradient(90deg, #5a007a, #8e1ca8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: 1rem;
  margin-bottom: 2px;
}
.ia-loading-msg {
  font-size: .9rem; color: #374151;
}