:root {
  --navy-950: #031a38;
  --navy-900: #06264f;
  --navy-800: #08366e;
  --blue-700: #0758bd;
  --blue-600: #0b6ee8;
  --blue-100: #eaf3ff;
  --orange-600: #f36f0a;
  --orange-500: #ff8200;
  --ink-950: #0b1930;
  --ink-700: #35435a;
  --ink-500: #657187;
  --line: #dbe2ec;
  --line-dark: #c8d2df;
  --surface: #ffffff;
  --canvas: #f5f7fa;
  --success: #16883d;
  --shadow: 0 16px 40px rgba(14, 36, 68, 0.12);
  font-family:
    Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink-950);
  background: var(--canvas);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
}

button,
select,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

.auth-gate {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 34px 18px;
  color: white;
  background:
    radial-gradient(circle at 75% 18%, rgba(11, 110, 232, 0.34), transparent 34%),
    linear-gradient(145deg, var(--navy-950), var(--navy-800));
}

.auth-brand {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
}

.auth-brand-logo {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.auth-card {
  width: min(480px, 100%);
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: var(--ink-950);
  background: white;
  box-shadow: 0 28px 80px rgba(0, 12, 34, 0.35);
}

.auth-copy h1 {
  margin-bottom: 8px;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.auth-copy p,
.auth-security {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.55;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 24px 0 20px;
  padding: 4px;
  border-radius: 7px;
  background: var(--canvas);
}

.auth-tab {
  min-height: 40px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-500);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.auth-tab.active {
  color: var(--blue-700);
  background: white;
  box-shadow: 0 2px 8px rgba(23, 46, 78, 0.08);
}

.auth-form {
  display: grid;
  gap: 15px;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form label > span {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  color: var(--ink-950);
  background: white;
  font-size: 13px;
}

.auth-form input:focus {
  border-color: var(--blue-600);
  outline: 3px solid rgba(11, 110, 232, 0.14);
}

.lottery-code-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.lottery-code-control button,
.auth-primary {
  min-height: 44px;
  border: 1px solid var(--blue-700);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.lottery-code-control button {
  padding: 0 14px;
  color: var(--blue-700);
  background: white;
}

.auth-primary {
  margin-top: 3px;
  color: white;
  background: var(--blue-700);
}

.auth-primary:disabled {
  border-color: var(--line-dark);
  color: var(--ink-500);
  background: var(--line);
  cursor: not-allowed;
}

.lottery-verification {
  padding: 13px;
  border: 1px solid #a9d5b6;
  border-radius: 6px;
  color: var(--ink-700);
  background: #f0faf3;
  font-size: 11px;
  line-height: 1.55;
}

.lottery-verification strong,
.lottery-verification span {
  display: block;
}

.lottery-verification strong {
  color: var(--success);
  font-size: 12px;
}

.auth-feedback {
  min-height: 18px;
  margin: 14px 0 0;
  color: #b4232e;
  font-size: 11px;
}

.auth-feedback.success {
  color: var(--success);
}

.auth-security {
  position: absolute;
  bottom: 18px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.app-shell {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: white;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  transition: width 180ms ease, transform 180ms ease;
  z-index: 5;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 74px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 20px;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 2px solid white;
  border-radius: 50%;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.brand-mark::after {
  inset: 14px;
  border: 0;
  background: var(--orange-500);
}

.brand-logo {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

.sidebar-collapsed .brand-logo {
  height: 42px;
}

.main-nav {
  display: grid;
  gap: 5px;
  padding: 20px 0;
}

.nav-item,
.help-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: 0;
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.nav-item:hover,
.help-button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: white;
}

.nav-item.active {
  color: white;
  background: linear-gradient(90deg, rgba(11, 110, 232, 0.42), rgba(11, 110, 232, 0.2));
}

.nav-item.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--orange-500);
}

.nav-count {
  margin-left: auto;
  min-width: 23px;
  padding: 2px 6px;
  border-radius: 12px;
  color: white;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  text-align: center;
}

.help-button {
  margin-top: auto;
  margin-bottom: 18px;
}

.nav-icon,
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-icon] svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-area {
  min-width: 0;
  background: var(--canvas);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

.menu-button,
.detail-header button,
.dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-950);
  background: transparent;
}

.menu-button:hover,
.detail-header button:hover,
.dialog-close:hover {
  background: var(--canvas);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contracted-lottery {
  display: grid;
  gap: 1px;
  padding-right: 2px;
  text-align: right;
}

.contracted-lottery strong {
  color: var(--ink-950);
  font-size: 11px;
}

.contracted-lottery span {
  color: var(--ink-500);
  font-size: 9px;
}

.session-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-500);
  font-size: 12px;
  font-weight: 600;
}

.collector-status-stack {
  display: grid;
  gap: 4px;
  min-width: 360px;
  max-width: min(640px, 48vw);
}

.collector-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.collector-status-line strong {
  color: var(--ink-950);
  font-size: 12px;
}

.collector-status-line span {
  overflow: hidden;
  color: var(--ink-500);
  text-overflow: ellipsis;
}

.quick-collector-progress {
  display: grid;
  grid-template-columns: minmax(86px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #657286;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.quick-collector-progress > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-collector-bar {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8e1ea;
  box-shadow: inset 0 0 0 1px rgba(31, 66, 99, 0.06);
}

.quick-collector-bar::before {
  position: absolute;
  inset: 0;
  width: var(--quick-progress);
  min-width: 6px;
  border-radius: inherit;
  background: linear-gradient(90deg, #006eb6, #18a35f);
  content: "";
  transition: width 260ms ease;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a9b2c0;
}

.status-dot.connected {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 136, 61, 0.13);
}

.status-dot.scanning {
  animation: status-pulse 1.2s ease-in-out infinite;
}

.status-dot.error {
  background: #c92b36;
  box-shadow: 0 0 0 3px rgba(201, 43, 54, 0.13);
}

@keyframes status-pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(22, 136, 61, 0.05);
    opacity: 0.62;
  }
}

.login-button,
.dialog-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--blue-700);
  border-radius: 5px;
  color: white;
  background: var(--blue-700);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.login-button:hover,
.dialog-primary:hover {
  background: #064da3;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(650px, 1fr) 470px;
  min-height: calc(100vh - 112px);
}

/* Aviso noturno da CAIXA (22h-05h) — banner âmbar acima do conteúdo, todas as abas. */
.night-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 32px 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fdf3d7, #fbead0);
  border: 1px solid #f0d391;
  color: #7a5a12;
  box-shadow: 0 1px 3px rgba(122, 90, 18, 0.08);
}
.night-notice-icon { font-size: 17px; line-height: 1.5; flex-shrink: 0; }
.night-notice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.night-notice-text strong { font-size: 13px; color: #6b4e0f; font-weight: 700; }
.night-notice-text b { color: #6b4e0f; }
.night-notice-close {
  flex-shrink: 0;
  background: none; border: none; color: #a67c1a;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.night-notice-close:hover { color: #6b4e0f; }
@media (max-width: 760px) { .night-notice { margin: 0 12px 8px; } }

/* Banner de AVISO do admin (mural) — mesma base do aviso da CAIXA, cor pelo tipo. */
.app-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 32px 4px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.app-banner-icon { font-size: 17px; line-height: 1.5; flex-shrink: 0; }
.app-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; }
.app-banner-text strong { font-size: 13px; font-weight: 700; }
.app-banner-close { flex-shrink: 0; background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.7; color: inherit; }
.app-banner-close:hover { opacity: 1; }
.app-banner--info { background: linear-gradient(180deg, #eaf3fd, #dcecfb); border-color: #b6d4f0; color: #144e86; }
.app-banner--info .app-banner-text strong { color: #0f3d6b; }
.app-banner--aviso { background: linear-gradient(180deg, #fdf3d7, #fbead0); border-color: #f0d391; color: #7a5a12; }
.app-banner--aviso .app-banner-text strong { color: #6b4e0f; }
.app-banner--sucesso { background: linear-gradient(180deg, #e6f6ec, #d6f0df); border-color: #a7dcb8; color: #1c6b3a; }
.app-banner--sucesso .app-banner-text strong { color: #145a2e; }
@media (max-width: 760px) { .app-banner { margin: 0 12px 8px; } }

/* Formulário "Enviar aviso" no painel admin. */
.announce-form { display: flex; flex-direction: column; gap: 10px; }
.announce-input, .announce-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d8e2ec; border-radius: 10px;
  font-size: 14px; font-family: inherit; background: #fbfdff; color: #143b63; box-sizing: border-box;
}
.announce-textarea { resize: vertical; min-height: 64px; }
.announce-input:focus, .announce-textarea:focus { outline: none; border-color: #1274bd; }
.announce-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.announce-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6d7f90; }
.announce-field select { padding: 8px 10px; border: 1px solid #d8e2ec; border-radius: 8px; font-size: 13px; background: #fff; color: #143b63; }
.announce-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #143b63; }
.announce-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.announce-feedback { font-size: 13px; color: #1c8a4a; font-weight: 600; }

/* Card do Dogwatcher (admin): status + botao liga/desliga */
.dog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dog-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.dog-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.dog-on { color: #1c8a4a; }
.dog-on .dog-dot { background: #22b45f; box-shadow: 0 0 0 4px rgba(34, 180, 95, 0.18); animation: dogPulse 1.6s ease-in-out infinite; }
.dog-off { color: #c23b3b; }
.dog-off .dog-dot { background: #d64545; box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.16); }
@keyframes dogPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 180, 95, 0.22); }
  50% { box-shadow: 0 0 0 7px rgba(34, 180, 95, 0.06); }
}
@media (prefers-reduced-motion: reduce) { .dog-on .dog-dot { animation: none; } }

/* Zona de desligar TUDO (admin) + tela pos-desligamento */
.shutdown-zone {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e3b6b6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.admin-btn-shutdown {
  background: #c23b3b; color: #fff; border-color: #a92f2f; font-weight: 700;
}
.admin-btn-shutdown:hover { background: #a92f2f; }
.admin-btn-shutdown:disabled { opacity: .6; cursor: default; }
.shutdown-screen {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: 24px;
  background: #0e1b2a; color: #e8eef7; font-family: inherit;
}
.shutdown-screen .shutdown-icon { font-size: 64px; color: #d64545; }
.shutdown-screen h1 { margin: 0; font-size: 28px; }
.shutdown-screen p { margin: 0; color: #b9c7d6; max-width: 460px; line-height: 1.5; }
.shutdown-screen .shutdown-hint { margin-top: 10px; color: #8fb4ff; }

.overview-view .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.overview-view .content {
  padding: 0;
}

.content {
  min-width: 0;
  padding: 26px 28px 20px;
}

.overview-dashboard {
  min-height: calc(100vh - 112px);
  padding: 30px;
  background:
    radial-gradient(circle at 84% 3%, rgba(33, 147, 85, 0.1), transparent 24%),
    linear-gradient(180deg, #f4f8f6 0%, #f7f9fb 38%, #f5f7fa 100%);
}

.overview-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 245px;
  overflow: hidden;
  padding: 34px 40px;
  border: 1px solid rgba(208, 184, 112, 0.66);
  border-radius: 18px;
  color: white;
  background:
    radial-gradient(circle at 77% 25%, rgba(238, 211, 139, 0.18), transparent 25%),
    linear-gradient(118deg, #073d2d 0%, #0b5b3c 52%, #06402e 100%);
  box-shadow: 0 24px 60px rgba(8, 67, 47, 0.2);
}

.overview-hero::before,
.overview-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(237, 212, 145, 0.16);
  border-radius: 50%;
}

.overview-hero::before {
  width: 310px;
  height: 310px;
  right: -80px;
  bottom: -210px;
}

.overview-hero::after {
  width: 190px;
  height: 190px;
  right: 135px;
  top: -130px;
}

.overview-hero-copy,
.overview-hero-ring {
  position: relative;
  z-index: 1;
}

.overview-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 23px;
}

.overview-brand-lockup img {
  width: 184px;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.24);
}

.overview-brand-lockup span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-hero-copy > p {
  margin-bottom: 7px;
  color: #ead398;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-hero-copy h1 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.overview-location {
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
}

.overview-location span + span::before {
  content: "·";
  margin-right: 10px;
  color: #ead398;
}

.overview-lottery-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.overview-lottery-picker > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2a4d6e;
}

.overview-lottery-picker select {
  background: #ffffff;
  color: #143b63;
  border: 1px solid #9db4cb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  max-width: 360px;
  box-shadow: 0 2px 6px rgba(32, 67, 97, 0.12);
}

.overview-lottery-picker select option {
  color: #143b63;
}

.overview-lottery-picker select:disabled {
  opacity: 0.6;
  cursor: default;
}

.overview-hero-ring,
.modality-progress-ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#efd28d var(--progress), rgba(255, 255, 255, 0.13) 0);
}

.overview-hero-ring {
  width: 150px;
  height: 150px;
  margin: 0 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.overview-hero-ring::before,
.modality-progress-ring::before {
  content: "";
  grid-area: 1 / 1;
  border-radius: 50%;
  background: #0a5038;
}

.overview-hero-ring::before {
  width: 122px;
  height: 122px;
}

.overview-hero-ring div {
  z-index: 1;
  display: grid;
  gap: 3px;
  text-align: center;
}

.overview-hero-ring strong {
  color: #f4dda4;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.overview-hero-ring span {
  width: 82px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  line-height: 1.4;
}

.overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 18px 0;
}

.overview-kpis article,
.overview-distribution,
.overview-modalities {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  border: 1px solid #dce6e1;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(26, 60, 47, 0.055);
}

.overview-kpis article {
  display: grid;
  min-height: 128px;
  padding: 20px;
  border-radius: 12px;
}

.overview-kpis article span {
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
}

.overview-kpis article strong {
  align-self: center;
  color: #094d37;
  font-size: clamp(23px, 2.5vw, 34px);
  letter-spacing: -0.04em;
}

.overview-kpis article small {
  color: var(--ink-500);
  font-size: 9px;
}

.overview-kpis .featured-kpi {
  border-color: #d8c186;
  background: linear-gradient(145deg, #fffdf7, #f7f0db);
}

.overview-kpis .featured-kpi strong {
  color: #795f18;
}

.overview-distribution,
.overview-modalities {
  padding: 24px;
  border-radius: 14px;
}

.overview-modalities {
  overflow: hidden;
  padding-bottom: 0;
  border-color: #c9b27c;
  background:
    linear-gradient(90deg, rgba(180, 149, 82, 0.07), transparent 12%, transparent 88%, rgba(180, 149, 82, 0.07)),
    linear-gradient(180deg, #fffefa, #f8f5ef);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 14px 34px rgba(67, 50, 22, 0.09);
}

.overview-distribution {
  margin-bottom: 18px;
}

.overview-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.overview-section-heading h2 {
  margin-bottom: 4px;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.overview-section-heading p {
  margin: 0;
  color: var(--ink-500);
  font-size: 10px;
}

.overview-section-heading > strong {
  color: #0b5b3c;
  font-size: 12px;
}

.overview-section-heading button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #b9d1c5;
  border-radius: 6px;
  color: #0b5b3c;
  background: #f5faf7;
  font-size: 10px;
  font-weight: 800;
}

.overview-section-heading button:hover {
  border-color: #0b5b3c;
  background: white;
}

.overview-stacked-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  padding: 9px 13px 9px 68px;
  border: 2px solid #865900;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fff2a0 0%, #e4a811 17%, #704200 42%, #211300 54%, #b77a05 76%, #ffdc58 100%);
  box-shadow:
    0 8px 12px rgba(65, 42, 3, 0.26),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 3px rgba(55, 31, 0, 0.65);
}

.overview-stacked-emblem {
  position: absolute;
  z-index: 3;
  left: 5px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
}

.overview-stacked-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 34px;
  overflow: hidden;
  border: 2px solid #d7a72d;
  border-radius: 999px;
  background: linear-gradient(180deg, #353a3e, #030303 55%, #171a1c);
  box-shadow:
    inset 0 6px 8px rgba(0, 0, 0, 0.95),
    inset 0 -3px 4px rgba(255, 255, 255, 0.16);
}

.overview-stacked-track::after {
  position: absolute;
  z-index: 4;
  top: 3px;
  right: 8px;
  left: 8px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent);
  pointer-events: none;
  content: "";
}

.overview-stacked-track span {
  display: block;
  min-width: 0;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 5px 7px rgba(255, 255, 255, 0.36),
    inset 0 -6px 7px rgba(0, 0, 0, 0.38);
}

.overview-stacked-track span[style="width:0%"] {
  border: 0;
  box-shadow: none;
}

.overview-stacked-track .sold {
  background:
    linear-gradient(180deg, #d9fff2 0%, #56e5b0 16%, #07966c 48%, #034e3d 78%, #1eb982 100%);
  box-shadow:
    inset 0 5px 7px rgba(230, 255, 247, 0.58),
    inset 0 -6px 7px rgba(0, 50, 38, 0.55),
    0 0 8px rgba(19, 190, 132, 0.38);
}

.overview-stacked-track .downloaded {
  background: linear-gradient(180deg, #76d3ff, #1883ed 48%, #064da8);
}

.overview-stacked-track .reserved {
  background: linear-gradient(180deg, #ffd373, #f47b0a 48%, #a93b00);
}

.overview-stacked-track .available {
  background:
    linear-gradient(180deg, #747c80 0%, #24292c 18%, #050606 50%, #000 72%, #262b2e 100%);
  box-shadow:
    inset 0 5px 7px rgba(255, 255, 255, 0.26),
    inset 0 -6px 7px rgba(0, 0, 0, 0.88);
}

.overview-legend {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 18px;
  margin-top: 14px;
}

.overview-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 9px;
}

.overview-legend-item i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--legend-color);
}

.overview-legend-item strong {
  color: var(--ink-700);
}

.modality-performance-list {
  display: grid;
  margin: 0 -24px;
  border-top: 1px solid #d8ccba;
  background: rgba(255, 255, 255, 0.35);
}

.modality-performance-row {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(200px, 1.05fr) 188px 138px 58px;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  padding: 12px 28px;
  border-bottom: 1px solid #d8ccba;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.95), transparent 28%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), rgba(248, 245, 238, 0.72));
}

.modality-performance-row:last-child {
  border-bottom: 0;
}

.modality-performance-name {
  display: flex;
  align-items: center;
  gap: 20px;
}

.modality-emblem-image {
  display: block;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(48, 36, 15, 0.24));
}

.modality-emblem {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, 24px);
  gap: 2px;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-content: center;
  padding: 10px;
  border: 2px solid #c9a950;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.76), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--modality-color) 60%, white), var(--modality-color) 68%, color-mix(in srgb, var(--modality-color) 66%, black));
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.38),
    inset 0 -8px 14px rgba(0, 0, 0, 0.18),
    0 5px 9px rgba(48, 36, 15, 0.27);
}

.modality-emblem::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 1px solid rgba(128, 99, 35, 0.42);
  border-radius: 20px;
  background: linear-gradient(145deg, #f9e6a4, #8d681d 45%, #f7dfa0);
}

.modality-emblem span {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(143, 100, 20, 0.7);
  background:
    radial-gradient(circle at 30% 25%, white 0 36%, rgba(255, 255, 255, 0.94) 37% 47%, transparent 49%),
    linear-gradient(145deg, color-mix(in srgb, var(--modality-color) 35%, white), var(--modality-color));
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(75, 48, 10, 0.55);
}

.modality-emblem span:nth-child(1) {
  border-radius: 15px 15px 4px 15px;
}

.modality-emblem span:nth-child(2) {
  border-radius: 15px 15px 15px 4px;
}

.modality-emblem span:nth-child(3) {
  border-radius: 15px 4px 15px 15px;
}

.modality-emblem span:nth-child(4) {
  border-radius: 4px 15px 15px 15px;
}

.modality-performance-name div,
.modality-performance-result {
  display: grid;
  gap: 4px;
}

/* Valores por modalidade: com/sem tarifa, a vender e o lucro da tarifa */
.modality-performance-money {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modality-performance-money > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.modality-performance-money > div > span {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.modality-performance-money > div > strong {
  color: #143b63;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.modality-performance-money .fee {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed #cdbfa8;
}
.modality-performance-money .fee > span {
  font-weight: 700;
}
.modality-performance-money .fee > strong {
  font-size: 13.5px;
  font-weight: 800;
}
.modality-performance-money .fee > span,
.modality-performance-money .fee > strong {
  color: #1c8a4a; /* lucro da tarifa em verde, destacado */
}
.modality-performance-money .money-empty {
  color: #9aa7b3;
  font-size: 13px;
}

/* Total geral (soma de todas as modalidades) no rodapé da seção */
.modality-performance-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 16px 28px;
  border-top: 2px solid #c9b9a0;
  background: linear-gradient(90deg, rgba(243, 248, 244, 0.9), rgba(248, 245, 238, 0.6));
}
.modality-performance-total > strong {
  font-size: 15px;
  color: #143b63;
}
.mpt-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.mpt-values > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mpt-values > div > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #6d7f90;
}
.mpt-values > div > strong {
  font-size: 17px;
  color: #143b63;
  font-variant-numeric: tabular-nums;
}
.mpt-values .fee > span,
.mpt-values .fee > strong {
  color: #1c8a4a; /* lucro total da tarifa em verde */
}

.modality-performance-name strong {
  color: color-mix(in srgb, var(--modality-color) 76%, #16283d);
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 1px 0 white;
}

.modality-performance-name span,
.modality-performance-result span {
  color: var(--ink-500);
  font-size: 11px;
}
/* "restam X cotas a venda": BOTAO 3D laranja ESTATICO com uma luz girando em volta (border beam) */
@property --beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.modality-performance-result span.cotas-alerta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb257 0%, var(--orange-500) 52%, #d76f0e 100%);
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(120, 55, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(150, 70, 0, 0.5),
    0 2px 5px rgba(180, 90, 10, 0.45);
}
/* anel de luz que dá a volta na borda */
.modality-performance-result span.cotas-alerta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--beam-a),
    transparent 0deg,
    transparent 250deg,
    rgba(255, 255, 255, 0.45) 300deg,
    #ffffff 320deg,
    rgba(255, 255, 255, 0.45) 340deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 2.6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes beamSpin {
  to { --beam-a: 360deg; }
}
@keyframes cotasBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .modality-performance-result span.cotas-alerta::before { animation: none; opacity: 0.55; }
}

/* Coluna 2: rótulo do "zero a zero" acima + barra de progresso abaixo */
.modality-performance-trackwrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Quanto ainda falta vender p/ o lotérico cobrir o custo do bolão (não ter prejuízo) */
.modality-breakeven {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid #e6c98a;
  background: linear-gradient(180deg, #fff8e8, #fdeecb);
  color: #8a5a12;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.modality-breakeven strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #b3600a;
  font-variant-numeric: tabular-nums;
}
.modality-breakeven em {
  flex: none;
  font-style: normal;
  font-weight: 700;
  color: #a06a1c;
  opacity: 0.85;
  white-space: nowrap;
}
.modality-breakeven.reached {
  justify-content: center;
  gap: 6px;
  border-color: #a7dcb8;
  background: linear-gradient(180deg, #eafaef, #d7f2e0);
  color: #1c8a4a;
  font-weight: 700;
}
.modality-breakeven.reached [data-icon] {
  font-size: 12px;
}

/* Marcador vertical do ponto de equilíbrio sobre a barra */
.modality-breakeven-mark {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 2;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, #ffd15c 0 4px, #7a5200 4px 7px);
  box-shadow: 0 0 5px rgba(255, 209, 92, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.modality-performance-track {
  position: relative;
  height: 38px;
  overflow: visible;
  padding: 6px;
  border: 2px solid #b88d34;
  border-radius: 99px;
  background: linear-gradient(180deg, #f7e1a7 0%, #765011 16%, #d9b75c 48%, #74500f 82%, #f3d98f 100%);
  box-shadow:
    inset 0 1px 0 white,
    0 4px 8px rgba(59, 43, 14, 0.28);
}

.modality-performance-track::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: linear-gradient(180deg, #343434 0%, #080808 48%, #1c1c1c 100%);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.95),
    inset 0 -1px 2px rgba(255, 255, 255, 0.18);
}

.modality-performance-fill {
  position: relative;
  z-index: 1;
  display: block;
  height: 22px;
  max-width: 100%;
  min-width: 5px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, transparent 25%, transparent 73%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--modality-color) 75%, white), var(--modality-color));
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 0, 0, 0.32),
    0 0 7px color-mix(in srgb, var(--modality-color) 72%, transparent);
}

.modality-performance-result {
  justify-items: end;
  text-align: right;
}

.modality-performance-result strong {
  color: color-mix(in srgb, var(--modality-color) 78%, #17253a);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 0 white;
}

.modality-progress-ring {
  width: 50px;
  height: 50px;
  background: conic-gradient(
    color-mix(in srgb, var(--modality-color) 78%, white) 0,
    var(--modality-color) var(--progress),
    #eee9df var(--progress),
    #eee9df 100%
  );
  box-shadow:
    0 0 0 2px #a9802f,
    0 0 0 4px #f5df9c,
    0 4px 7px rgba(60, 43, 13, 0.24);
}

.modality-progress-ring::before {
  width: 34px;
  height: 34px;
  background: linear-gradient(145deg, #fffefa, #f2eee6);
  box-shadow:
    inset 0 0 0 1px rgba(145, 109, 38, 0.42),
    0 1px 2px white;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

h1,
h2,
p {
  margin-top: 0;
}

.page-heading h1 {
  margin-bottom: 7px;
  font-size: clamp(25px, 2vw, 32px);
  letter-spacing: -0.03em;
}

.page-heading p {
  margin-bottom: 0;
  color: var(--ink-500);
  font-size: 14px;
}

.updated-at {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-500);
  font-size: 11px;
  white-space: nowrap;
}

.updated-at [data-icon] svg {
  width: 15px;
  height: 15px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(125px, 1fr)) auto;
  align-items: end;
  gap: 15px;
  margin-bottom: 20px;
}

.modality-filter-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.modality-filter-group > span {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
}

.modality-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modality-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: white;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.modality-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.modality-chip:hover {
  border-color: var(--chip-color, var(--blue-600));
  color: var(--ink-950);
}

.modality-chip.active {
  border-color: var(--chip-color, var(--blue-700));
  background: var(--chip-color, var(--blue-700));
  color: white;
  box-shadow: 0 4px 10px rgba(11, 25, 48, 0.18);
}

.modality-chip.active .modality-chip-dot {
  background: rgba(255, 255, 255, 0.85) !important;
}

/* contador dentro do chip (ex.: "Mega-Sena 3") */
.modality-chip em {
  font-style: normal;
  font-weight: 700;
  opacity: 0.65;
  margin-left: 1px;
}
.modality-chip.active em {
  opacity: 0.9;
}

/* chips do "Meus Bolões": SEMPRE preenchidos com a cor do jogo */
.modality-chip.filled {
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(11, 25, 48, 0.16);
}
.modality-chip.filled .modality-chip-dot { display: none; }
.modality-chip.filled em { opacity: 0.82; }
.modality-chip.filled:hover {
  color: #fff;
  filter: brightness(1.07);
}
.modality-chip.filled.active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chip-color), 0 5px 14px rgba(11, 25, 48, 0.3);
}

/* Barra de modalidades do "Meus Bolões" (chips das modalidades com bolão disponível) */
.explore-modality-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}
.explore-modality-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .explore-modality-bar { gap: 8px; }
  .explore-modality-label { width: 100%; margin-bottom: -4px; }
}

.filters label {
  display: grid;
  gap: 7px;
}

.filters label span {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
}

select,
.clear-filters {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  color: var(--ink-950);
  background: white;
  font-size: 12px;
}

select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(11, 110, 232, 0.25);
  outline-offset: 2px;
}

.clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  white-space: nowrap;
}

.clear-filters:hover {
  border-color: var(--blue-600);
  color: var(--blue-700);
}

.clear-filters [data-icon] svg {
  width: 16px;
  height: 16px;
}

.table-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  box-shadow: 0 7px 25px rgba(23, 46, 78, 0.04);
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

th,
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--ink-700);
  background: #f8fafc;
  font-size: 10px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover,
tbody tr.selected {
  background: #f3f8ff;
}

tbody tr.selected {
  box-shadow: inset 3px 0 var(--blue-600);
}

.modality-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 104px;
  font-weight: 700;
}

.detail-captured {
  display: block;
  margin-top: 3px;
  color: var(--success);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
}

.lottery-cell {
  display: block;
  min-width: 112px;
}

.lottery-cell > span {
  display: block;
}

.lottery-cell small {
  display: block;
  margin-top: 3px;
  color: var(--blue-700);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
}

.lottery-symbol {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 2px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  flex: 0 0 16px;
}

.lottery-symbol span {
  border-radius: 50%;
  background: var(--lottery-color);
}

.explore-modality-logo {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(48, 36, 15, 0.2));
}

.follow-button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--blue-600);
  border-radius: 4px;
  color: var(--blue-700);
  background: white;
  font-size: 10px;
  font-weight: 700;
}

.follow-button:hover,
.follow-button.following {
  color: white;
  background: var(--blue-700);
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 49px;
  padding: 0 14px;
  color: var(--ink-500);
  font-size: 10px;
}

.source-note {
  color: #8a95a6;
}

.empty-state {
  padding: 62px 20px;
  color: var(--ink-500);
  text-align: center;
}

.empty-state [data-icon] svg {
  width: 36px;
  height: 36px;
  color: var(--blue-600);
}

.empty-state h2 {
  margin: 14px 0 6px;
  color: var(--ink-950);
  font-size: 18px;
}

.empty-state p {
  margin: 0;
  font-size: 13px;
}

.detail-panel {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  min-width: 0;
  border-left: 1px solid var(--line);
  background: white;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.detail-header h2 {
  margin: 0;
  font-size: 15px;
}

.detail-header [data-icon] svg {
  width: 18px;
  height: 18px;
}

.detail-content {
  padding: 22px 20px;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.detail-title .lottery-symbol {
  grid-template-columns: repeat(2, 12px);
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.detail-title h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.detail-title p {
  margin: 0;
  color: var(--ink-500);
  font-size: 12px;
}

.detail-list {
  display: grid;
  gap: 17px;
  margin: 20px 0;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 12px;
  font-size: 11px;
}

.detail-row dt {
  color: var(--ink-700);
  font-weight: 700;
}

.detail-row dd {
  margin: 0;
}

.cota-count {
  display: block;
}

/* "Faltam X" dos cards: mesmo BOTAO 3D com luz girando do "restam X cotas a venda" */
.cota-missing {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb257 0%, var(--orange-500) 52%, #d76f0e 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(120, 55, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(150, 70, 0, 0.5),
    0 2px 5px rgba(180, 90, 10, 0.45);
}
.cota-missing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--beam-a),
    transparent 0deg,
    transparent 250deg,
    rgba(255, 255, 255, 0.45) 300deg,
    #ffffff 320deg,
    rgba(255, 255, 255, 0.45) 340deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 2.6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .cota-missing::before { animation: none; opacity: 0.55; }
}

.cota-finalized {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #1c8a4a;
  color: white;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* Quebra "online vs impressas" abaixo das cotas (so em bolão detalhado) */
.cota-split {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #6d7f90;
  white-space: normal;
  line-height: 1.5;
}
/* Alerta de cotas RESERVADAS no card: pílula laranja (cor do evento "Reservada"),
   aparece só quando há reserva (qtdCotaReservada > 0). */
.cota-reserved {
  display: inline-block;
  color: #b06a00;
  background: #ffefcf;
  border: 1px solid #f3d79a;
  border-radius: 999px;
  padding: 0 7px;
  font-weight: 800;
  white-space: nowrap;
}

/* Valor da cota SEM tarifa, abaixo do valor com tarifa na tabela */
.price-net {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #6d7f90;
  white-space: nowrap;
}

.numbers-section {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.detail-sync-notice {
  margin: 20px 0;
  padding: 14px;
  border: 1px solid #b7d4f8;
  border-radius: 6px;
  color: var(--ink-700);
  background: var(--blue-100);
  font-size: 11px;
  line-height: 1.55;
}

.detail-sync-notice strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-700);
  font-size: 12px;
}

.detail-sync-notice p {
  margin: 0;
}

.share-summary {
  margin: 20px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.share-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.share-summary-heading h4 {
  margin: 0;
  font-size: 13px;
}

.share-summary-heading span {
  color: var(--ink-500);
  font-size: 9px;
}

.share-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.share-metric {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafc;
}

.share-metric span {
  display: block;
  min-height: 22px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.share-metric strong {
  display: block;
  margin-top: 5px;
  color: var(--blue-700);
  font-size: 18px;
}

.tracking-history {
  margin: 20px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.tracking-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.tracking-overview div,
.tracking-list div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8fafc;
}

.tracking-overview span,
.tracking-list time {
  display: block;
  color: var(--ink-500);
  font-size: 9px;
}

.tracking-overview strong {
  display: block;
  margin-top: 4px;
  color: var(--blue-700);
  font-size: 11px;
}

.tracking-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.tracking-list div {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 6px;
  font-size: 9px;
}

.bets-section {
  margin: 20px 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.bets-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.bets-heading h4 {
  margin: 0;
  font-size: 13px;
}

.bets-heading span {
  color: var(--ink-500);
  font-size: 10px;
}

.bets-list {
  display: grid;
  gap: 10px;
}

.bet-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfe;
}

.bet-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
}

.bet-card header span {
  color: var(--ink-500);
  font-size: 9px;
}

.bet-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bet-numbers .number-ball {
  width: 27px;
  height: 27px;
  font-size: 9px;
}

.technical-details {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.technical-details summary {
  padding: 12px;
  color: var(--blue-700);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.technical-details dl {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 12px 13px;
}

.technical-details dl div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 10px;
}

.technical-details dt {
  color: var(--ink-700);
  font-weight: 700;
}

.technical-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.numbers-section h4 {
  margin: 0 0 12px;
  font-size: 11px;
}

.numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.number-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lottery-color);
  border-radius: 50%;
  color: var(--ink-950);
  background: white;
  font-size: 11px;
  font-weight: 700;
}

.detail-stats {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.detail-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.detail-stat strong {
  color: var(--ink-700);
}

.primary-follow,
.secondary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.primary-follow {
  border: 1px solid var(--orange-600);
  color: white;
  background: var(--orange-600);
}

.primary-follow.following {
  border-color: var(--success);
  background: var(--success);
}

.secondary-action {
  margin-top: 9px;
  border: 1px solid var(--blue-600);
  color: var(--blue-700);
  background: white;
}

.app-footer {
  min-height: 38px;
  padding: 11px 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  background: white;
  font-size: 10px;
}

dialog {
  width: min(480px, calc(100vw - 30px));
  padding: 30px;
  border: 0;
  border-radius: 10px;
  color: var(--ink-950);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(3, 26, 56, 0.62);
}

.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.dialog-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 17px;
  border-radius: 50%;
  color: var(--blue-700);
  background: var(--blue-100);
}

.dialog-icon svg {
  width: 25px;
  height: 25px;
}

dialog h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

dialog p {
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.6;
}

.security-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px;
  color: var(--ink-700);
  font-size: 12px;
}

.security-list > span {
  display: flex;
  gap: 8px;
  align-items: center;
}

.security-list [data-icon] {
  color: var(--success);
}

.security-list [data-icon] svg {
  width: 17px;
  height: 17px;
}

.dialog-primary {
  width: 100%;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  background: var(--navy-900);
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.event-popouts {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}

.event-popout {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue-600);
  background: var(--surface);
  color: var(--ink-950);
  box-shadow: var(--shadow);
  animation: event-popout-in 220ms ease;
}

.event-popout:hover {
  filter: brightness(1.03);
}

.event-popout.closing {
  animation: event-popout-out 180ms ease forwards;
}

.event-popout .event-popout-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
}

.event-popout .event-popout-title {
  font-size: 14px;
  font-weight: 700;
}

.event-popout .event-popout-meta {
  font-size: 12px;
  color: var(--ink-500);
}

.event-popout .event-popout-hint {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Tags sólidas com texto branco: dá pra saber o tipo num relance. */
.event-popout.vendida {
  border-left-color: #16a34a;
}
.event-popout.vendida .event-popout-tag {
  background: #16a34a;
  color: #fff;
}

.event-popout.reservada {
  border-left-color: #d97706;
}
.event-popout.reservada .event-popout-tag {
  background: #d97706;
  color: #fff;
}

.event-popout.impressa {
  border-left-color: #0ea5e9;
}
.event-popout.impressa .event-popout-tag {
  background: #0284c7;
  color: #fff;
}

.event-popout.baixada {
  border-left-color: #8b5cf6;
}
.event-popout.baixada .event-popout-tag {
  background: #8b5cf6;
  color: #fff;
}

.event-popout.premio_disponivel {
  border-left-color: #f59e0b;
}
.event-popout.premio_disponivel .event-popout-tag {
  background: #f59e0b;
  color: #fff;
}

/* Borda esquerda mais grossa reforça a cor do tipo. */
.event-popout {
  border-left-width: 6px;
}

@keyframes event-popout-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes event-popout-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (max-width: 760px) {
  .event-popouts {
    top: auto;
    bottom: 90px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

.sidebar-collapsed .app-shell {
  grid-template-columns: 76px minmax(0, 1fr);
}

.sidebar-collapsed .brand {
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .brand strong,
.sidebar-collapsed .nav-item:not(.active)::after,
.sidebar-collapsed .nav-item {
  font-size: 0;
}

.sidebar-collapsed .nav-item,
.sidebar-collapsed .help-button {
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .nav-count {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
}

@media (max-width: 1180px) {
  .workspace {
    grid-template-columns: minmax(620px, 1fr);
  }

  .detail-panel {
    position: fixed;
    top: 74px;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: min(520px, 94vw);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform 180ms ease;
  }

  .detail-panel.open {
    transform: translateX(0);
  }

  .filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .auth-gate {
    align-content: center;
    padding: 84px 14px 54px;
  }

  .auth-brand {
    top: 22px;
    left: 20px;
  }

  .auth-card {
    padding: 24px 19px;
  }

  .lottery-code-control {
    grid-template-columns: 1fr;
  }

  .auth-security {
    position: static;
    margin-top: 18px;
  }

  .app-shell,
  .sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    width: 252px;
  }

  .mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-menu-open .menu-button {
    position: fixed;
    top: 16px;
    left: 198px;
    z-index: 8;
    color: white;
    background: rgba(255, 255, 255, 0.12);
  }

  .session-status {
    display: none;
  }

  .contracted-lottery {
    display: none;
  }

  .login-button {
    padding: 0 12px;
    font-size: 11px;
  }

  .content {
    padding: 22px 14px;
  }

  .overview-view .content {
    padding: 0;
  }

  .overview-dashboard {
    padding: 14px;
  }

  .overview-hero {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 25px 21px;
  }

  .overview-brand-lockup {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-brand-lockup img {
    width: 165px;
  }

  .overview-hero-ring {
    width: 118px;
    height: 118px;
    margin: 0;
  }

  .overview-hero-ring::before {
    width: 96px;
    height: 96px;
  }

  .overview-hero-ring strong {
    font-size: 21px;
  }

  .overview-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .overview-kpis article {
    min-height: 112px;
    padding: 15px;
  }

  .overview-kpis article strong {
    font-size: 22px;
  }

  .overview-distribution,
  .overview-modalities {
    padding: 18px 15px;
  }

  .overview-modalities {
    padding-bottom: 0;
  }

  .overview-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-legend {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .modality-performance-row {
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
    min-height: 142px;
    padding: 14px 15px;
  }

  .modality-performance-list {
    margin: 0 -15px;
  }

  .modality-performance-name {
    gap: 13px;
  }

  .modality-emblem-image {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .modality-emblem {
    grid-template-columns: repeat(2, 17px);
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    padding: 8px;
    border-radius: 12px;
  }

  .modality-emblem::before {
    inset: -3px;
    border-radius: 15px;
  }

  .modality-emblem span {
    width: 17px;
    height: 17px;
  }

  .modality-performance-name strong {
    font-size: 17px;
  }

  .modality-performance-name span {
    font-size: 9px;
  }

  .modality-performance-track {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 30px;
    padding: 5px;
  }

  .modality-performance-track::before {
    inset: 5px;
  }

  .modality-performance-fill {
    height: 16px;
  }

  .modality-performance-result {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    justify-content: space-between;
    justify-items: initial;
    width: 100%;
    text-align: left;
  }

  .modality-performance-result strong {
    font-size: 18px;
  }

  .modality-performance-result span {
    font-size: 9px;
  }

  .modality-progress-ring {
    grid-column: 2;
    grid-row: 1;
    width: 42px;
    height: 42px;
  }

  .modality-progress-ring::before {
    width: 28px;
    height: 28px;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .source-note {
    display: none;
  }

  .app-footer {
    padding: 11px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ultra-premium 3D theme */
:root {
  --navy-950: #030504;
  --navy-900: #070b09;
  --navy-800: #0b1511;
  --blue-700: #098565;
  --blue-600: #12b886;
  --blue-100: #11261f;
  --orange-600: #b98518;
  --orange-500: #e3b43d;
  --ink-950: #f8efd6;
  --ink-700: #d9cba7;
  --ink-500: #a39e90;
  --line: rgba(205, 157, 47, 0.28);
  --line-dark: rgba(224, 181, 74, 0.46);
  --surface: #0b0f0d;
  --canvas: #060908;
  --success: #20c38a;
  --shadow:
    0 18px 44px rgba(0, 0, 0, 0.52),
    0 2px 4px rgba(0, 0, 0, 0.75);
}

body {
  color: var(--ink-950);
  background:
    radial-gradient(circle at 75% 0%, rgba(9, 133, 101, 0.16), transparent 32%),
    #040605;
}

.auth-gate {
  background:
    radial-gradient(circle at 76% 16%, rgba(11, 154, 112, 0.28), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(210, 158, 39, 0.16), transparent 27%),
    linear-gradient(145deg, #020403, #0a1511 58%, #020302);
}

.auth-card,
dialog {
  border: 1px solid rgba(229, 185, 73, 0.58);
  border-radius: 18px;
  color: var(--ink-950);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.07), transparent 24%),
    linear-gradient(145deg, #151a17, #070a09 62%, #10140f);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}

.auth-tabs,
.lottery-verification,
.detail-sync-notice {
  border: 1px solid rgba(211, 163, 52, 0.32);
  background: linear-gradient(180deg, #131915, #090d0b);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-tab.active {
  color: #58e0ad;
  background: linear-gradient(180deg, #243129, #111814);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 5px 12px rgba(0, 0, 0, 0.42);
}

.auth-form input,
select,
.clear-filters {
  border: 1px solid rgba(211, 163, 52, 0.38);
  border-radius: 9px;
  color: var(--ink-950);
  background:
    linear-gradient(180deg, #151a18, #080b0a);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

select option {
  color: #f8efd6;
  background: #0a0e0c;
}

.auth-form input:focus,
select:focus-visible {
  border-color: #37c896;
  outline-color: rgba(55, 200, 150, 0.2);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.72),
    0 0 0 3px rgba(27, 184, 132, 0.14),
    0 0 18px rgba(27, 184, 132, 0.14);
}

.sidebar {
  border-right: 1px solid rgba(223, 177, 62, 0.42);
  background:
    radial-gradient(circle at 45% 8%, rgba(35, 178, 126, 0.17), transparent 24%),
    linear-gradient(100deg, #030504 0%, #0a100d 52%, #020403 100%);
  box-shadow:
    12px 0 30px rgba(0, 0, 0, 0.48),
    inset -1px 0 rgba(255, 218, 110, 0.12);
}

.brand {
  border-bottom-color: rgba(225, 181, 72, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  text-shadow: 0 2px 3px black;
}

.brand-mark {
  border-color: #e3b43d;
  background: radial-gradient(circle, #16392c, #040706 72%);
  box-shadow:
    0 0 0 2px #5f4209,
    0 5px 12px rgba(0, 0, 0, 0.65),
    inset 0 2px 3px rgba(255, 255, 255, 0.16);
}

.brand-mark::after {
  background: radial-gradient(circle at 35% 30%, #e9cb67, #a36c0c 70%);
  box-shadow: 0 0 10px rgba(224, 175, 53, 0.48);
}

.nav-item,
.help-button {
  margin: 2px 10px;
  width: calc(100% - 20px);
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #bbb9ae;
  text-shadow: 0 2px 2px black;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.nav-item:hover,
.help-button:hover {
  transform: translateX(2px);
  border-color: rgba(222, 177, 66, 0.3);
  color: white;
  background: linear-gradient(180deg, rgba(41, 53, 46, 0.9), rgba(11, 16, 13, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.34);
}

.nav-item.active {
  border-color: #a87818;
  color: #f5e8b7;
  background:
    linear-gradient(180deg, rgba(31, 90, 68, 0.96), rgba(7, 32, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 5px rgba(0, 0, 0, 0.55),
    0 7px 16px rgba(0, 0, 0, 0.48);
}

.nav-item.active::before {
  inset: 9px auto 9px -2px;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, #fff0a2, #b77d11);
  box-shadow: 0 0 9px rgba(232, 188, 72, 0.48);
}

.nav-count {
  border: 1px solid rgba(221, 177, 66, 0.42);
  color: #e9d89c;
  background: linear-gradient(180deg, #303a34, #101512);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.main-area,
.overview-dashboard {
  background:
    radial-gradient(circle at 82% 0%, rgba(8, 123, 91, 0.13), transparent 28%),
    radial-gradient(circle at 12% 42%, rgba(174, 124, 25, 0.08), transparent 23%),
    linear-gradient(180deg, #080c0a, #040605);
}

.topbar {
  border-bottom: 1px solid rgba(218, 171, 59, 0.38);
  background:
    linear-gradient(180deg, rgba(22, 28, 24, 0.98), rgba(7, 10, 8, 0.98));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.menu-button,
.detail-header button,
.dialog-close {
  border: 1px solid rgba(218, 171, 59, 0.28);
  border-radius: 10px;
  color: #e9ddb9;
  background: linear-gradient(180deg, #202722, #0b0f0d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.36);
}

.menu-button:hover,
.detail-header button:hover,
.dialog-close:hover {
  border-color: #c89a34;
  color: #72e8b9;
  background: linear-gradient(180deg, #29362f, #101713);
}

.contracted-lottery strong,
.page-heading h1,
.detail-header h2,
.detail-title h3,
.empty-state h2 {
  color: #f6eac8;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
}

.login-button,
.dialog-primary,
.auth-primary,
.primary-follow {
  border: 1px solid #d1a23a;
  border-radius: 10px;
  color: #fff4cf;
  background:
    linear-gradient(180deg, #1da879 0%, #087052 48%, #034533 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 5px rgba(0, 0, 0, 0.48),
    0 7px 14px rgba(0, 0, 0, 0.38);
  text-shadow: 0 1px 2px black;
  transition: transform 140ms ease, filter 140ms ease;
}

.login-button:hover,
.dialog-primary:hover,
.auth-primary:hover,
.primary-follow:hover {
  transform: translateY(-1px);
  filter: brightness(1.13);
}

.overview-hero {
  border: 1px solid #bf8e27;
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 20%, rgba(90, 224, 171, 0.14), transparent 24%),
    linear-gradient(135deg, #07110d 0%, #0d3d2c 52%, #06100c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -4px 10px rgba(0, 0, 0, 0.62),
    0 24px 55px rgba(0, 0, 0, 0.48),
    0 0 0 4px rgba(58, 38, 3, 0.34);
}

.overview-hero-copy h1 {
  color: #fff4d1;
  text-shadow:
    0 3px 4px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(237, 209, 133, 0.14);
}

.overview-hero-ring,
.modality-progress-ring {
  border: 1px solid #b8861c;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 8px 16px rgba(0, 0, 0, 0.46),
    0 0 0 2px rgba(224, 177, 59, 0.16);
}

.overview-hero-ring::before,
.modality-progress-ring::before {
  background: radial-gradient(circle at 38% 28%, #17231d, #050706 72%);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.overview-kpis article,
.overview-distribution,
.overview-modalities {
  border: 1px solid rgba(211, 164, 53, 0.48);
  color: var(--ink-950);
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(145deg, #151a17 0%, #090c0a 58%, #111510 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 7px rgba(0, 0, 0, 0.56),
    0 14px 30px rgba(0, 0, 0, 0.42);
}

.overview-kpis article {
  border-radius: 16px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.overview-kpis article:hover {
  transform: translateY(-3px);
  border-color: #d0a137;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 19px 38px rgba(0, 0, 0, 0.52);
}

.overview-kpis article strong {
  color: #64dfae;
  text-shadow: 0 2px 3px black;
}

.overview-kpis .featured-kpi {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 225, 128, 0.13), transparent 34%),
    linear-gradient(145deg, #241c0d, #0d0b07 62%, #171207);
}

.overview-kpis .featured-kpi strong,
.overview-section-heading > strong {
  color: #f2cf72;
}

.overview-distribution,
.overview-modalities {
  border-radius: 18px;
}

.overview-section-heading button,
.clear-filters,
.follow-button,
.secondary-action,
.lottery-code-control button {
  border: 1px solid rgba(214, 169, 60, 0.58);
  border-radius: 9px;
  color: #71dfb2;
  background: linear-gradient(180deg, #1c251f, #090d0b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 5px 10px rgba(0, 0, 0, 0.34);
}

.overview-section-heading button:hover,
.clear-filters:hover,
.follow-button:hover,
.secondary-action:hover,
.lottery-code-control button:hover {
  border-color: #d5aa45;
  color: #f8e8ad;
  background: linear-gradient(180deg, #294234, #0e1813);
}

.modality-performance-list {
  border-top-color: rgba(213, 169, 61, 0.33);
  background: rgba(0, 0, 0, 0.2);
}

.modality-performance-row {
  border-bottom-color: rgba(213, 169, 61, 0.25);
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.055), transparent 27%),
    linear-gradient(90deg, #111612, #080b09 72%, #10130f);
  transition: background 150ms ease, box-shadow 150ms ease;
}

.modality-performance-row:hover {
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.08), transparent 27%),
    linear-gradient(90deg, #19231d, #0b110e 72%, #151a14);
  box-shadow: inset 4px 0 #b88923;
}

.modality-performance-track {
  border-color: #7d570b;
  background: linear-gradient(180deg, #f1c64d, #5d3900 42%, #d4a832 74%, #4b2c00);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 3px rgba(0, 0, 0, 0.7),
    0 8px 12px rgba(0, 0, 0, 0.4);
}

.page-heading,
.filters {
  position: relative;
  z-index: 1;
}

.filters {
  padding: 17px;
  border: 1px solid rgba(210, 162, 49, 0.34);
  border-radius: 15px;
  background: linear-gradient(145deg, #111612, #070a08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 24px rgba(0, 0, 0, 0.35);
}

.table-panel {
  border: 1px solid rgba(216, 170, 59, 0.48);
  border-radius: 15px;
  color: var(--ink-950);
  background: #080b09;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 38px rgba(0, 0, 0, 0.5);
}

th {
  border-bottom-color: rgba(220, 175, 64, 0.36);
  color: #eedba2;
  background:
    linear-gradient(180deg, #242b26, #0e1310);
  text-shadow: 0 1px 2px black;
}

td {
  border-bottom-color: rgba(216, 170, 59, 0.2);
  color: #d6d0bd;
}

tbody tr {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.014), transparent);
}

tbody tr:hover,
tbody tr.selected {
  color: #fff5d6;
  background:
    linear-gradient(90deg, rgba(19, 132, 95, 0.25), rgba(7, 22, 16, 0.44));
}

tbody tr.selected {
  box-shadow:
    inset 4px 0 #d1a33d,
    inset 0 1px rgba(255, 255, 255, 0.05);
}

.follow-button.following {
  border-color: #d2a442;
  background: linear-gradient(180deg, #18936b, #064d38);
}

.table-footer,
.app-footer {
  border-color: rgba(216, 170, 59, 0.27);
  color: #918d82;
  background: linear-gradient(180deg, #111512, #070a08);
}

.detail-panel {
  border-left: 1px solid rgba(220, 174, 62, 0.46);
  color: var(--ink-950);
  background:
    radial-gradient(circle at 30% 0%, rgba(24, 150, 106, 0.13), transparent 25%),
    linear-gradient(180deg, #111713, #050706);
  box-shadow: -15px 0 30px rgba(0, 0, 0, 0.42);
}

.detail-header {
  border-bottom-color: rgba(216, 170, 59, 0.35);
  background: linear-gradient(180deg, #1a211c, #0b0f0d);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.detail-title,
.numbers-section,
.share-summary,
.tracking-history,
.bets-section {
  border-color: rgba(213, 167, 56, 0.27);
}

.share-metric,
.tracking-overview div,
.tracking-list div,
.bet-card,
.technical-details {
  border: 1px solid rgba(211, 165, 55, 0.34);
  border-radius: 10px;
  color: #d8d1bd;
  background:
    linear-gradient(145deg, #161c18, #090c0a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 5px 11px rgba(0, 0, 0, 0.28);
}

.share-metric strong,
.tracking-overview strong,
.technical-details summary {
  color: #55dca9;
}

.number-ball {
  border: 1px solid #c4942e;
  color: #f8ecc9;
  background:
    radial-gradient(circle at 35% 25%, #3a4c40, #0a0d0b 68%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.16),
    inset 0 -3px 5px rgba(0, 0, 0, 0.7),
    0 4px 8px rgba(0, 0, 0, 0.34);
}

.toast {
  border: 1px solid rgba(220, 175, 64, 0.52);
  border-radius: 11px;
  color: #f8eac4;
  background: linear-gradient(145deg, #17221c, #070a08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.55);
}

dialog::backdrop {
  background: rgba(0, 4, 2, 0.78);
  backdrop-filter: blur(5px);
}

@media (max-width: 760px) {
  .nav-item,
  .help-button {
    margin-inline: 6px;
    width: calc(100% - 12px);
  }

  .filters {
    padding: 12px;
  }
}

/* CAIXA silver ultra-premium 3D theme */
:root {
  --navy-950: #0b2c52;
  --navy-900: #103b69;
  --navy-800: #174d80;
  --blue-700: #005ca9;
  --blue-600: #0879c9;
  --blue-100: #dbeaf5;
  --orange-600: #d97800;
  --orange-500: #f39200;
  --ink-950: #102b49;
  --ink-700: #3f566d;
  --ink-500: #6d7c8c;
  --line: rgba(67, 88, 108, 0.2);
  --line-dark: rgba(34, 75, 113, 0.34);
  --surface: #f5f6f7;
  --canvas: #d9dee3;
  --success: #159b68;
  --shadow:
    0 16px 35px rgba(48, 62, 76, 0.2),
    0 2px 4px rgba(45, 55, 66, 0.18);
}

body {
  color: var(--ink-950);
  background:
    radial-gradient(circle at 80% 0%, rgba(0, 92, 169, 0.1), transparent 32%),
    linear-gradient(145deg, #eef1f3, #cfd5db);
}

/* ===== LOGIN "FalconLOT" — dark premium (cyberpunk/Tesla) ===== */
.auth-gate {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 16px 46px;
  color: #eaf1f8;
  background:
    radial-gradient(58% 38% at 50% 6%, rgba(255, 46, 85, 0.2), transparent 60%),
    radial-gradient(74% 52% at 50% 2%, rgba(0, 141, 255, 0.16), transparent 64%),
    radial-gradient(96% 60% at 50% 104%, rgba(0, 141, 255, 0.1), transparent 60%),
    #05070a;
}
/* grade holográfica sutil */
.auth-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(60, 197, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 197, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(72% 62% at 50% 40%, #000, transparent 80%);
  pointer-events: none;
}
.auth-brand {
  display: none;
}

/* Falcão: asas atrás do card, cabeça/peito acima. Fundo escuro da imagem
   funde no #05070a; máscara radial dissolve as bordas -> nada de "caixa". */
.auth-hero {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(1060px, 138%);
  height: min(46vh, 450px);
  margin-bottom: clamp(-160px, -17vh, -104px);
  background: url("/assets/falcon-hero.jpg?v=20260708") no-repeat center 36%;
  background-size: contain;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(74% 80% at 50% 42%, #000 56%, transparent 84%);
  mask-image: radial-gradient(74% 80% at 50% 42%, #000 56%, transparent 84%);
}
/* Wordmark SEPARADO acima da imagem, centralizado, 3D ultra premium */
.auth-wordmark {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
  padding-top: 4px;
  margin-bottom: 4px;
}
.wm-title {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 8px 28px 11px;
  border-radius: 18px;
  font-size: clamp(36px, 7.4vw, 72px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #f3f7fc;
  /* contorno branco base (sempre visível) + vidro escuro por dentro */
  background: linear-gradient(180deg, rgba(20, 26, 38, 0.34), rgba(8, 12, 20, 0.44));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 255, 255, 0.08);
  text-shadow:
    0 1px 0 #cbd5e1,
    0 2px 0 #aeb9c8,
    0 3px 0 #8f9bad,
    0 4px 0 #74839a,
    0 5px 1px rgba(0, 0, 0, 0.35),
    0 9px 18px rgba(0, 0, 0, 0.6),
    0 0 36px rgba(255, 255, 255, 0.26);
}
/* luz branca girando em volta de TODO o contorno (border beam, igual os botões) */
.wm-title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--beam-a),
    transparent 0deg,
    transparent 200deg,
    rgba(255, 255, 255, 0.45) 275deg,
    #ffffff 312deg,
    rgba(255, 255, 255, 0.45) 348deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 3s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.wm-title b {
  color: #ff3355;
  font-weight: 900;
  text-shadow:
    0 1px 0 #b21e38,
    0 2px 0 #8f1a2f,
    0 3px 0 #6f1526,
    0 4px 0 #55101d,
    0 5px 1px rgba(0, 0, 0, 0.4),
    0 9px 20px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(255, 51, 85, 0.6);
}
.wm-sub {
  font-size: clamp(12px, 2.2vw, 17px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #dde6f2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(120, 180, 255, 0.22);
}
.wm-tag {
  font-size: clamp(9px, 1.6vw, 12px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #8698b0;
}

/* Chrome autofill não pode pintar de amarelo — mantém escuro */
.auth-gate input:-webkit-autofill,
.auth-gate input:-webkit-autofill:hover,
.auth-gate input:-webkit-autofill:focus,
.auth-gate input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 40px #0f172a inset !important;
  box-shadow: 0 0 0 40px #0f172a inset !important;
  caret-color: #fff;
  transition: background-color 100000s ease-out 0s;
}

/* Card de vidro (glassmorphism) */
.auth-gate .auth-card {
  position: relative;
  z-index: 3;
  width: min(520px, 100%);
  padding: 30px 30px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(15, 20, 28, 0.62);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(0, 141, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #e8eef7;
}
.auth-gate .auth-copy h1 {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(15px, 4.4vw, 27px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.auth-gate .auth-copy h1 .accent {
  color: #ff2e55;
}
.auth-gate .auth-copy p {
  color: #9fb0c4;
  text-align: center;
  font-size: 13px;
}

/* Abas Entrar / Cadastrar */
.auth-gate .auth-tabs {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  padding: 4px;
  box-shadow: none;
}
.auth-gate .auth-tab {
  color: #9fb0c4;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 11px 10px;
  font-weight: 600;
}
.auth-gate .auth-tab.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 141, 255, 0.28), rgba(0, 141, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(0, 175, 255, 0.45);
}

/* Inputs escuros com foco azul-neon */
.auth-gate .auth-form label span {
  color: #aeb8c8;
  font-size: 13px;
  font-weight: 600;
}
.auth-gate .auth-form input,
.auth-gate .lottery-code-control input {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 12px;
  padding: 14px;
}
.auth-gate .auth-form input::placeholder,
.auth-gate .lottery-code-control input::placeholder {
  color: #5f6f83;
}
.auth-gate .auth-form input:focus,
.auth-gate .lottery-code-control input:focus {
  outline: none;
  border-color: #00afff;
  background: #0c1424;
  box-shadow:
    0 0 0 3px rgba(0, 175, 255, 0.2),
    0 0 20px rgba(0, 175, 255, 0.24);
}

/* Botão azul metálico */
.auth-gate .auth-primary {
  background: linear-gradient(180deg, #0ea5ff, #0055cc);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  box-shadow:
    0 12px 34px rgba(0, 90, 200, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.auth-gate .auth-primary:hover:not(:disabled) {
  filter: brightness(1.09);
  box-shadow:
    0 16px 44px rgba(0, 120, 255, 0.6),
    inset 0 0 0 1px rgba(60, 197, 255, 0.45);
}
.auth-gate .auth-primary:active:not(:disabled) {
  transform: translateY(1px);
}
.auth-gate .auth-primary:disabled {
  opacity: 0.5;
}
.auth-gate .lottery-code-control button {
  background: linear-gradient(180deg, #0ea5ff, #0055cc);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-weight: 600;
}
.auth-gate .lottery-verification {
  color: #cdd8e6;
}
.auth-gate .auth-security,
.auth-gate .auth-feedback {
  color: #8092a8;
  text-align: center;
}

@media (max-width: 760px) {
  .auth-gate {
    justify-content: flex-start;
    padding-top: 26px;
  }
  .auth-hero {
    width: min(560px, 158%);
    height: min(42vh, 320px);
    margin-bottom: clamp(-98px, -12vh, -58px);
  }
  .auth-gate .auth-card {
    padding: 24px 20px 20px;
  }
}

.auth-card,
dialog {
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: var(--ink-950);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(145deg, #fbfbfc, #d9dee3 68%, #eef1f3);
  box-shadow:
    0 28px 68px rgba(45, 60, 74, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 4px rgba(74, 89, 103, 0.14),
    0 0 0 1px rgba(83, 101, 118, 0.22);
}

.auth-tabs,
.lottery-verification,
.detail-sync-notice {
  border: 1px solid rgba(61, 85, 108, 0.22);
  background: linear-gradient(180deg, #edf0f2, #d5dbe0);
  box-shadow:
    inset 0 2px 4px rgba(73, 87, 101, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.auth-tab.active {
  color: #005ca9;
  background: linear-gradient(180deg, #ffffff, #dfe4e8);
  box-shadow:
    inset 0 1px 0 white,
    0 5px 12px rgba(47, 63, 78, 0.18);
}

.auth-form input,
select,
.clear-filters {
  border: 1px solid rgba(48, 77, 104, 0.32);
  color: var(--ink-950);
  background: linear-gradient(180deg, #ffffff, #e1e5e8);
  box-shadow:
    inset 0 2px 4px rgba(66, 82, 98, 0.15),
    inset 0 1px 0 white,
    0 2px 4px rgba(58, 72, 86, 0.14);
}

select option {
  color: var(--ink-950);
  background: #f5f6f7;
}

.auth-form input:focus,
select:focus-visible {
  border-color: #0879c9;
  outline-color: rgba(8, 121, 201, 0.18);
  box-shadow:
    inset 0 2px 4px rgba(66, 82, 98, 0.12),
    0 0 0 3px rgba(8, 121, 201, 0.14),
    0 4px 12px rgba(0, 92, 169, 0.14);
}

.sidebar {
  border-right: 1px solid rgba(67, 87, 105, 0.32);
  background:
    radial-gradient(circle at 38% 6%, rgba(255, 255, 255, 0.92), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #eef1f3 0%, #d5dbe0 58%, #bfc7ce 100%);
  box-shadow:
    12px 0 28px rgba(57, 72, 87, 0.2),
    inset -1px 0 rgba(255, 255, 255, 0.72);
}

.brand {
  border-bottom-color: rgba(56, 81, 105, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.08));
  color: #0b4d86;
  text-shadow: 0 1px 0 white;
}

.brand-mark {
  border-color: #0879c9;
  background: radial-gradient(circle, #f8fafb, #cdd4da 72%);
  box-shadow:
    0 0 0 2px #9eabb6,
    0 5px 12px rgba(47, 64, 80, 0.25),
    inset 0 2px 3px white;
}

.brand-mark::after {
  background: radial-gradient(circle at 35% 30%, #ffb334, #e37e00 70%);
  box-shadow: 0 0 10px rgba(243, 146, 0, 0.34);
}

.nav-item,
.help-button {
  color: #344e67;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

.nav-item:hover,
.help-button:hover {
  border-color: rgba(0, 92, 169, 0.26);
  color: #005ca9;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(218, 224, 229, 0.94));
  box-shadow:
    inset 0 1px 0 white,
    0 6px 12px rgba(52, 70, 87, 0.16);
}

.nav-item.active {
  border-color: #0879c9;
  color: white;
  background: linear-gradient(180deg, #168bd1 0%, #0069ae 48%, #00477e 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.46),
    inset 0 -3px 5px rgba(0, 42, 78, 0.38),
    0 7px 15px rgba(0, 82, 143, 0.28),
    0 0 0 1px rgba(0, 62, 110, 0.38);
  text-shadow: 0 1px 2px rgba(0, 38, 70, 0.7);
}

.nav-item.active::before {
  background: linear-gradient(180deg, #ffbd49, #ed8100);
  box-shadow: 0 0 9px rgba(243, 146, 0, 0.48);
}

.nav-count {
  border: 1px solid rgba(0, 92, 169, 0.36);
  color: white;
  background: linear-gradient(180deg, #1488cf, #004e89);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 2px 4px rgba(45, 65, 84, 0.2);
}

.main-area,
.overview-dashboard {
  background:
    radial-gradient(circle at 82% 0%, rgba(0, 105, 180, 0.09), transparent 29%),
    radial-gradient(circle at 12% 42%, rgba(255, 255, 255, 0.72), transparent 25%),
    linear-gradient(145deg, #e6eaed, #cdd3d9);
}

.topbar {
  border-bottom: 1px solid rgba(55, 78, 99, 0.28);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(250, 251, 252, 0.98), rgba(211, 217, 222, 0.98));
  box-shadow:
    0 8px 18px rgba(49, 65, 80, 0.18),
    inset 0 1px 0 white;
}

.menu-button,
.detail-header button,
.dialog-close {
  border: 1px solid rgba(37, 68, 96, 0.3);
  color: #0b4d86;
  background: linear-gradient(180deg, #ffffff, #d3d9de);
  box-shadow:
    inset 0 1px 0 white,
    0 4px 8px rgba(48, 65, 81, 0.18);
}

.menu-button:hover,
.detail-header button:hover,
.dialog-close:hover {
  border-color: #0879c9;
  color: #005ca9;
  background: linear-gradient(180deg, #ffffff, #d8e9f5);
}

.contracted-lottery strong,
.page-heading h1,
.detail-header h2,
.detail-title h3,
.empty-state h2 {
  color: #103b69;
  text-shadow: 0 1px 0 white;
}

.login-button,
.dialog-primary,
.auth-primary,
.primary-follow {
  border: 1px solid #00528f;
  color: white;
  background: linear-gradient(180deg, #1590da 0%, #006db5 48%, #004b84 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 5px rgba(0, 43, 80, 0.42),
    0 7px 14px rgba(0, 80, 139, 0.28);
  text-shadow: 0 1px 2px rgba(0, 38, 70, 0.7);
}

.overview-hero {
  border: 1px solid rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(circle at 78% 20%, rgba(0, 105, 180, 0.11), transparent 25%),
    radial-gradient(circle at 90% 120%, rgba(243, 146, 0, 0.08), transparent 31%),
    linear-gradient(135deg, #fbfbfc 0%, #e8ebee 52%, #d4dae0 100%);
  box-shadow:
    inset 0 2px 0 white,
    inset 0 -3px 7px rgba(76, 92, 106, 0.14),
    0 18px 38px rgba(49, 65, 80, 0.19),
    0 0 0 1px rgba(65, 85, 104, 0.24);
}

.overview-hero-copy h1 {
  color: #0b4d86;
  text-shadow:
    0 2px 0 white,
    0 3px 4px rgba(56, 73, 89, 0.18);
}

.overview-hero-copy > p,
.overview-hero-copy div {
  color: #315675;
}

.overview-hero-ring,
.modality-progress-ring {
  border: 1px solid rgba(75, 94, 111, 0.36);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.72),
    0 8px 16px rgba(49, 66, 82, 0.22),
    0 0 0 2px rgba(74, 94, 112, 0.16);
}

.overview-hero-ring::before,
.modality-progress-ring::before {
  background: radial-gradient(circle at 38% 28%, #ffffff, #d3d9de 72%);
  box-shadow:
    inset 0 3px 6px rgba(71, 87, 103, 0.17),
    inset 0 1px 0 white;
}

.overview-hero-ring strong {
  color: #005ca9;
  text-shadow: 0 1px 0 white;
}

.overview-kpis article,
.overview-distribution,
.overview-modalities {
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: var(--ink-950);
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.96), transparent 32%),
    linear-gradient(145deg, #f9fafb 0%, #dde2e6 62%, #edf0f2 100%);
  box-shadow:
    inset 0 2px 0 white,
    inset 0 -3px 7px rgba(70, 86, 101, 0.13),
    0 12px 26px rgba(48, 65, 81, 0.17),
    0 0 0 1px rgba(75, 93, 109, 0.18);
}

.overview-kpis article:hover {
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 2px 0 white,
    0 18px 32px rgba(48, 65, 81, 0.22),
    0 0 0 1px rgba(0, 92, 169, 0.28);
}

.overview-kpis article strong {
  color: #006fb6;
  text-shadow: 0 1px 0 white;
}

.overview-kpis .featured-kpi {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(145deg, #fff8ed, #e9ded0 64%, #f5eee5);
}

.overview-kpis .featured-kpi strong,
.overview-section-heading > strong {
  color: #d97800;
}

.overview-section-heading button,
.clear-filters,
.follow-button,
.secondary-action,
.lottery-code-control button {
  border: 1px solid rgba(0, 92, 169, 0.42);
  color: #005ca9;
  background: linear-gradient(180deg, #ffffff, #dbe1e6);
  box-shadow:
    inset 0 1px 0 white,
    0 5px 10px rgba(48, 65, 81, 0.16);
}

.overview-section-heading button:hover,
.clear-filters:hover,
.follow-button:hover,
.secondary-action:hover,
.lottery-code-control button:hover {
  border-color: #0879c9;
  color: #004678;
  background: linear-gradient(180deg, #ffffff, #cfe7f7);
}

.modality-performance-list {
  border-top-color: rgba(61, 82, 101, 0.2);
  background: rgba(255, 255, 255, 0.34);
}

.modality-performance-row {
  border-bottom-color: rgba(65, 84, 102, 0.18);
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.94), transparent 28%),
    linear-gradient(90deg, #f7f8f9, #dfe4e8 72%, #edf0f2);
}

.modality-performance-row:hover {
  background:
    radial-gradient(circle at 13% 0%, white, transparent 28%),
    linear-gradient(90deg, #ffffff, #d9e9f4 72%, #eaf2f7);
  box-shadow: inset 4px 0 var(--modality-color);
}

.modality-performance-name strong,
.modality-performance-result strong {
  color: color-mix(in srgb, var(--modality-color) 82%, #153b5c);
  text-shadow: 0 1px 0 white;
}

.modality-performance-track {
  border-color: rgba(57, 76, 94, 0.38);
  background: linear-gradient(180deg, #ffffff, #aab4bd 42%, #e9edf0 74%, #8d99a3);
  box-shadow:
    inset 0 2px 1px white,
    inset 0 -2px 3px rgba(55, 70, 84, 0.32),
    0 7px 11px rgba(48, 64, 79, 0.18);
}

.modality-performance-track::before {
  background: linear-gradient(180deg, #d5dbe0, #aeb8c1);
  box-shadow: inset 0 2px 4px rgba(48, 64, 79, 0.2);
}

.filters {
  border: 1px solid rgba(255, 255, 255, 0.94);
  background: linear-gradient(145deg, #f8f9fa, #d7dde2);
  box-shadow:
    inset 0 2px 0 white,
    0 12px 24px rgba(47, 64, 80, 0.17),
    0 0 0 1px rgba(67, 86, 104, 0.18);
}

.table-panel {
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: var(--ink-950);
  background: #edf0f2;
  box-shadow:
    inset 0 2px 0 white,
    0 17px 34px rgba(47, 64, 80, 0.2),
    0 0 0 1px rgba(64, 83, 101, 0.22);
}

th {
  border-bottom-color: rgba(36, 70, 101, 0.32);
  color: white;
  background: linear-gradient(180deg, #197fc1, #005b9e 52%, #004273);
  text-shadow: 0 1px 2px rgba(0, 35, 65, 0.72);
}

td {
  border-bottom-color: rgba(65, 83, 100, 0.18);
  color: #193d5e;
}

tbody tr {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(225, 230, 234, 0.72));
}

tbody tr:nth-child(even) {
  background: linear-gradient(90deg, rgba(230, 235, 239, 0.9), rgba(211, 218, 224, 0.9));
}

tbody tr:hover,
tbody tr.selected {
  color: #0a3459;
  background: linear-gradient(90deg, #d9edf9, #bad9ed);
}

tbody tr.selected {
  box-shadow:
    inset 4px 0 #f39200,
    inset 0 1px white;
}

.follow-button.following {
  border-color: #00558f;
  color: white;
  background: linear-gradient(180deg, #198aca, #00558f);
}

.table-footer,
.app-footer {
  border-color: rgba(60, 80, 98, 0.22);
  color: #526a80;
  background: linear-gradient(180deg, #eef1f3, #cfd6dc);
}

.detail-panel {
  border-left: 1px solid rgba(55, 78, 99, 0.32);
  color: var(--ink-950);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.94), transparent 26%),
    linear-gradient(180deg, #eef1f3, #cfd6dc);
  box-shadow: -15px 0 30px rgba(48, 65, 81, 0.2);
}

.detail-header {
  border-bottom-color: rgba(56, 78, 98, 0.28);
  background: linear-gradient(180deg, #ffffff, #d5dbe0);
  box-shadow: 0 8px 16px rgba(47, 64, 80, 0.15);
}

.detail-title,
.numbers-section,
.share-summary,
.tracking-history,
.bets-section {
  border-color: rgba(62, 82, 101, 0.22);
}

.share-metric,
.tracking-overview div,
.tracking-list div,
.bet-card,
.technical-details {
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: #34536e;
  background: linear-gradient(145deg, #f9fafb, #d9dfe4);
  box-shadow:
    inset 0 2px 0 white,
    inset 0 -2px 4px rgba(62, 79, 95, 0.12),
    0 5px 11px rgba(47, 64, 80, 0.14),
    0 0 0 1px rgba(64, 83, 101, 0.16);
}

.share-metric strong,
.tracking-overview strong,
.technical-details summary {
  color: #006fb6;
}

.number-ball {
  border: 1px solid #005a9b;
  color: white;
  background: radial-gradient(circle at 35% 25%, #43a7df, #0067ab 57%, #003d6b 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.58),
    inset 0 -3px 5px rgba(0, 43, 79, 0.48),
    0 4px 8px rgba(47, 64, 80, 0.22);
  text-shadow: 0 1px 2px rgba(0, 36, 67, 0.76);
}

.toast {
  border: 1px solid rgba(0, 92, 169, 0.42);
  color: #103b69;
  background: linear-gradient(145deg, #ffffff, #d5dce2);
  box-shadow:
    inset 0 2px 0 white,
    0 18px 40px rgba(45, 61, 76, 0.24);
}

dialog::backdrop {
  background: rgba(49, 62, 75, 0.44);
  backdrop-filter: blur(5px);
}

.overview-stacked-bar {
  border-color: #7d8c98;
  background:
    linear-gradient(180deg, #ffffff 0%, #cbd3d9 18%, #788793 43%, #f4f6f7 58%, #9ba8b2 78%, #eef1f3 100%);
  box-shadow:
    0 8px 14px rgba(48, 64, 79, 0.22),
    inset 0 2px 2px white,
    inset 0 -3px 3px rgba(61, 77, 92, 0.34);
}

.overview-stacked-track {
  border-color: #7d8d99;
  background: linear-gradient(180deg, #d5dce1, #9aa7b1 55%, #c9d1d7);
  box-shadow:
    inset 0 5px 7px rgba(47, 63, 78, 0.32),
    inset 0 -3px 4px rgba(255, 255, 255, 0.7);
}

.overview-stacked-track .sold {
  background:
    linear-gradient(180deg, #a9e4ff 0%, #23a4df 18%, #006db5 50%, #004a84 78%, #1288cb 100%);
  box-shadow:
    inset 0 5px 7px rgba(221, 245, 255, 0.68),
    inset 0 -6px 7px rgba(0, 48, 86, 0.46),
    0 0 8px rgba(0, 109, 181, 0.34);
}

.overview-stacked-track .downloaded {
  background: linear-gradient(180deg, #b9f0ff, #25a9df 48%, #087cae);
}

.overview-stacked-track .reserved {
  background: linear-gradient(180deg, #ffd788, #f39200 48%, #b95d00);
}

.overview-stacked-track .available {
  background: linear-gradient(180deg, #e9eef1 0%, #a7b2ba 20%, #778794 52%, #596b78 76%, #93a1ab 100%);
  box-shadow:
    inset 0 5px 7px rgba(255, 255, 255, 0.66),
    inset 0 -6px 7px rgba(44, 59, 72, 0.38);
}

/* Exact silver dashboard reference */
body {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e9edf0, #cbd2d8);
}

.app-shell {
  grid-template-columns: 295px minmax(0, 1fr);
}

.sidebar {
  color: #123f75;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #f7f8f9 0%, #e6e9ec 54%, #c9d0d6 100%);
  box-shadow:
    5px 0 11px rgba(44, 59, 73, 0.28),
    inset -1px 0 rgba(255, 255, 255, 0.82);
}

.brand {
  height: 76px;
  gap: 10px;
  padding: 0 18px;
  border-bottom-color: rgba(70, 88, 105, 0.25);
  color: #124c8b;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(237, 240, 242, 0.35));
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -0.045em;
  text-shadow: 0 1px 0 white;
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border: 0;
  border-radius: 0;
  background: url("assets/reference-brand-mark.png") center / contain no-repeat;
  box-shadow: none;
  mix-blend-mode: multiply;
  overflow: hidden;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span {
  display: none;
}

.main-nav {
  gap: 17px;
  padding: 34px 12px 0;
}

.nav-item,
.help-button {
  width: 100%;
  min-height: 55px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #173e70;
  font-size: 17px;
  font-weight: 500;
  text-shadow: 0 1px 0 white;
}

.nav-item.active {
  min-height: 60px;
  border-color: #0866a6;
  color: white;
  background: linear-gradient(180deg, #1592d2 0%, #0073b8 48%, #00508b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 4px rgba(0, 45, 80, 0.36),
    0 4px 7px rgba(42, 57, 71, 0.28),
    0 2px 0 #f39200;
  font-weight: 650;
  text-shadow: 0 1px 2px rgba(0, 43, 77, 0.65);
}

.nav-item.active::before {
  inset: 10px auto 10px -1px;
  width: 5px;
  background: #f39200;
  box-shadow: none;
}

.nav-icon svg,
.nav-item [data-icon] svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
}

.nav-count {
  min-width: 25px;
  padding: 3px 7px;
  border-color: #044a84;
  background: linear-gradient(180deg, #126fba, #064986);
  font-size: 12px;
}

.help-button {
  margin: 0 12px;
  width: calc(100% - 24px);
}

.main-area {
  background:
    radial-gradient(circle at 68% 7%, rgba(255, 255, 255, 0.82), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e5e9ec, #cbd2d8);
}

.topbar {
  height: 75px;
  padding: 0 52px 0 30px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #fafbfc, #e2e6e9);
  box-shadow:
    0 3px 7px rgba(45, 60, 74, 0.22),
    inset 0 1px 0 white;
}

.menu-button {
  width: 46px;
  height: 40px;
  border-radius: 8px;
}

.topbar-actions {
  gap: 28px;
}

.session-status {
  position: absolute;
  left: 47%;
  transform: translateX(-50%);
  max-width: min(660px, 50vw);
  font-size: 13px;
  font-weight: 500;
}

.session-status .collector-status-stack {
  min-width: min(520px, 48vw);
}

.contracted-lottery strong {
  font-size: 12px;
}

.contracted-lottery span {
  font-size: 10px;
}

.login-button {
  min-width: 105px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 24px;
  font-size: 16px;
}

.overview-view .content {
  padding: 0;
}

.modalities-view .content {
  padding: 0;
}

.modalities-view .workspace {
  grid-template-columns: minmax(0, 1fr);
}

.national-modalities {
  min-height: calc(100vh - 75px);
  padding: 16px 20px 22px;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 255, 255, 0.8), transparent 26%),
    linear-gradient(145deg, #edf3f7, #dce5eb);
}

.national-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  padding: 15px 20px;
  border: 1px solid white;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #edf3f7);
  box-shadow: 0 4px 12px rgba(32, 67, 97, 0.12);
}

.national-header span,
.national-summary span,
.national-modality-counts span {
  color: #1769aa;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.national-header h1 {
  margin: 3px 0 2px;
  color: #174f8c;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing: -0.045em;
}

.national-header p,
.national-header small,
.national-modality-card small {
  margin: 0;
  color: #526a82;
  font-size: 9px;
}

.national-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.national-summary article {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 82px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid #bcd4ea;
  background: linear-gradient(160deg, #ffffff 0%, #f2f8fd 55%, #e4eff9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(8, 77, 133, 0.06),
    0 1px 2px rgba(8, 77, 133, 0.1),
    0 6px 14px rgba(8, 77, 133, 0.14),
    0 18px 30px rgba(8, 77, 133, 0.08);
  transition: transform 0.16s ease, box-shadow 0.24s ease, border-color 0.16s ease;
}
/* Brilho de vidro no topo do card, p/ dar a sensacao 3D "viva". */
.national-summary article::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: 13px 13px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  pointer-events: none;
}
/* Fio de luz superior (borda destacada) */
.national-summary article::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(120, 180, 235, 0.9), transparent);
  pointer-events: none;
}
.national-summary article:hover {
  transform: translateY(-3px);
  border-color: #93bce0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(8, 77, 133, 0.06),
    0 2px 4px rgba(8, 77, 133, 0.12),
    0 12px 22px rgba(8, 77, 133, 0.2),
    0 30px 50px rgba(8, 77, 133, 0.14);
}
/* Cards de VALOR (R$) com aresta esquerda verde p/ diferenciar dinheiro. */
.national-summary .national-money-summary {
  border-left: 3px solid #1c8a4a;
}
.national-summary .national-money-summary strong {
  color: #1c8a4a;
}

.national-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #17549a;
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.national-summary .national-money-summary strong {
  overflow: hidden;
  font-size: clamp(9px, 0.78vw, 13px);
  text-overflow: clip;
  white-space: nowrap;
}

.national-summary small {
  color: #60778d;
  overflow: hidden;
  font-size: 7px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.national-modality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.national-modality-card {
  padding: 11px 13px;
  border: 1px solid rgba(109, 133, 154, 0.28);
  border-left: 5px solid var(--modality-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 3px 9px rgba(32, 67, 97, 0.09);
}

.national-modality-card.is-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.national-modality-card.is-clickable:hover {
  box-shadow: 0 6px 16px rgba(32, 67, 97, 0.18);
  transform: translateY(-2px);
  border-color: var(--modality-color);
}

.modality-card-cta {
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--modality-color);
  white-space: nowrap;
}

/* ---- Lista de bolões de uma modalidade ---- */
.modality-pools {
  border: 1px solid rgba(109, 133, 154, 0.28);
  border-top: 4px solid var(--modality-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(32, 67, 97, 0.1);
}

.modality-pools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modality-pools-head h2 {
  margin: 0;
  font-size: 18px;
  color: #143b63;
}

.modality-pools-head span {
  font-size: 12px;
  color: #5a7088;
  font-weight: 600;
}

.modality-pools-back {
  border: 1px solid rgba(109, 133, 154, 0.4);
  background: white;
  color: #143b63;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.modality-pools-back:hover {
  background: #eef4fa;
}

.modality-pools-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.modality-pool-card {
  border: 1px solid rgba(109, 133, 154, 0.25);
  border-left: 4px solid var(--modality-color);
  border-radius: 10px;
  background: white;
  padding: 10px 12px;
}

.modality-pool-card.is-finalizado {
  opacity: 0.82;
  border-left-color: #9aa7b4;
}

.modality-pool-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.modality-pool-card header strong {
  font-size: 13px;
  color: #143b63;
}

.pool-status {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.pool-status.em-venda {
  background: #e2f3e8;
  color: #1c6b3a;
}

.pool-status.finalizado {
  background: #f0eef0;
  color: #7a6b7a;
}

.modality-pool-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
  margin-bottom: 8px;
}

.modality-pool-metrics > div {
  display: flex;
  flex-direction: column;
}

.modality-pool-metrics span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6d7f90;
  font-weight: 700;
}

.modality-pool-metrics strong {
  font-size: 14px;
  color: #143b63;
}

.modality-pool-metrics .hl strong {
  color: var(--modality-color);
}

.modality-pool-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(109, 133, 154, 0.18);
  overflow: hidden;
  margin-bottom: 5px;
}

.modality-pool-bar span {
  display: block;
  height: 100%;
  background: var(--modality-color);
  border-radius: 999px;
}

.modality-pool-card small {
  font-size: 10px;
  color: #5a7088;
  font-weight: 600;
}

/* ---- Painel de lotéricas cadastradas (prioridade) ---- */
.priority-add {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(109, 133, 154, 0.28);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.priority-add label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #143b63;
  margin-bottom: 8px;
}

.priority-add-row {
  display: flex;
  gap: 8px;
}

.priority-add-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid rgba(109, 133, 154, 0.45);
  border-radius: 8px;
  font-size: 14px;
}

.priority-add-row button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #1769aa;
  color: white;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.priority-add-row button:disabled {
  opacity: 0.6;
  cursor: default;
}

.priority-add-error {
  display: block;
  margin-top: 8px;
  color: #b3261e;
  font-size: 12px;
  font-weight: 600;
}

.priority-lottery-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Premiações acumuladas (modalidades) ---- */
/* ===== Acumuladas: cena 3D ultra premium flutuante (mesma linguagem do Monitoramento) ===== */
.prize-scene { position: relative; overflow: hidden; border-radius: 26px; padding: 24px 22px 54px; isolation: isolate;
  background:
    radial-gradient(90% 130% at 85% -10%, #2a8fdd 0%, transparent 55%),
    radial-gradient(80% 130% at 50% -20%, #2a8fdd, transparent 60%),
    linear-gradient(135deg, #1173c9 0%, #0a5cae 45%, #084d85 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 24px 50px rgba(3,30,55,.35); }

.prize-hero { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.prize-eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd15c; text-shadow: 0 1px 2px rgba(3,30,55,.5); }
.prize-title { margin: 6px 0 0; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; color: #fff; letter-spacing: .01em;
  text-shadow: 0 1px 0 #b9cfe2, 0 2px 0 #9cb8d1, 0 3px 0 #7fa1c0, 0 4px 0 #486e93, 0 6px 8px rgba(3,30,55,.45); }
.prize-title .hl { color: #ffd15c; text-shadow: 0 1px 0 #e6ad25, 0 2px 0 #cf9915, 0 3px 0 #b58208, 0 4px 0 #8f6600, 0 6px 8px rgba(3,30,55,.5); }
.prize-sub { margin: 8px 0 0; color: rgba(255,255,255,.8); font-size: .9rem; max-width: 64ch; }
.prize-live { color: #ffe08a; font-weight: 700; }
.prize-updated { color: rgba(255,255,255,.75); font-size: .78rem; white-space: nowrap; }

.prize-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; perspective: 1200px; margin-top: 4px; }

.prize-card {
  --game: #143b63; position: relative; border-radius: 20px; padding: 18px 18px 18px; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(3,30,55,.16),
    0 20px 34px rgba(3,30,55,.26),
    0 48px 72px rgba(3,30,55,.24),
    0 12px 30px -10px color-mix(in srgb, var(--game) 50%, transparent);
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .3s ease;
  animation: przFloaty 6s ease-in-out infinite; will-change: transform; }
.prize-card:nth-child(2n) { animation-delay: -1.5s; }
.prize-card:nth-child(3n) { animation-delay: -3s; }
.prize-card:nth-child(4n) { animation-delay: -4.5s; }
@keyframes przFloaty {
  0%,100% { transform: translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
  50% { transform: translateY(-9px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); } }
.prize-card:hover { box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(3,30,55,.2),
    0 30px 52px rgba(3,30,55,.32),
    0 72px 104px rgba(3,30,55,.32),
    0 16px 40px -6px color-mix(in srgb, var(--game) 62%, transparent); }

.prize-cap { position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 3;
  background: linear-gradient(90deg, var(--game), color-mix(in srgb, var(--game) 55%, #fff));
  box-shadow: 0 1px 7px color-mix(in srgb, var(--game) 60%, transparent); }
.prize-card .pglare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.55), transparent 60%); }
.prize-card:hover .pglare { opacity: 1; }
.prize-card .pshine { position: absolute; top: -20%; bottom: -20%; left: -140%; width: 55%; transform: skewX(-18deg); pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: przShine 7.5s ease-in-out infinite; }
.prize-card:nth-child(2n) .pshine { animation-delay: -2.4s; }
.prize-card:nth-child(3n) .pshine { animation-delay: -4.6s; }
@keyframes przShine { 0%, 55% { left: -140%; } 100% { left: 170%; } }

.prize-card-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; }
.prize-logo { display: inline-flex; color: var(--game); flex-shrink: 0; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--game) 45%, transparent)); }
.prize-card-head strong { font-size: 14px; font-weight: 800; color: var(--game); flex: 1; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.prize-acc-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #4a2f00;
  background: linear-gradient(180deg, #ffc133, #f6a800); padding: 3px 9px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(246,168,0,.5); }
.prize-value { position: relative; z-index: 3; font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--game); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 2px 0 color-mix(in srgb, var(--game) 22%, #fff), 0 4px 8px color-mix(in srgb, var(--game) 30%, transparent); }
.prize-meta { position: relative; z-index: 3; display: flex; flex-direction: column; font-size: 12px; color: #5a6b7d; }
.prize-acc { position: relative; z-index: 3; font-size: 12px; color: #5a6b7d; border-top: 1px solid rgba(109,133,154,.2); padding-top: 6px; margin-top: 2px; }

.prize-card.is-especial { border-color: rgba(246,168,0,.55); }
.prize-card.is-especial::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 20px;
  box-shadow: inset 0 0 0 2px rgba(246,168,0,.35), inset 0 0 26px rgba(246,168,0,.22); }

@media (prefers-reduced-motion: reduce) {
  .prize-card, .prize-card .pshine { animation: none; }
}

.priority-lottery-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1px solid rgba(109, 133, 154, 0.25);
  border-left: 4px solid #1769aa;
  border-radius: 10px;
}

.pl-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pl-main strong {
  font-size: 14px;
  color: #143b63;
}

.pl-main span {
  font-size: 11px;
  color: #5a7088;
}

.pl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.pl-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}

.pl-badge.is-conta {
  background: #e2f3e8;
  color: #1c6b3a;
}

.pl-badge.is-manual {
  background: #e6eefb;
  color: #1769aa;
}

.pl-pools {
  font-size: 12px;
  color: #5a7088;
  font-weight: 600;
}

.pl-remove {
  border: 1px solid #e0b4b0;
  background: #fdf3f2;
  color: #b3261e;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pl-remove:hover {
  background: #f8e3e1;
}

.pl-locked {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a6d3b;
  background: #fcf3e3;
  border: 1px solid #ecd9b0;
  padding: 5px 10px;
  border-radius: 8px;
}

.national-modality-name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.national-modality-name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.national-modality-name .modality-emblem-image,
.national-modality-name .modality-emblem {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.national-modality-name div {
  display: grid;
  gap: 2px;
}

.national-modality-name strong {
  color: var(--modality-color);
  font-size: 16px;
}

.national-modality-name span {
  color: #526a82;
  font-size: 9px;
}

.national-modality-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 7px;
}

.national-modality-counts div {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border-radius: 6px;
  background: #edf3f7;
}

.national-modality-counts strong {
  color: #173a66;
  font-size: 15px;
}

.national-availability {
  height: 5px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #d3dce3;
}

.national-availability span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--modality-color);
}

.national-financial-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #d6e0e7;
}

.national-financial-values div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.national-financial-values span {
  color: #60778d;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.national-financial-values strong {
  color: #173a66;
  font-size: clamp(11px, 1vw, 14px);
  overflow-wrap: anywhere;
}

.national-modality-card .national-financial-coverage {
  display: block;
  margin-top: 4px;
  font-size: 7px;
}

.national-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 1px solid white;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #edf3f7);
  box-shadow: 0 2px 8px rgba(32, 67, 97, 0.08);
  flex-wrap: wrap;
}

.national-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.national-filters label span {
  color: #1769aa;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.national-filters select {
  padding: 7px 10px;
  border: 1px solid #c5d5e5;
  border-radius: 7px;
  background: white;
  color: #1c3b5a;
  font-size: 13px;
  cursor: pointer;
  min-width: 160px;
}

.national-filters select:focus {
  outline: 2px solid #1769aa;
  outline-offset: 1px;
}

.national-city-label.is-disabled select {
  opacity: 0.45;
  cursor: not-allowed;
}

.national-filters .clear-filters {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid #c5d5e5;
  border-radius: 7px;
  background: white;
  color: #526a82;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.national-filters .clear-filters:hover {
  background: #f0f5f9;
  border-color: #1769aa;
  color: #1769aa;
}

.national-filters .clear-filters svg {
  width: 13px;
  height: 13px;
}

.national-lotteries,
.selected-national-lottery {
  margin-bottom: 10px;
  border: 1px solid white;
  border-radius: 11px;
  background: linear-gradient(145deg, #ffffff, #edf3f7);
  box-shadow: 0 2px 8px rgba(32, 67, 97, 0.08);
}

.national-lotteries {
  padding: 12px 16px;
}

.national-lotteries-heading,
.selected-national-lottery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.national-lotteries-heading {
  margin-bottom: 10px;
}

.national-lotteries-heading h2 {
  margin: 0 0 2px;
  color: #174f8c;
  font-size: 15px;
}

.national-lotteries-heading p,
.selected-national-lottery small {
  margin: 0;
  color: #526a82;
  font-size: 9px;
}

.national-lotteries-heading strong {
  color: #1769aa;
  font-size: 11px;
}

.national-lottery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.national-lottery-card {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 10px 11px;
  border: 1px solid #cddce8;
  border-radius: 9px;
  color: #173a66;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  box-shadow: 0 2px 5px rgba(32, 67, 97, 0.08);
}

.national-lottery-card:hover {
  border-color: #1769aa;
  background: #f6fbff;
  transform: translateY(-1px);
}

.national-lottery-card span,
.selected-national-lottery span {
  color: #1769aa;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.national-lottery-card strong,
.selected-national-lottery strong {
  color: #174f8c;
  font-size: 14px;
}

.national-lottery-card small {
  color: #526a82;
  font-size: 8px;
}

.national-lottery-card div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}

.national-lottery-card b {
  overflow: hidden;
  padding: 5px;
  border-radius: 5px;
  background: #edf3f7;
  color: #173a66;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-national-lottery {
  padding: 11px 14px;
}

.selected-national-lottery div {
  display: grid;
  gap: 2px;
}

.selected-national-lottery button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #1769aa;
  border-radius: 7px;
  color: #1769aa;
  background: white;
  font-size: 11px;
  font-weight: 800;
}

.selected-national-lottery button:hover {
  background: #f0f7fc;
}

.selected-national-lottery .selected-national-lottery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#requestLotteryDetail {
  border-color: #1769aa;
  background: linear-gradient(145deg, #1f7fc6, #15568f);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(21, 86, 143, 0.28);
}

#requestLotteryDetail:hover:not(:disabled) {
  background: linear-gradient(145deg, #2389d2, #18609d);
}

#requestLotteryDetail:disabled {
  opacity: 0.7;
  cursor: default;
}

.detail-request-feedback {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 10px;
  padding: 9px 13px;
  border-radius: 8px;
  background: #e7f4ec;
  border: 1px solid #b7e0c6;
  color: #1c6b3a;
  font-size: 11px;
  font-weight: 700;
}

.detail-request-feedback strong {
  font-size: 12px;
  font-weight: 800;
}

.detail-request-feedback .detail-request-line {
  font-weight: 600;
  opacity: 0.92;
}

.detail-request-feedback.is-error {
  background: #fdecec;
  border-color: #f3c2c2;
  color: #a3302f;
}

.national-state {
  padding: 40px;
  border-radius: 12px;
  color: #174f8c;
  background: white;
  text-align: center;
}

.national-state.error {
  color: #a12632;
}

@media (max-width: 1200px) {
  .national-summary {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

.overview-dashboard {
  min-height: calc(100vh - 75px);
  padding: 20px 52px 25px 27px;
  background:
    radial-gradient(circle at 81% 4%, rgba(255, 255, 255, 0.68), transparent 25%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #e5e9ec, #cbd2d8);
}

.overview-hero {
  display: block;
  height: 216px;
  min-height: 0;
  padding: 35px 33px;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 15px;
  background:
    radial-gradient(circle at 70% 128%, rgba(255, 255, 255, 0.82), transparent 25%),
    radial-gradient(circle at 88% 16%, rgba(220, 226, 231, 0.62), transparent 34%),
    linear-gradient(140deg, #fbfbfc, #edf0f2 65%, #dce1e5);
  box-shadow:
    inset 0 2px 0 white,
    inset 0 -2px 5px rgba(78, 93, 107, 0.13),
    0 3px 7px rgba(48, 63, 77, 0.2),
    0 0 0 1px rgba(100, 115, 129, 0.23);
}

.overview-hero::before {
  right: -50px;
  bottom: -245px;
  width: 430px;
  height: 430px;
  border-color: rgba(129, 146, 161, 0.22);
}

.overview-hero::after {
  top: -155px;
  right: 258px;
  width: 235px;
  height: 235px;
  border-color: rgba(129, 146, 161, 0.18);
}

.overview-hero-copy > p {
  margin-bottom: 11px;
  color: #174f8c;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.overview-hero-copy h1 {
  max-width: 850px;
  margin-bottom: 15px;
  color: #174f8c;
  font-size: clamp(37px, 3.25vw, 49px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-shadow:
    0 1px 0 white,
    0 2px 2px rgba(58, 74, 89, 0.18);
}

.overview-hero-ring {
  position: absolute;
  top: 21px;
  right: 76px;
  margin: 0;
}

.overview-hero-ring div {
  grid-area: 1 / 1;
}

.overview-location {
  gap: 14px;
  color: #1b3c66;
  font-size: 12px;
}

.overview-location span + span::before {
  margin-right: 14px;
  color: #315b88;
}

.overview-hero-ring {
  width: 180px;
  height: 180px;
  border-color: rgba(94, 109, 123, 0.42);
  background: conic-gradient(#0869aa var(--progress), #cbd1d6 0);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.84),
    0 4px 8px rgba(48, 63, 77, 0.28),
    0 0 0 2px rgba(82, 99, 114, 0.2);
}

.overview-hero-ring::before {
  width: 143px;
  height: 143px;
  background: radial-gradient(circle at 38% 28%, #ffffff, #e4e7ea 72%);
  box-shadow:
    inset 0 2px 4px rgba(69, 85, 100, 0.15),
    0 1px 0 white;
}

.overview-hero-ring strong {
  color: #164b87;
  font-size: 30px;
}

.overview-hero-ring span {
  width: 95px;
  color: #173a66;
  font-size: 11px;
  font-weight: 600;
}

.overview-kpis {
  grid-template-columns: 1.05fr 0.95fr 1.22fr 1.12fr;
  gap: 14px;
  margin: 17px 0 11px;
}

.overview-kpis article {
  display: block;
  min-height: 135px;
  padding: 18px 24px;
  border-radius: 13px;
}

.overview-kpis article > span {
  display: block;
  color: #174f8c;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-kpi-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -6px;
  margin-top: 14px;
}

.overview-kpi-body > img {
  display: block;
  width: 56px;
  height: 59px;
  flex: 0 0 56px;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 50%;
  transform: scale(1.1);
}

.overview-kpi-body > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.overview-kpis article strong {
  color: #17549a;
  font-size: clamp(30px, 2.55vw, 42px);
  line-height: 0.95;
  white-space: nowrap;
}

.overview-kpis article small {
  color: #526a82;
  font-size: 10px;
  white-space: nowrap;
}

.overview-kpis .featured-kpi > span,
.overview-kpis .featured-kpi strong {
  color: #ec7200;
}

.overview-distribution {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  gap: 18px;
  min-height: 117px;
  margin-bottom: 12px;
  padding: 14px 17px;
  border-radius: 14px;
}

.overview-distribution-heading {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-top: 7px;
}

.overview-distribution-heading > img {
  display: block;
  width: 43px;
  height: 47px;
  flex: 0 0 43px;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 50%;
}

.overview-distribution-heading h2 {
  margin: 2px 0 6px;
  color: #174f8c;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-distribution-heading p {
  max-width: 175px;
  margin: 0;
  color: #526a82;
  font-size: 10px;
  line-height: 1.45;
}

.overview-distribution-data {
  display: grid;
  align-content: start;
  min-width: 0;
}

.overview-distribution-data > strong {
  margin: 0 5px 5px 0;
  color: #17549a;
  font-size: 11px;
  text-align: right;
}

.overview-stacked-bar {
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  box-shadow: none;
}

.overview-stacked-track {
  height: 33px;
  border: 1px solid #8998a5;
  border-radius: 7px;
  background: #c8d0d6;
  box-shadow:
    inset 0 2px 3px rgba(46, 61, 75, 0.25),
    inset 0 1px 0 white,
    0 2px 4px rgba(48, 63, 77, 0.18);
}

.overview-stacked-track::after {
  top: 2px;
  right: 4px;
  left: 4px;
  height: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent);
}

.overview-stacked-track span {
  display: grid;
  place-items: center;
  width: auto !important;
  min-width: 0;
  border-right-color: rgba(255, 255, 255, 0.6);
}

.overview-stacked-track span.is-empty {
  display: none;
}

.overview-stacked-track span.is-compact b {
  display: none;
}

.overview-stacked-track span b {
  position: relative;
  z-index: 5;
  color: white;
  font-size: 12px;
  font-weight: 750;
  text-shadow: 0 1px 1px rgba(18, 40, 61, 0.65);
}

.overview-stacked-track .sold {
  flex: 0 0 var(--share);
  background: linear-gradient(180deg, #3c77df, #164ebe 52%, #0d3594);
}

.overview-stacked-track .downloaded {
  flex: 0 0 var(--share);
  background: linear-gradient(180deg, #92cef3, #5aa7df 52%, #3389c7);
}

.overview-stacked-track .reserved {
  flex: 0 0 var(--share);
  background: linear-gradient(180deg, #ffad37, #ff8100 52%, #dd6400);
}

.overview-stacked-track .available {
  flex: 0 0 var(--share);
  background: linear-gradient(180deg, #bcc5cc, #98a5b0 52%, #788794);
}

.overview-legend {
  grid-template-columns: repeat(4, auto);
  gap: 28px;
  margin-top: 16px;
}

.overview-legend-item {
  gap: 5px;
  color: #526a82;
  font-size: 9px;
}

.overview-legend-item strong {
  color: #173a66;
}

.overview-modalities {
  padding: 0;
  border-radius: 15px;
  background: linear-gradient(145deg, #fbfbfc, #e8ecef);
}

.overview-modalities .overview-section-heading {
  min-height: 60px;
  margin: 0;
  padding: 12px 24px;
}

.overview-modalities .overview-section-heading h2 {
  margin-bottom: 3px;
  color: #174f8c;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.overview-modalities .overview-section-heading p {
  color: #314d6c;
  font-size: 10px;
}

.overview-modalities .overview-section-heading button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 186px;
  min-height: 31px;
  margin-right: 5px;
  padding: 0 13px;
  border-color: #1781c8;
  border-radius: 6px;
  color: #17549a;
  background: linear-gradient(180deg, #ffffff, #e6eff6);
  font-size: 10px;
}

.overview-modalities .overview-section-heading button [data-icon] svg {
  width: 15px;
  height: 15px;
}

.modality-performance-list {
  margin: 0;
  border-top-color: rgba(89, 105, 120, 0.22);
  background: transparent;
}

.modality-performance-row {
  grid-template-columns: 230px minmax(180px, 1fr) 188px 104px 58px;
  gap: 20px;
  min-height: 88px;
  padding: 10px 23px;
  border-bottom-color: rgba(89, 105, 120, 0.2);
  background: rgba(255, 255, 255, 0.22);
}

.modality-performance-row:hover {
  background: rgba(216, 234, 247, 0.56);
  box-shadow: inset 4px 0 var(--modality-color);
}

.modality-performance-name {
  gap: 20px;
}

.modality-emblem-image {
  width: 47px;
  height: 47px;
  flex-basis: 47px;
  filter: none;
  mix-blend-mode: multiply;
  transform: translateY(-2px) scale(1.08);
}

.modality-performance-name div,
.modality-performance-result {
  gap: 2px;
}

.modality-performance-name strong {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.modality-performance-name span,
.modality-performance-result span {
  color: #526a82;
  font-size: 10px;
}

.modality-performance-track {
  height: 21px;
  padding: 3px;
  border: 1px solid #b7c0c8;
  background: linear-gradient(180deg, #f5f6f7, #c2c9cf);
  box-shadow:
    inset 0 1px 0 white,
    0 2px 4px rgba(47, 63, 78, 0.19);
  transform: translateY(-1px);
}

.modality-performance-track::before {
  inset: 3px;
  background: linear-gradient(180deg, #dfe3e6, #c5cbd0);
  box-shadow: inset 0 2px 3px rgba(54, 69, 83, 0.18);
}

.modality-performance-fill {
  height: 13px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.72),
    inset 0 -2px 3px rgba(0, 0, 0, 0.24),
    0 1px 3px color-mix(in srgb, var(--modality-color) 45%, transparent);
}

.modality-performance-result strong {
  font-size: 19px;
}

.modality-performance-result {
  transform: translateX(-5px);
}

.modality-progress-ring {
  width: 42px;
  height: 42px;
  border-color: rgba(94, 109, 123, 0.38);
  background: conic-gradient(
    color-mix(in srgb, var(--modality-color) 86%, white) 0,
    var(--modality-color) var(--progress),
    #c9d0d5 var(--progress),
    #c9d0d5 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 2px 4px rgba(47, 63, 78, 0.24),
    0 0 0 1px rgba(82, 99, 114, 0.24);
  justify-self: end;
  transform: translateY(-3px);
}

.modality-progress-ring::before {
  width: 29px;
  height: 29px;
  background: linear-gradient(145deg, #ffffff, #dfe4e7);
  box-shadow:
    inset 0 1px 2px rgba(64, 81, 96, 0.14),
    0 1px 0 white;
}

@media (max-width: 1200px) {
  .app-shell {
    grid-template-columns: 252px minmax(0, 1fr);
  }

  .overview-dashboard {
    padding-right: 26px;
  }

  .overview-distribution {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .modality-performance-row {
    grid-template-columns: 240px minmax(150px, 1fr) 180px 104px 58px;
  }
}

.overview-view .app-footer {
  display: none;
}

@media (max-width: 760px) {
  .app-shell,
  .sidebar-collapsed .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    overflow-x: hidden;
  }

  .national-modalities {
    padding: 14px;
  }

  .national-header {
    display: grid;
    padding: 20px;
  }

  .national-modality-grid,
  .national-modality-counts,
  .national-financial-values,
  .national-lottery-grid,
  .national-lottery-card div {
    grid-template-columns: 1fr;
  }

  /* Indicadores do topo em 2 COLUNAS no mobile -> cabe muito mais na tela, menos rolagem. */
  .national-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .national-summary article {
    min-height: 68px;
    padding: 9px 11px;
  }
  .national-summary strong {
    font-size: 17px;
    white-space: nowrap;
  }
  .national-summary .national-money-summary strong {
    font-size: 13px;
  }
  .national-summary small {
    font-size: 8px;
    white-space: normal;
  }

  .national-lotteries-heading,
  .selected-national-lottery {
    align-items: flex-start;
    flex-direction: column;
  }

  .overview-dashboard {
    padding: 14px;
  }

  .overview-hero {
    height: 275px;
    padding: 25px 21px;
  }

  .overview-hero-copy h1 {
    max-width: calc(100% - 10px);
    font-size: 29px;
    line-height: 1.05;
  }

  .overview-hero-ring {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 22px;
    width: 118px;
    height: 118px;
  }

  .overview-hero-ring::before {
    width: 95px;
    height: 95px;
  }

  .overview-hero-ring strong {
    font-size: 21px;
  }

  .overview-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .overview-kpis article {
    min-width: 0;
    min-height: 112px;
    padding: 14px;
  }

  .overview-kpi-body {
    gap: 8px;
    margin-top: 12px;
    margin-left: -2px;
  }

  .overview-kpi-body > img {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
  }

  .overview-kpis article strong {
    font-size: 25px;
  }

  .overview-kpis article small {
    white-space: normal;
  }

  .overview-distribution {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 15px;
  }

  .overview-distribution-data > strong {
    margin: 0 0 8px;
    text-align: left;
  }

  .overview-modalities .overview-section-heading {
    align-items: flex-start;
    height: auto;
  }

  .overview-modalities .overview-section-heading button {
    width: auto;
    margin-right: 0;
  }

  .modality-performance-row {
    grid-template-columns: minmax(0, 1fr) 46px;
    grid-template-rows: auto auto auto auto;
    gap: 9px 12px;
    min-height: 0;
    padding: 14px 15px;
    overflow: hidden; /* nada vaza pra fora do card na largura estreita */
  }

  .modality-performance-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .modality-progress-ring {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    transform: none;
  }

  /* Cada bloco ocupa a LARGURA TOTAL, um embaixo do outro -> nada corta. */
  .modality-performance-result {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transform: none;
  }

  .modality-performance-money {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
  }
  .modality-performance-money > div {
    gap: 8px;
  }

  .modality-performance-trackwrap {
    grid-column: 1 / -1;
    grid-row: 4;
    min-width: 0;
  }

  .modality-performance-track {
    width: 100%;
    transform: none;
  }

  /* Rótulo do "zero a zero" quebra em 2 linhas se faltar espaço, sem cortar. */
  .modality-breakeven {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* Desempenho por modalidade: CENTRALIZAR a coluna do resultado (% + botao laranja) no DESKTOP */
@media (min-width: 761px) {
  .modality-performance-result {
    justify-items: center;
    text-align: center;
    transform: none;
  }
}

/* Daily insights and special contest */
.overview-daily-insights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 12px;
}

.overview-daily-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  min-width: 0;
  min-height: 128px;
  padding: 16px 18px 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 14px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(145deg, #fafbfc, #e7ebee 72%, #d5dce1);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -2px 4px rgba(69, 84, 98, 0.12),
    0 3px 7px rgba(48, 63, 77, 0.19),
    0 0 0 1px rgba(100, 115, 129, 0.2);
}

.overview-daily-card-heading,
.overview-daily-card-footer {
  display: flex;
  align-items: center;
}

.overview-daily-card-heading {
  flex-direction: column-reverse;
  justify-content: center;
  gap: 7px;
  width: 100%;
  color: #526a82;
  font-size: 11px;
  font-weight: 700;
}

.overview-daily-card-heading i {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  color: #1168a8;
  background: linear-gradient(145deg, #eef8ff, #c8e4f4);
  box-shadow:
    inset 0 1px 0 white,
    0 2px 4px rgba(55, 78, 98, 0.2);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.overview-daily-card.green .overview-daily-card-heading i {
  color: #13884a;
  background: linear-gradient(145deg, #ecfbf2, #c9ead6);
}

.overview-daily-card.violet .overview-daily-card-heading i {
  color: #7543c4;
  background: linear-gradient(145deg, #f6f0ff, #dfd2f5);
}

.overview-daily-card.orange .overview-daily-card-heading i {
  color: #e36d00;
  background: linear-gradient(145deg, #fff7e9, #f3dfbd);
}

.overview-daily-card > strong {
  display: block;
  margin-top: 6px;
  color: #173a66;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-shadow: 0 1px 0 white;
  white-space: nowrap;
}
.overview-daily-sub {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #159b55;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 0 white;
}

.overview-daily-card-footer {
  position: relative;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.overview-daily-card-footer small {
  color: #8293a5;
  font-size: 9px;
  white-space: nowrap;
}

.overview-trend {
  padding: 3px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.overview-trend.positive {
  color: #0b8545;
  background: #d7f2e1;
}

.overview-trend.negative {
  color: #c73843;
  background: #f8dfe2;
}

.overview-trend.neutral {
  color: #526a82;
  background: #e2e8ed;
}

.overview-sparkline {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 70px;
  height: 31px;
  overflow: visible;
}

.overview-sparkline polyline {
  fill: none;
  stroke: var(--spark-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}

.overview-daily-card-action {
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  place-items: center;
  transition: transform 0.15s ease;
}

.overview-daily-card-action:hover,
.overview-daily-card-action:focus-visible {
  transform: scale(1.07);
}

.report-dialog {
  width: min(640px, calc(100vw - 30px));
  max-height: calc(100vh - 60px);
  overflow: auto;
}

.report-dialog-subtitle {
  margin: -4px 0 14px;
  color: var(--ink-500);
  font-size: 13px;
}

.report-table-wrap {
  max-height: min(60vh, 420px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.report-table th,
.report-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.report-table th {
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-table small {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 11px;
}

.report-qty {
  text-align: right;
  color: var(--success);
  font-weight: 800;
  white-space: nowrap;
}

.report-empty {
  padding: 24px 12px;
  color: var(--ink-500);
  text-align: center;
  white-space: normal;
}

.overview-special-banner {
  position: relative;
  display: flex;
  min-height: 158px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  padding: 22px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 15px;
  background:
    radial-gradient(circle at 77% 135%, color-mix(in srgb, var(--special-color) 15%, transparent), transparent 36%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.95), rgba(239, 243, 246, 0.96) 64%, rgba(216, 224, 230, 0.96));
  box-shadow:
    inset 0 2px 0 white,
    inset 0 -3px 6px rgba(75, 91, 106, 0.13),
    0 4px 9px rgba(48, 63, 77, 0.22),
    0 0 0 1px rgba(100, 115, 129, 0.22);
}

.overview-special-banner::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, #ff9b18, #ec7200);
  box-shadow: 2px 0 5px rgba(236, 114, 0, 0.28);
  content: "";
}

.overview-special-banner::after {
  position: absolute;
  right: 230px;
  bottom: -125px;
  width: 235px;
  height: 235px;
  border: 1px solid rgba(116, 137, 156, 0.19);
  border-radius: 50%;
  box-shadow:
    0 0 0 30px rgba(255, 255, 255, 0.12),
    0 0 0 60px rgba(116, 137, 156, 0.05);
  content: "";
}

.overview-special-copy {
  position: relative;
  z-index: 1;
}

.overview-special-copy > span {
  display: inline-flex;
  padding: 4px 11px;
  border: 1px solid #e2a72d;
  border-radius: 13px;
  color: #4e3c0a;
  background: linear-gradient(180deg, #ffe69c, #e4b542);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 4px rgba(101, 78, 19, 0.2);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overview-special-copy h2 {
  margin: 8px 0 4px;
  color: #174f8c;
  font-size: 23px;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 0 white;
}

.overview-special-copy p {
  color: #314d6c;
  font-size: 11px;
}

.overview-special-copy p strong {
  color: #ec7200;
}

.overview-special-copy > div {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  color: #173a66;
  font-size: 10px;
}

.overview-special-copy em {
  padding: 4px 8px;
  border: 1px solid rgba(23, 79, 140, 0.17);
  border-radius: 7px;
  color: #174f8c;
  background: rgba(255, 255, 255, 0.65);
  font-style: normal;
  font-weight: 750;
}

.overview-special-banner button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 190px;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d5951b;
  border-radius: 12px;
  color: #17304d;
  background: linear-gradient(180deg, #ffe08b, #e5b33f 56%, #c99222);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    inset 0 -2px 3px rgba(95, 65, 8, 0.26),
    0 5px 11px rgba(106, 79, 18, 0.28);
  font-size: 11px;
  font-weight: 850;
}

.overview-special-banner button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

@media (max-width: 1200px) {
  .overview-daily-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .overview-daily-insights {
    grid-template-columns: 1fr;
  }

  /* Mobile: cards do dia CENTRALIZADOS e com número mais destacado. */
  .overview-daily-card {
    text-align: center;
    padding: 18px 16px 16px;
  }
  .overview-daily-card-heading {
    flex-direction: column-reverse; /* ícone (badge) em cima, rótulo centralizado embaixo */
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 12px;
  }
  .overview-daily-card-heading i,
  .overview-daily-card-action {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .overview-daily-card > strong {
    margin-top: 10px;
    font-size: 34px; /* número grande e destacado */
  }
  .overview-daily-sub {
    font-size: 15px;
  }
  .overview-daily-card-footer {
    justify-content: center;
    padding-right: 0; /* sem a reserva do sparkline */
    margin-top: 10px;
  }
  .overview-daily-card .overview-sparkline {
    display: none; /* mantém o layout centralizado limpo */
  }

  .overview-special-banner {
    display: block;
    padding: 20px;
  }

  .overview-special-copy > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .overview-special-banner button {
    width: 100%;
    margin-top: 18px;
  }
}

/* ===== MOBILE (celular/iPhone): caber sem cortar a tabela e os numeros ===== */
/* O estouro vinha de itens de grid/flex sem min-width:0 -> a tabela larga (9 colunas)
   empurrava a pagina e o overflow-x:hidden do body cortava os lados (numeros sumiam).
   min-width:0 + max-width:100% prendem tudo na largura da tela; a tabela passa a ROLAR
   (deslizar com o dedo) dentro do .table-scroll, em vez de sumir. */
@media (max-width: 760px) {
  .app-shell,
  .main-area,
  .workspace,
  .content,
  .content > * {
    min-width: 0;
    max-width: 100%;
  }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll table {
    width: max-content;
    min-width: 100%;
  }
  /* Hero da Visão Geral no estreito: vira COLUNA (título + seletor em cima, anel embaixo).
     O anel é position:absolute por padrão (vinha SOBREPONDO o seletor) -> devolvo ao fluxo
     com position:relative + inset:auto e reduzo o tamanho. !important + seletor específico
     porque o styles.css tem rules duplicadas de tema (.overview-hero em 569/2826/3345/4720). */
  .overview-dashboard .overview-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 18px !important;
  }
  .overview-dashboard .overview-hero-copy {
    width: 100%;
  }
  .overview-dashboard .overview-hero-copy h1 {
    font-size: 21px !important;
    line-height: 1.05 !important;
  }
  /* Títulos das telas menores no celular (mais compacto e profissional). */
  .page-heading h1,
  .national-header h1 {
    font-size: 20px !important;
    letter-spacing: -0.02em !important;
  }
  .page-heading p,
  #pageSubtitle,
  .national-header p,
  .national-header small {
    font-size: 11px !important;
  }
  .overview-dashboard .overview-hero-ring {
    position: relative !important;
    inset: auto !important;
    width: 122px !important;
    height: 122px !important;
    margin: 4px 0 0 !important;
    flex: 0 0 auto !important;
  }
  .overview-dashboard .overview-hero-ring::before {
    width: 96px !important;
    height: 96px !important;
  }
  .overview-dashboard .overview-hero-ring strong {
    font-size: 22px !important;
  }
  .overview-dashboard .overview-hero-ring span {
    width: auto !important;
    font-size: 9px !important;
  }
  /* Seletor de lotérica em largura total (não fica espremido sob o título). */
  .overview-dashboard .overview-lottery-picker {
    display: flex !important;
    width: 100%;
    margin-top: 14px;
  }
  .overview-dashboard .overview-lottery-picker select {
    flex: 1;
    max-width: none;
  }
  /* Cards KPI: valor menor + menos padding p/ valores longos ("R$ 2.422,52") não cortarem. */
  .overview-kpis article {
    padding: 14px !important;
    min-height: 0 !important;
  }
  .overview-kpis article strong {
    font-size: 19px !important;
  }
  /* Distribuição das cotas: a legenda era repeat(4,auto) numa linha só -> empurrava o
     container e a barra (100%) estourava (clipada pelo overflow:hidden da track). Vira
     2 colunas (cabe) e a barra fica contida na largura da tela. */
  .overview-legend {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 14px !important;
  }
  .overview-distribution-data,
  .overview-stacked-bar,
  .overview-stacked-track {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .content {
    padding-left: 12px;
    padding-right: 12px;
  }
  th,
  td {
    padding: 10px 8px;
    font-size: 11px;
  }
}

/* ===== MOBILE FUNCIONAL: a tabela do Explorar vira CARTÕES (<=600px) ===== */
/* No celular, cada bolão é um cartão com os campos ROTULADOS empilhados — todos os
   números à mostra, sem deslizar de lado. No PC continua tabela normal. */
@media (max-width: 600px) {
  .table-scroll {
    overflow-x: visible;
  }
  .table-scroll table,
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll td {
    display: block;
    width: 100%;
  }
  .table-scroll table {
    min-width: 0;
    width: 100%;
    font-size: 13px;
  }
  .table-scroll thead {
    display: none;
  }
  .table-scroll tbody tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    margin: 0 0 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(16, 43, 73, 0.06);
  }
  .table-scroll tbody tr.selected {
    box-shadow: inset 4px 0 var(--blue-600), 0 2px 10px rgba(16, 43, 73, 0.06);
  }
  .table-scroll td {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px dashed var(--line);
    text-align: left;
    white-space: normal;
  }
  .table-scroll td:last-child {
    border-bottom: 0;
  }
  .table-scroll td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--ink-700);
    margin-right: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  /* Modalidade = cabeçalho do cartão (sem rótulo, destaque) */
  .table-scroll td.cell-mod {
    border-bottom: 1px solid var(--line);
    padding: 0 0 10px;
    margin-bottom: 4px;
  }
  .table-scroll td.cell-mod::before {
    content: "";
    display: none;
  }
  /* Ação = botão de largura total no rodapé do cartão */
  .table-scroll td.cell-acao {
    border-bottom: 0;
    padding-top: 12px;
  }
  .table-scroll td.cell-acao::before {
    content: "";
    display: none;
  }
  .table-scroll td.cell-acao .follow-button {
    width: 100%;
    padding: 12px;
  }
  /* Mobile: card do bolão CENTRALIZADO e mais destacado (rótulo em cima, valor grande). */
  .table-scroll td {
    text-align: center;
  }
  .table-scroll td::before {
    display: block;
    margin: 0 0 3px;
    font-size: 10px;
    color: var(--ink-500);
  }
  .table-scroll td:not(.cell-mod):not(.cell-acao) {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-950);
  }
  .table-scroll td.cell-mod {
    text-align: center;
  }
  .table-scroll td.cell-mod .modality-cell {
    justify-content: center;
    min-width: 0;
    font-size: 15px;
  }
  /* linha-cabeçalho de modalidade não tem data-label -> não mostrar o ":" solto */
  .table-scroll .modality-group-row td {
    font-size: inherit;
    font-weight: inherit;
  }
  .table-scroll .modality-group-row td::before {
    content: "";
    display: none;
  }
}

/* ===== PAINEL ADMIN ===== */
.admin-view {
  padding: 0 0 40px;
}

.admin-section {
  margin-bottom: 40px;
}

.admin-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-950);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-section-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
}
.national-kpi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 100%);
  box-shadow: var(--shadow);
  color: #fff;
}
.national-kpi-main {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.national-kpi-main strong {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.national-kpi-main span {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.national-kpi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.national-kpi-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.national-kpi-stats span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
}
.national-kpi-stats strong {
  font-size: 18px;
  font-weight: 700;
}
.national-kpi-pct {
  color: var(--orange-500);
}

/* Marketplace nacional: quebra por região (barras) e por estado (grade) */
.national-break { margin-top: 16px; }
.national-break-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6d7f90; margin: 14px 0 8px; }
.national-break-title small { font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3c2; }
.nat-break-list { display: flex; flex-direction: column; gap: 8px; }
.nat-break-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; }
.nat-break-label { font-size: 12.5px; font-weight: 700; color: #143b63; }
.nat-break-bar { height: 10px; border-radius: 999px; background: #e6ecf4; overflow: hidden; }
.nat-break-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1e5fbf, #3f86e6); }
.nat-break-val { font-size: 12px; color: #52708c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nat-break-val b { color: #143b63; }
.nat-uf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.nat-uf { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid #e3e8f2; border-radius: 10px; background: linear-gradient(180deg, #fff, #f7f9fd); }
.nat-uf-code { font-size: 11px; font-weight: 800; color: #1e5fbf; letter-spacing: 0.03em; }
.nat-uf-n { display: flex; align-items: baseline; gap: 6px; }
.nat-uf-n b { font-size: 16px; color: #143b63; font-variant-numeric: tabular-nums; }
.nat-uf-n em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange-500); }
.nat-uf-sub { font-size: 10px; color: #94a3c2; }
@media (max-width: 760px) {
  .nat-break-row { grid-template-columns: 78px 1fr auto; gap: 7px; }
  .nat-uf-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.admin-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 4px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.admin-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-950);
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table tr:hover td {
  background: var(--surface-2, #f8fafc);
}

.admin-empty {
  color: var(--ink-400);
  font-style: italic;
  text-align: center;
  padding: 24px !important;
}

.admin-actions {
  white-space: nowrap;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s;
}

.admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-btn + .admin-btn {
  margin-left: 8px;
}

.admin-btn-approve {
  background: #16a34a;
  color: #fff;
}

.admin-btn-approve:hover:not(:disabled) {
  filter: brightness(1.1);
}

.admin-btn-reject {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.admin-btn-reject:hover:not(:disabled) {
  background: #fee2e2;
}

.nav-item-admin {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.admin-loading,
.admin-error {
  padding: 32px;
  text-align: center;
  color: var(--ink-400);
}

.admin-error {
  color: #dc2626;
}

/* Admin cards no mobile */
@media (max-width: 600px) {
  .admin-table thead {
    display: none;
  }
  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }
  .admin-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--surface);
  }
  .admin-table td {
    padding: 6px 0;
    border: 0;
    border-bottom: 1px dashed var(--line);
  }
  .admin-table td:last-child {
    border-bottom: 0;
  }
  .admin-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-right: 4px;
  }
  .admin-table td.admin-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
  }
  .admin-table td.admin-actions::before {
    display: none;
  }
  .admin-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ===== Aba Monitoramento — cena 3D premium flutuante (estilo FalconLot) ===== */
.monitor-view { position: relative; }
.monitor-scene { position: relative; overflow: hidden; border-radius: 26px; padding: 24px 24px 46px; isolation: isolate;
  background:
    radial-gradient(90% 130% at 85% -10%, #2a8fdd 0%, transparent 55%),
    radial-gradient(80% 130% at 50% -20%, #2a8fdd, transparent 60%),
    linear-gradient(135deg, #1173c9 0%, #0a5cae 45%, #084d85 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 24px 50px rgba(3,30,55,.35); }
.monitor-orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; pointer-events: none; z-index: 0;
  animation: monOrb 12s ease-in-out infinite alternate; }
.monitor-orb.o1 { width: 320px; height: 320px; background: #3fa4ee; top: -90px; left: -80px; }
.monitor-orb.o2 { width: 240px; height: 240px; background: #ffd15c; bottom: 30px; right: 5%; opacity: .25; animation-delay: -4s; }
.monitor-orb.o3 { width: 170px; height: 170px; background: #7fe3c6; top: 32%; left: 46%; opacity: .18; animation-delay: -8s; }
@keyframes monOrb { from { transform: translateY(-14px) scale(1); } to { transform: translateY(18px) scale(1.08); } }
.monitor-floor { position: absolute; left: -20%; right: -20%; bottom: -150px; height: 380px; pointer-events: none; opacity: .4; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, transparent, #000 30%, transparent 95%);
  animation: monFloor 3.2s linear infinite; }
@keyframes monFloor { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 56px 0; } }

.monitor-hero { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.monitor-title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; color: #fff; letter-spacing: .01em;
  text-shadow: 0 1px 0 #b9cfe2, 0 2px 0 #9cb8d1, 0 3px 0 #7fa1c0, 0 4px 0 #486e93, 0 6px 8px rgba(3,30,55,.45); }
.monitor-title .hl { color: #ffd15c;
  text-shadow: 0 1px 0 #e6ad25, 0 2px 0 #cf9915, 0 3px 0 #b58208, 0 4px 0 #8f6600, 0 6px 8px rgba(3,30,55,.5); }
.monitor-sub { margin: 6px 0 0; color: rgba(255,255,255,.78); font-size: .9rem; }
.monitor-toolbar { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.monitor-ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.monitor-range { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 700; border-radius: 12px; padding: 8px 14px; backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(3,30,55,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.monitor-range:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.monitor-range.active { color: #4a2f00; border-color: transparent; background: linear-gradient(180deg, #ffc133, #f6a800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,70,0,.35), 0 4px 0 #b87a00, 0 14px 26px rgba(246,168,0,.4); }
.monitor-range.active:active { transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,70,0,.3), 0 1px 0 #b87a00, 0 8px 16px rgba(246,168,0,.35); }
.monitor-updated { color: rgba(255,255,255,.72); font-size: .78rem; }

.monitor-section { position: relative; z-index: 1; margin: 26px 2px 14px; font-size: 1.02rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 0 #9cb8d1, 0 2px 0 #486e93, 0 4px 6px rgba(3,30,55,.4); }

.monitor-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; }
.monitor-stat { position: relative; border-radius: 18px; padding: 12px 14px 40px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f2f8fc); border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(3,30,55,.18), 0 18px 34px rgba(3,30,55,.3), 0 44px 70px rgba(3,30,55,.28);
  animation: monFloaty 6s ease-in-out infinite; will-change: transform; }
.monitor-stat:nth-child(2n) { animation-delay: -1.6s; }
.monitor-stat:nth-child(3n) { animation-delay: -3.1s; }
.monitor-stat:nth-child(5n) { animation-delay: -4.4s; }
@keyframes monFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.monitor-stat header { font-size: .78rem; font-weight: 700; color: #33475e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-stat strong { display: block; font-size: 2rem; line-height: 1.28; font-weight: 800; color: var(--mon, #143b63); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 2px 0 rgba(3,30,55,.1), 0 5px 7px rgba(3,30,55,.2); }
.monitor-stat .mspark { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; }
.monitor-stat .mspark svg { width: 100%; height: 32px; display: block; }
.monitor-stat .shine { position: absolute; top: -10%; bottom: -10%; left: -130%; width: 55%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: monShine 7s ease-in-out infinite; }
.monitor-stat:nth-child(2n) .shine { animation-delay: -2.4s; }
.monitor-stat:nth-child(3n) .shine { animation-delay: -4.8s; }
@keyframes monShine { 0%, 55% { left: -130%; } 100% { left: 160%; } }

.monitor-charts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 20px; perspective: 1300px; }
.monitor-chart { position: relative; border-radius: 20px; padding: 16px; overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, #ffffff, #f6fafd); border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(3,30,55,.18), 0 24px 40px rgba(3,30,55,.3), 0 70px 110px rgba(3,30,55,.35);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .3s ease; will-change: transform; }
.monitor-chart:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(3,30,55,.2), 0 34px 60px rgba(3,30,55,.36), 0 90px 140px rgba(3,30,55,.42); }
.monitor-chart .cglare { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 2;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%), rgba(17,115,201,.14), transparent 60%); }
.monitor-chart:hover .cglare { opacity: 1; }
.monitor-chart header { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; font-size: .92rem; font-weight: 800; color: #172432; }
.monitor-chart header small { display: block; font-weight: 600; color: #61778b; font-size: .72rem; }
.monitor-chart .mchip { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(145deg, var(--mon-2, #2a8fdd), var(--mon, #0a5cae));
  box-shadow: inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 4px rgba(4,40,72,.4), 0 10px 18px rgba(8,77,133,.35); }
.monitor-chart .mchip img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.monitor-chart .mplot svg { width: 100%; height: auto; display: block; }
.monitor-chart svg .grid line { stroke: #e3ecf4; stroke-width: 1; }
.monitor-chart svg text { font-size: 10px; fill: #7a8899; }
.monitor-chart svg .ylab text { text-anchor: end; }
.monitor-chart svg .xlab text { text-anchor: middle; }
.monitor-note { position: relative; z-index: 1; color: rgba(255,255,255,.85); padding: 26px 8px; }

@media (max-width: 560px) { .monitor-charts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .monitor-stat, .monitor-stat .shine, .monitor-floor, .monitor-orb { animation: none; }
  .monitor-chart { transform: none; }
}

/* ===== Aba Proxies (saúde dos proxies de coleta) ===== */
.proxies-view { display: flex; flex-direction: column; gap: 16px; }
.proxy-summary { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 18px 22px; border-radius: 16px; border: 1px solid #e1e8f0; background: linear-gradient(180deg, #fff, #f4f8fc); }
.proxy-summary.healthy { border-color: #a7dcb8; background: linear-gradient(180deg, #f2fbf5, #e6f6ec); }
.proxy-summary.alert { border-color: #f0b9a0; background: linear-gradient(180deg, #fff5f0, #fdeae0); }
.proxy-summary.offline { flex-direction: column; align-items: flex-start; gap: 4px; border-color: #d8ccba; background: #faf6ee; }
.proxy-summary.offline strong { color: #8a5a12; }
.proxy-summary.offline span { color: #6d7f90; font-size: 13px; }
.proxy-summary.offline code { background: #efe6d5; padding: 1px 6px; border-radius: 5px; }
.proxy-big { display: flex; flex-direction: column; line-height: 1.1; }
.proxy-big strong { font-size: 2.4rem; font-weight: 800; color: #143b63; font-variant-numeric: tabular-nums; }
.proxy-summary.healthy .proxy-big strong { color: #1c8a4a; }
.proxy-summary.alert .proxy-big strong { color: #c0491f; }
.proxy-big span { font-size: 12px; color: #61778b; font-weight: 600; }
.proxy-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.proxy-stats > div { display: flex; flex-direction: column; gap: 1px; }
.proxy-stats > div > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: #6d7f90; }
.proxy-stats > div > strong { font-size: 17px; color: #143b63; font-variant-numeric: tabular-nums; }
.proxy-stats > div > strong.bad { color: #c0491f; }
.proxy-grid { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px; border-radius: 14px; background: #f4f8fc; border: 1px solid #e6eef6; }
.proxy-dot { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.12); cursor: help; }
.proxy-dot.ok { background: linear-gradient(180deg, #4bcb7e, #1c8a4a); }
.proxy-dot.slow { background: linear-gradient(180deg, #ffd15c, #e0a000); }
.proxy-dot.dead { background: linear-gradient(180deg, #f0715a, #c0311a); box-shadow: 0 0 0 2px rgba(192,49,26,0.25), 0 1px 2px rgba(0,0,0,0.2); }
.proxy-groups { display: flex; flex-direction: column; gap: 12px; }
.proxy-group { border-radius: 14px; background: #f4f8fc; border: 1px solid #e6eef6; overflow: hidden; }
.proxy-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #e6eef6; background: linear-gradient(180deg, #fff, #f0f6fc); }
.proxy-group-head strong { font-size: 13px; color: #143b63; font-weight: 700; }
.proxy-group-count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px; }
.proxy-group-count.ok { color: #1c8a4a; background: #e6f6ec; }
.proxy-group-count.bad { color: #c0491f; background: #fdeae0; }
.proxy-group-count.swap { color: #b06a00; background: #ffefcf; }
.proxy-group-tags { display: inline-flex; gap: 6px; align-items: center; }
.proxy-group .proxy-grid { border: none; background: transparent; padding: 12px 14px; }
.proxy-dot.parked { background: repeating-linear-gradient(45deg, #cdd6df, #cdd6df 3px, #b6c2ce 3px, #b6c2ce 6px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); }
.proxy-table tr.parked td { color: #8a5a12; background: #fff8ec; }
.proxy-allgood { color: #1c8a4a; font-weight: 600; padding: 6px 2px; }
.proxy-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proxy-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #6d7f90; padding: 6px 10px; border-bottom: 2px solid #e1e8f0; }
.proxy-table td { padding: 7px 10px; border-bottom: 1px solid #eef3f8; font-variant-numeric: tabular-nums; }
.proxy-table tr.dead td { color: #c0491f; font-weight: 600; }
.proxy-table tr.slow td { color: #a06a1c; }
.proxy-note { color: #61778b; padding: 18px 4px; }

#adminProxyBody { display: flex; flex-direction: column; gap: 14px; }

/* Cabeçalho de grupo por modalidade na tabela de bolões, destacado na COR da loteria */
.modality-group-row > td {
  padding: 11px 18px 10px !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--mod, #143b63) 22%, #ffffff),
      color-mix(in srgb, var(--mod, #143b63) 8%, #ffffff) 55%,
      #ffffff);
  border-top: 1px solid color-mix(in srgb, var(--mod, #143b63) 35%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--mod, #143b63) 22%, #ffffff);
  border-left: 6px solid var(--mod, #143b63);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  position: sticky;
  top: 0;
  z-index: 3;
}
.modality-group-label {
  display: flex;
  align-items: center;
  gap: 11px;
}
.modality-group-label img,
.modality-group-label .modality-cell-logo {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.modality-group-label strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mod, #143b63) 80%, #0d1a27);
}
.modality-group-label em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--mod, #143b63);
  border-radius: 999px;
  padding: 2px 11px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===== Cabeçalhos de modalidade na COR de cada loteria (igual ao agrupamento) ===== */
/* (1) Card de modalidade na aba "Modalidades Brasil" */
.national-modality-name {
  padding: 9px 12px;
  border-radius: 11px;
  border-left: 5px solid var(--modality-color);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--modality-color) 20%, #ffffff),
    color-mix(in srgb, var(--modality-color) 6%, #ffffff) 62%,
    #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.national-modality-name strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 800;
  color: color-mix(in srgb, var(--modality-color) 80%, #0d1a27);
}
.national-modality-name span {
  color: color-mix(in srgb, var(--modality-color) 55%, #33475e);
  font-weight: 600;
}

/* (2) Linha de "Desempenho por modalidade" na Visão geral */
.modality-performance-name {
  padding: 10px 14px;
  border-radius: 13px;
  border-left: 6px solid var(--modality-color);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--modality-color) 18%, #ffffff),
    color-mix(in srgb, var(--modality-color) 5%, #ffffff) 65%,
    rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.modality-performance-name strong {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--modality-color) 82%, #0d1a27);
}
.modality-performance-name span {
  color: color-mix(in srgb, var(--modality-color) 52%, #33475e);
  font-weight: 700;
}

/* Contas CAIXA no painel de admin */
.acct-table td { vertical-align: middle; }
.acct-table tr.acct-dead td:first-child,
.acct-table tr.acct-slow td { color: #a06a1c; }
.acct-table tr.acct-dead td { color: #c0491f; }
.acct-token { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #1c8a4a; background: #eafaef; border: 1px solid #a7dcb8; border-radius: 999px; padding: 1px 8px; }
.acct-token.soon { color: #c0491f; background: #fdeae0; border-color: #f0b9a0; }

/* Linha do tempo de vendas/reservas no detalhe do bolão */
.cota-timeline { margin-top: 18px; }
.cota-timeline-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; max-height: 340px; overflow-y: auto; border: 1px solid #e1e8f0; border-radius: 12px; padding: 6px; background: #f8fbfe; }
.cota-event { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; }
.cota-event:nth-child(odd) { background: rgba(255,255,255,0.7); }
.cota-event-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.cota-event.venda .cota-event-dot { background: #1c8a4a; box-shadow: 0 0 0 3px rgba(28,138,74,0.14); }
.cota-event.reserva .cota-event-dot { background: #d7900a; box-shadow: 0 0 0 3px rgba(215,144,10,0.16); }
.cota-event.impressa .cota-event-dot { background: #1769aa; box-shadow: 0 0 0 3px rgba(23,105,170,0.16); }
.cota-event.baixada .cota-event-dot { background: #6b4fb3; box-shadow: 0 0 0 3px rgba(107,79,179,0.16); }
.cota-event time { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #33475e; font-weight: 600; white-space: nowrap; }
.cota-event-label { font-size: 12.5px; font-weight: 700; }
.cota-event.venda .cota-event-label { color: #1c8a4a; }
.cota-event.reserva .cota-event-label { color: #b3730a; }
.cota-event.impressa .cota-event-label { color: #1769aa; }
.cota-event.baixada .cota-event-label { color: #5a41a0; }
.cota-event strong { font-size: 12.5px; color: #143b63; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cota-timeline-empty { color: #61778b; padding: 12px 4px; font-size: 13px; }
.cota-timeline-note { color: #8a97a5; font-size: 11px; margin: 8px 2px 0; }

/* ============================================================================
   SIMULADOR DE BOLÕES (portado do FalconLOT) — tudo ESCOPADO em .sim-scope p/
   NÃO colidir com .card/.field/.pill do Radar. Tokens de cor locais.
   ============================================================================ */
.sim-scope {
  --surface: #ffffff;
  --ink: #16213a; --ink-2: #5b6b8c; --ink-3: #94a3c2;
  --line: #e6eaf4;
  --gold: #c89a3c; --gold-2: #e2c16d; --gold-dark: #8f6a1e; --gold-soft: #fdf3da;
  --green: #16a34a; --green-soft: #e7f8ee;
  --red-soft: #fdeaea;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(22, 33, 58, .05), 0 8px 24px -12px rgba(22, 33, 58, .12);
  color: var(--ink);
}
.sim-scope .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.sim-scope .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.sim-scope .card-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.sim-scope .card-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sim-scope .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.sim-scope .pill { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 3.5px 10px; white-space: nowrap; }
.sim-scope .pill-paid { background: var(--green-soft); color: var(--green); }
.sim-scope .game-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--game, var(--gold)); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .18), 0 4px 10px -4px rgba(0, 0, 0, .35); }
.sim-scope .game-badge svg { width: 22px; height: 22px; }
.sim-scope .game-badge.sm { width: 30px; height: 30px; border-radius: 9px; }
.sim-scope .game-badge.sm svg { width: 17px; height: 17px; }
.sim-scope .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sim-scope .field { display: flex; flex-direction: column; gap: 6px; }
.sim-scope .field label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sim-scope .field input, .sim-scope .field select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; background: #fff; color: var(--ink); outline-color: var(--gold); }
.sim-scope .sim-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--ink-2); text-transform: uppercase; }
.sim-scope .sim-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-dark); font-size: 12px; font-weight: 900; border: 1px solid rgba(200, 154, 60, .45); }
.sim-scope .sim-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
/* Botões de jogo: 3D ULTRA PREMIUM + luz girando ao redor (border beam na cor do jogo) */
.sim-scope .sim-g {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: none; border-radius: 16px; padding: 15px 8px;
  font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-2);
  cursor: pointer; text-align: center;
  background: linear-gradient(165deg, color-mix(in srgb, var(--game) 10%, #fff), color-mix(in srgb, var(--game) 4%, #fff) 55%, color-mix(in srgb, var(--game) 14%, #eef1f7));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 9px color-mix(in srgb, var(--game) 20%, transparent),
    0 8px 20px -7px color-mix(in srgb, var(--game) 42%, rgba(16, 42, 82, 0.5)),
    0 2px 5px rgba(16, 42, 82, 0.12);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sim-scope .sim-g::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--beam-a),
    transparent 0deg, transparent 205deg,
    color-mix(in srgb, var(--game) 35%, #fff) 280deg,
    #ffffff 312deg,
    color-mix(in srgb, var(--game) 35%, #fff) 344deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin 3s linear infinite;
  pointer-events: none; z-index: 3;
}
.sim-scope .sim-g:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 9px color-mix(in srgb, var(--game) 26%, transparent),
    0 15px 30px -8px color-mix(in srgb, var(--game) 52%, rgba(16, 42, 82, 0.55)),
    0 3px 7px rgba(16, 42, 82, 0.14);
}
.sim-scope .sim-g.active {
  color: var(--ink);
  background: linear-gradient(165deg, color-mix(in srgb, var(--game) 22%, #fff), color-mix(in srgb, var(--game) 11%, #fff) 55%, color-mix(in srgb, var(--game) 28%, #eef1f7));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 9px color-mix(in srgb, var(--game) 34%, transparent),
    0 0 0 2px color-mix(in srgb, var(--game) 60%, transparent),
    0 14px 30px -6px color-mix(in srgb, var(--game) 55%, rgba(16, 42, 82, 0.5));
}
.sim-scope .sim-g.active::before { animation-duration: 2.1s; }
@media (prefers-reduced-motion: reduce) {
  .sim-scope .sim-g::before { animation: none; opacity: 0.5; }
}
.sim-scope .sim-g .game-badge { width: 44px; height: 44px; border-radius: 13px; }
.sim-scope .sim-g .game-badge svg { width: 25px; height: 25px; }
.sim-scope .sim-wrap {
  --sim-game: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sim-game) 20%, #ffffff), color-mix(in srgb, var(--sim-game) 7%, #ffffff));
  padding: 16px; border-radius: 18px; transition: background .25s ease;
  border: 1px solid color-mix(in srgb, var(--sim-game) 30%, transparent);
}
.sim-scope .sim-wrap .card { border-top: 4px solid var(--sim-game); }
.sim-scope .sim-wrap .card-title { color: color-mix(in srgb, var(--sim-game) 62%, #14223e); }
.sim-scope .sim-wrap .sim-step { color: color-mix(in srgb, var(--sim-game) 60%, #14223e); }
.sim-scope .sim-wrap .sim-step-n { background: color-mix(in srgb, var(--sim-game) 16%, #ffffff); color: color-mix(in srgb, var(--sim-game) 64%, #14223e); border-color: color-mix(in srgb, var(--sim-game) 45%, transparent); }
.sim-scope .sim-wrap .sim-cota { background: linear-gradient(135deg, color-mix(in srgb, var(--sim-game) 60%, #0c1730), #0c1730); border-color: color-mix(in srgb, var(--sim-game) 55%, transparent); }
.sim-scope .sim-wrap .sim-cota b { color: #fff; }
.sim-scope .sim-fixed { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 15px; border-radius: 12px; background: var(--gold-soft); border: 1px solid rgba(200, 154, 60, .4); font-size: 12.5px; font-weight: 700; }
.sim-scope .sim-fixed small { display: block; font-weight: 600; color: var(--ink-2); }
.sim-scope .sim-fixed b { color: var(--gold-dark); white-space: nowrap; }
.sim-scope .sim-cota { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 14px; border-radius: 14px; margin-bottom: 14px; background: linear-gradient(135deg, #101f3d, #0c1730); border: 1px solid rgba(200, 154, 60, .4); }
.sim-scope .sim-cota small,
.sim-scope .sim-cota b { width: 100%; text-align: center; }
.sim-scope .sim-cota span { justify-content: center; }
.sim-scope .sim-cota small { display: block; color: #8fa0d4; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sim-scope .sim-cota b { display: block; font-size: 34px; font-weight: 900; letter-spacing: -.02em; color: var(--gold-2); margin: 4px 0 8px; }
.sim-scope .sim-cota span { display: inline-flex; align-items: center; gap: 7px; color: #c7d2ea; font-size: 12.5px; font-weight: 700; }
.sim-scope .sim-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f0f3fa; font-size: 13px; }
.sim-scope .sim-line span { color: var(--ink-2); }
.sim-scope .sim-line b { white-space: nowrap; }
.sim-scope .sim-line.total { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 800; }
.sim-scope .sim-line.total span { color: var(--ink); }
.sim-scope .sim-odds { margin-top: 12px; padding: 11px 14px; border-radius: 11px; background: var(--green-soft); color: #14532d; font-size: 12.5px; font-weight: 600; }
/* Cota INVÁLIDA: mantém a COR DO JOGO no fundo; sinaliza só com borda/anel vermelho (o aviso âmbar abaixo explica o erro) */
.sim-scope .sim-cota.invalid {
  border: 2px solid #ef4444;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.18), inset 0 -12px 24px rgba(0, 0, 0, 0.36), 0 0 0 2px rgba(239, 68, 68, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.5);
}
.sim-scope .sim-alert { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; font-weight: 600; }
.sim-scope .sim-alert.err { background: var(--red-soft); color: #991b1b; border: 1px solid #f4b4b4; }
.sim-scope .sim-alert b { font-weight: 800; }
@media (max-width: 760px) {
  .sim-scope .grid-2-1 { grid-template-columns: 1fr; }
  .sim-scope .sim-games { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Simulador 3D PREMIUM: profundidade em TODA a área ===== */
.sim-scope .sim-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 20px 44px -20px color-mix(in srgb, var(--sim-game) 45%, rgba(16, 42, 82, 0.55)),
    0 3px 8px rgba(16, 42, 82, 0.10);
}
/* Cards (Monte o bolão / Resultado): relevo saltado com brilho no topo */
.sim-scope .card {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  border: 1px solid #e3e8f2;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -7px 16px rgba(120, 135, 165, 0.10),
    0 16px 32px -14px rgba(16, 42, 82, 0.30),
    0 5px 12px rgba(16, 42, 82, 0.10);
}
.sim-scope .card-title { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); }
/* Campos: recuados (inset) — parecem afundados no card */
.sim-scope .field input, .sim-scope .field select {
  background: linear-gradient(180deg, #f2f5fb, #ffffff);
  box-shadow: inset 0 2px 4px rgba(120, 135, 165, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
}
.sim-scope .field input:focus, .sim-scope .field select:focus {
  border-color: var(--sim-game, var(--gold));
  box-shadow: inset 0 2px 4px rgba(120, 135, 165, 0.20), 0 0 0 3px color-mix(in srgb, var(--sim-game, var(--gold)) 26%, transparent);
}
/* Caixa da cota: profundidade forte (gloss no topo, sombra funda embaixo) */
.sim-scope .sim-cota {
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.18),
    inset 0 -12px 24px rgba(0, 0, 0, 0.36),
    0 14px 28px -10px rgba(0, 0, 0, 0.5);
}
.sim-scope .sim-cota b { text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); }
/* Barra de comissão (dourada), odds (verde) e círculos numerados: relevo */
.sim-scope .sim-fixed {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -3px 7px rgba(200, 154, 60, 0.16), 0 7px 15px -7px rgba(160, 120, 30, 0.32);
}
.sim-scope .sim-odds {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 7px 15px -8px rgba(20, 120, 60, 0.42);
}
.sim-scope .sim-step-n {
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(160, 120, 30, 0.28), 0 2px 4px rgba(120, 90, 20, 0.32);
}
.sim-scope .pill-paid {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 7px -3px rgba(20, 120, 60, 0.35);
}

/* Linha de modalidade (Visão geral) clicável -> vai pro Meus Bolões filtrado */
.modality-performance-row.is-clickable { cursor: pointer; transition: background .14s ease, box-shadow .14s ease; }
.modality-performance-row.is-clickable:hover { box-shadow: inset 4px 0 var(--modality-color), 0 6px 18px -10px rgba(16, 42, 82, 0.35); }
.modality-performance-row.is-clickable:focus-visible { outline: 2px solid var(--modality-color); outline-offset: -2px; }

/* Logos oficiais dos jogos no Simulador (substituem o trevo genérico) */
.sim-scope .sim-logo { display: inline-grid; place-items: center; flex: 0 0 auto; }
.sim-scope .sim-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sim-scope .sim-g .sim-logo { width: 54px; height: 54px; }
.sim-scope .sim-cota .sim-logo,
.sim-scope .sim-logo.sm { width: 26px; height: 26px; }

/* ============================================================================
   RESULTADOS OFICIAIS DA CAIXA (aba Resultados)
   ============================================================================ */
.results-view { display: flex; flex-direction: column; gap: 16px; }
.result-modality-bar { flex-wrap: wrap; }
.result-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.result-nav-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid #cdd8e6;
  background: linear-gradient(180deg, #ffffff, #eef3f9);
  color: #17539a; font-size: 20px; font-weight: 800; cursor: pointer;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(16, 42, 82, 0.12);
  transition: filter .12s ease, transform .12s ease;
}
.result-nav-btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.result-nav-btn:disabled { opacity: 0.4; cursor: default; }
.result-nav-current {
  min-width: 150px; text-align: center; font-size: 15px; font-weight: 800; color: #143b63;
  padding: 8px 16px; border-radius: 999px; background: #eaf1f8; border: 1px solid #d4e0ec;
}
.result-card {
  border: 1px solid #e3e8f2; border-top: 4px solid var(--result-color, #143b63);
  border-radius: 16px; background: linear-gradient(180deg, #ffffff, #f7f9fd);
  padding: 20px 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.95), 0 14px 30px -14px rgba(16, 42, 82, 0.28);
}
.result-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.result-logo { width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.result-card-title { display: flex; flex-direction: column; gap: 2px; }
.result-card-title strong { font-size: 20px; color: color-mix(in srgb, var(--result-color) 68%, #14223e); letter-spacing: -0.01em; }
.result-card-title span { font-size: 12.5px; color: #6d7f90; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.result-tag {
  margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--result-color) 14%, #fff); color: var(--result-color);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.result-balls-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #7c8da0; margin: 10px 0 8px; }
.result-balls { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 6px; }
.result-ball {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(120% 120% at 32% 24%, color-mix(in srgb, var(--ball) 55%, #fff) 0%, var(--ball) 46%, color-mix(in srgb, var(--ball) 72%, #000) 100%);
  color: #fff; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -5px 9px rgba(0, 0, 0, 0.26), 0 4px 9px -3px rgba(0, 0, 0, 0.4);
}
.result-premios { width: 100%; border-collapse: collapse; margin: 16px 0 6px; }
.result-premios th, .result-premios td { padding: 10px 12px; text-align: left; font-size: 13px; }
.result-premios thead th { color: #6d7f90; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid #e6ecf4; }
.result-premios tbody tr { border-bottom: 1px solid #eef2f8; }
.result-premios tbody td:first-child { font-weight: 700; color: #143b63; }
.result-premios tbody td:nth-child(3) { text-align: right; font-weight: 700; color: #1c8a4a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-premios tbody td:nth-child(2) { color: #52708c; font-variant-numeric: tabular-nums; }
/* alinhamento das colunas (cabeçalho JUNTO com os dados) */
/* RATEIO (Faixa/Ganhadores/Prêmio): ganhadores e prêmio à direita, faixa à esquerda */
.result-premios:not(.prem-table) th:nth-child(2), .result-premios:not(.prem-table) td:nth-child(2),
.result-premios:not(.prem-table) th:nth-child(3), .result-premios:not(.prem-table) td:nth-child(3) { text-align: right; }
/* LOTÉRICAS (prem-table): Premiações e Soma à direita */
.prem-table th:nth-child(4), .prem-table td:nth-child(4),
.prem-table th:nth-child(5), .prem-table td:nth-child(5) { text-align: right; }
.result-empty { text-align: center; color: #8a97a5; padding: 14px; }
.result-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e0e7f0; }
.result-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.result-summary span { font-size: 12.5px; color: #6d7f90; }
.result-summary strong { font-size: 14.5px; color: #143b63; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-status { padding: 40px 16px; text-align: center; color: #61778b; font-size: 14px; }
.result-error { color: #b3261e; }
.result-error .admin-btn { margin-top: 12px; }
@media (max-width: 760px) {
  .result-summary { grid-template-columns: 1fr; }
  .result-ball { width: 38px; height: 38px; font-size: 13px; }
  .result-nav-current { min-width: 120px; font-size: 13px; }
}

/* Premiações (lotéricas que premiaram + estados) */
.result-prem { border-top-color: #1e5fbf; margin-top: 4px; }
.result-prem-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.result-prem-head strong { font-size: 15px; color: #143b63; }
.result-prem-count { font-size: 12px; color: #7c8da0; font-weight: 700; }
/* Resumo por canal de venda (físico / eletrônico / IBC) */
.prem-canais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.prem-canal { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; border: 1px solid #e3e8f2; background: linear-gradient(180deg, #ffffff, #f6f9fd); box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(16, 42, 82, 0.2); }
.prem-canal-ic { font-size: 22px; line-height: 1; }
.prem-canal strong { display: block; font-size: 20px; color: #143b63; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prem-canal small { display: block; font-size: 11.5px; color: #6d7f90; font-weight: 700; margin-top: 1px; }
.prem-canal.fisica { border-left: 4px solid #16883d; }
.prem-canal.canais { border-left: 4px solid #1e5fbf; }
.prem-canal.ibc { border-left: 4px solid #cb852b; }
@media (max-width: 760px) { .prem-canais { grid-template-columns: 1fr; } }

/* Filtros da lista de premiadas em BOTÕES (tipo + estado) */
.prem-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.prem-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.prem-btn {
  padding: 7px 14px; border: 1px solid #cdd8e6; border-radius: 999px;
  background: #fff; color: #143b63; font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.prem-btn:hover { border-color: #1e5fbf; }
.prem-btn.active { background: #1e5fbf; border-color: #1e5fbf; color: #fff; box-shadow: 0 3px 8px rgba(30, 95, 191, 0.28); }
.prem-btns-uf .prem-btn { padding: 6px 11px; font-size: 12px; }
.prem-table td:nth-child(1) { color: #8a97a5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prem-table td:nth-child(2) { font-weight: 700; color: #143b63; }
.prem-table td:nth-child(4) { font-variant-numeric: tabular-nums; color: #52708c; }
.prem-table td:nth-child(5) { text-align: right; font-weight: 700; color: #1c8a4a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prem-bolao { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #eaf3ff; color: #1e5fbf; font-size: 11px; font-weight: 800; }

/* ============ ABA RESULTADOS NO MOBILE: compacto e profissional ============
   O layout global de "tabela vira card" (data-label) NÃO se aplica aqui — as tabelas
   de resultado voltam a ser tabelas compactas (com rolagem horizontal). #resultsView
   garante especificidade acima da regra global. */
@media (max-width: 760px) {
  #resultsView .result-card { padding: 14px 14px; }
  #resultsView .result-card-head { gap: 10px; margin-bottom: 12px; }
  #resultsView .result-logo { width: 42px; height: 42px; }
  #resultsView .result-card-title strong { font-size: 17px; }
  #resultsView .result-card-title span { font-size: 11px; }
  #resultsView .result-balls-label { margin: 8px 0 6px; }
  #resultsView .result-balls { gap: 7px; }
  #resultsView .result-ball { width: 38px; height: 38px; font-size: 13px; }

  /* Tabelas: manter como TABELA (não card) */
  #resultsView .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #resultsView table { width: 100%; }
  #resultsView thead { display: table-header-group; }
  #resultsView thead tr { display: table-row; }
  #resultsView thead th { display: table-cell; padding: 8px 8px; font-size: 10px; white-space: nowrap; }
  #resultsView tbody tr {
    display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0;
    background: transparent; box-shadow: none; border-bottom: 1px solid #eef2f8;
  }
  #resultsView tbody td {
    display: table-cell; text-align: left; padding: 8px 8px; border: 0;
    font-size: 12px; font-weight: 400; color: inherit; white-space: nowrap; vertical-align: middle;
  }
  #resultsView tbody td::before { content: none; display: none; }
  #resultsView tbody td:first-child { font-weight: 700; }
  /* RATEIO (só .result-premios, NÃO prem-table): tabela REAL p/ o cabeçalho alinhar com as colunas */
  #resultsView .result-premios:not(.prem-table) { display: table; width: 100%; }
  #resultsView .result-premios:not(.prem-table) thead { display: table-header-group; }
  #resultsView .result-premios:not(.prem-table) tbody { display: table-row-group; }
  #resultsView .result-premios:not(.prem-table) tr { display: table-row; }
  #resultsView .result-premios:not(.prem-table) th,
  #resultsView .result-premios:not(.prem-table) td { display: table-cell; }
  #resultsView .result-premios:not(.prem-table) th:nth-child(2), #resultsView .result-premios:not(.prem-table) td:nth-child(2),
  #resultsView .result-premios:not(.prem-table) th:nth-child(3), #resultsView .result-premios:not(.prem-table) td:nth-child(3) { text-align: right; }
  #resultsView .result-premios:not(.prem-table) td:nth-child(3) { color: #1c8a4a; font-weight: 700; }
  /* nome da lotérica pode quebrar (evita rolagem enorme) */
  #resultsView .prem-table td:nth-child(2) { white-space: normal; min-width: 130px; font-weight: 700; }

  /* resumo e filtros mais compactos */
  #resultsView .result-summary > div { padding: 2px 0; }
  #resultsView .prem-btns { gap: 5px; }
  #resultsView .prem-btn { padding: 6px 11px; font-size: 12px; }
  #resultsView .prem-canal { padding: 11px 12px; justify-content: center; text-align: center; }
  #resultsView .prem-canal strong { font-size: 18px; }
  /* filtros e resumo centralizados */
  #resultsView .prem-btns { justify-content: center; }
  #resultsView .result-prem-head { justify-content: center; text-align: center; }

  /* PREMIAÇÕES: card compacto por lotérica (5 colunas não cabem -> não corta) */
  #resultsView .prem-table thead { display: none; }
  #resultsView .prem-table tbody tr {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    grid-template-areas: "rank name soma" "rank city prem";
    gap: 1px 8px; align-items: center; padding: 10px 2px; border-bottom: 1px solid #eef2f8;
  }
  #resultsView .prem-table tbody td { display: block; padding: 0; border: 0; white-space: normal; font-size: 12px; text-align: left; }
  #resultsView .prem-table td:nth-child(1) { grid-area: rank; align-self: start; color: #8a97a5; font-weight: 700; }
  #resultsView .prem-table td:nth-child(2) { grid-area: name; font-weight: 700; font-size: 13px; color: #143b63; line-height: 1.25; }
  #resultsView .prem-table td:nth-child(3) { grid-area: city; font-size: 11px; color: #6d7f90; }
  #resultsView .prem-table td:nth-child(4) { grid-area: prem; text-align: right; font-size: 11px; color: #6d7f90; }
  #resultsView .prem-table td:nth-child(4)::after { content: " prêm."; }
  #resultsView .prem-table td:nth-child(5) { grid-area: soma; text-align: right; font-weight: 800; font-size: 13px; color: #1c8a4a; white-space: nowrap; }
}