: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: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
}

.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;
  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);
}

.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);
}

.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;
}

/* 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;
}

.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;
}

.cota-missing {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange-500);
  color: white;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.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: 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);
}

.auth-gate {
  background:
    radial-gradient(circle at 78% 14%, rgba(0, 105, 180, 0.16), transparent 34%),
    radial-gradient(circle at 14% 86%, rgba(243, 146, 0, 0.13), transparent 26%),
    linear-gradient(145deg, #f5f6f7, #d7dde2 58%, #c7ced5);
}

.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;
  }
}

/* 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 {
  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 {
  justify-content: space-between;
  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;
  min-height: 33px;
  gap: 6px;
  margin-top: 8px;
  padding-right: 76px;
}

.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);
}

.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-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; }