/* Dois temas + fundo do portal da Reis (foto, partículas, marca d'água) + cabeçalho segmentado + login. */
:root[data-tema="azul"] {
  --bg: #050c1a; --surface: rgba(10, 25, 47, .75); --surface-solid: #0a192f; --surface-2: #0d2140;
  --primary: #5aa9ff; --primary-2: #2f6fd0; --primary-rgb: 90, 169, 255; --on-primary: #04101f;
  --primary-soft: rgba(90, 169, 255, .13); --primary-line: rgba(255, 255, 255, .12);
  --text: #eaf1fb; --text-2: #a9b8cf; --text-3: #7184a3; --line: rgba(255, 255, 255, .1);
  --field: #08152a; --card: #0c1d36; --track: #17304f; --glass-blur: 16px; --accent: #c59b27;
  --shadow: 0 20px 50px rgba(0, 0, 0, .4);
  --bolha-in: #0f2442; --bolha-out: #135095; --chat-bg: rgba(5, 12, 26, .55);
  --fundo-grad: radial-gradient(1100px 700px at 16% 8%, rgba(63, 141, 240, .24), transparent 60%), radial-gradient(900px 640px at 90% 92%, rgba(150, 90, 255, .18), transparent 62%), linear-gradient(180deg, #071330, #050c1a);
}
:root[data-tema="azul"] .glass, :root[data-tema="azul"] .login-card, :root[data-tema="azul"] .modal { border: 1px solid rgba(255, 255, 255, .12); }
:root[data-tema="azul"] .btn { color: #fff; background: linear-gradient(135deg, #3f8df0, #2a5fc2); }
:root[data-tema="azul"] .btn.ghost { background: transparent; color: var(--text); }
:root[data-tema="azul"] .count, :root[data-tema="azul"] .badge { color: #fff; }
:root[data-tema="azul"] .gold-rule { background: linear-gradient(90deg, #c59b27, transparent); }

/* ---------- fundo: degradê, partículas em canvas e marca d'água (tudo por código) ---------- */
#fundo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fundo-grad, var(--bg)); pointer-events: none; }
#fundo i { position: absolute; inset: 0; display: block; }
.f-part { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.f-wm { background: url(/assets/marca/grupo-reis-empilhada.svg) center 44% / min(48vmin, 540px) no-repeat; opacity: 0; filter: blur(1.4px); }
:root[data-tema="azul"] .f-wm { opacity: .1; }  /* marca d'água entre 8% e 12%, só no painel azul */
body::before { display: none; }

/* ---------- cabeçalho do canto superior esquerdo ---------- */
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca-coroa img { height: 56px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(212, 175, 55, .38)); }
.marca-coroa.compacta img { height: 40px; }
.marca-azul img { width: 48px; height: 48px; border-radius: 12px; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.marca-azul.compacta img { width: 38px; height: 38px; }
.marca-txt { display: grid; line-height: 1.15; min-width: 0; }
.marca-txt b { font: 800 16.5px/1.1 var(--font-sans); letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
.marca-txt span { font-size: 12.5px; color: var(--text-2); letter-spacing: .2px; }

/* ---------- barra de carregamento e giro ---------- */
#topload { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; transition: opacity .2s; }
#topload.on { opacity: 1; animation: carga 1.2s ease-in-out infinite; }
@keyframes carga { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .25); border-top-color: currentColor; border-radius: 50%; animation: gira .7s linear infinite; vertical-align: -3px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- entrada (login e convite) ---------- */
.login { position: relative; isolation: isolate; }
.login-brand { position: relative; padding: clamp(24px, 3.4vw, 48px) clamp(28px, 5vw, 80px); }
.login-txt { max-width: min(560px, 58%); }
.login-brand h1 { font-size: clamp(38px, 4.2vw, 64px); }
.login-mascote { position: absolute; right: clamp(8px, 2.6vw, 52px); bottom: 3%; width: clamp(250px, 27vw, 440px); height: min(68vh, 660px); z-index: 2; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--field); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--text-2); font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.seg button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg button[aria-pressed=true] { background: var(--primary-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary-line); }
.login-card { backdrop-filter: blur(var(--glass-blur)); }
@media (max-width: 860px) {
  .login-brand { padding: 20px 20px 4px; gap: 10px; }
  .login-txt { max-width: none; }
  .login-brand h1 { font-size: 34px; }
  .login-brand p.faint { display: none; }
  .login-mascote { position: relative; right: auto; bottom: auto; width: 100%; height: 250px; margin-top: -6px; }
}

/* ---------- painel: barra lateral com a Bia, rodapé e Gestor ---------- */
.rail { gap: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent); backdrop-filter: blur(var(--glass-blur)); }
.rail-mascote { flex: 1; min-height: 180px; max-height: 300px; position: relative; margin: -4px -8px; }
.rail-vazio { flex: 1; }
@media (max-height: 760px) { .rail-mascote { display: none; } .rail-vazio { display: none; } }
.rail-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.gestor-btn { display: inline-flex; align-items: center; gap: 6px; opacity: .6; text-decoration: none; }
.gestor-btn:hover { opacity: 1; }
.gestor-btn svg, .gestor-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topbar { gap: 12px; }
.top-act { display: flex; align-items: center; gap: 12px; }
.gestor-mini { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.demo-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 8px 16px; border: 1px solid var(--primary-line); border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--text); text-decoration: none; font-size: 13.5px; }
.demo-faixa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.demo-faixa b { color: var(--primary); }
.main-wa { max-width: none; padding-top: 20px; padding-bottom: 28px; }

/* ---------- chips, selos e extras ---------- */
.chip.ouro { color: #d4af37; border-color: rgba(212, 175, 55, .45); }
.chip.azul { color: #5aa9ff; border-color: rgba(90, 169, 255, .45); }
.chip.mini { font-size: 11.5px; padding: 2px 9px; margin-top: 6px; }
.chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip.pulse { animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .14); } }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; flex: none; }
.badge.soft { background: var(--primary-soft); color: var(--text); }
.ident { padding: 14px 16px; border: 1px dashed var(--primary-line); border-radius: var(--radius-s); color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ident b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .chip.pulse, #topload.on { animation: none; } }

/* ---------- marcador de versão ---------- */
#versao { position: fixed; left: 12px; bottom: 6px; z-index: 6; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(0, 0, 0, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 10.5px/1.3 var(--font-sans); letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--text-2); opacity: .8; pointer-events: none; user-select: none; }
#versao:empty { display: none; }
@media (max-width: 900px) { body:has(.tabbar) #versao { bottom: calc(66px + env(safe-area-inset-bottom)); } .login-form, .ativa { padding-bottom: 52px; } }