:root {
  --bg: #08100d;
  --surface: #101916;
  --surface2: #15211d;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f7f2;
  --muted: #839189;
  --lime: #b7ff34;
  --mint: #43f5b0;
  --cyan: #23d5e8;
  --coral: #ff6d58;
  --gold: #ffc53d;
  --purple: #a87cff;
  --display: "Unbounded", sans-serif;
  --body: "Manrope", sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
}
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 78% 0, rgba(37, 111, 78, 0.15), transparent 28%),
    var(--bg);
  font-family: var(--body);
  min-height: 100vh;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 254px;
  background: #060d0a;
  border-right: 1px solid var(--line);
  padding: 25px 18px;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.brand {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 0.77rem;
}
.brand strong span {
  color: var(--lime);
}
.mark {
  width: 33px;
  height: 33px;
  position: relative;
  display: grid;
  place-items: center;
}
.mark i {
  position: absolute;
  width: 27px;
  height: 11px;
  border: 2px solid var(--lime);
  border-radius: 50%;
}
.mark i:nth-child(2) {
  transform: rotate(60deg);
}
.mark i:nth-child(3) {
  transform: rotate(120deg);
}
.tenant {
  margin: 28px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tenant small,
.panel > small,
.section-intro small,
.panel-head small,
.calculator > small,
.integration-grid article > small {
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-weight: 800;
}
.tenant b {
  font-size: 0.8rem;
}
.tenant span {
  font-size: 0.58rem;
  color: var(--mint);
}
.tenant span i,
.live i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  margin-right: 5px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sidebar nav button {
  border: 0;
  background: transparent;
  color: #89968f;
  text-align: left;
  padding: 12px;
  border-radius: 9px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.sidebar nav button i {
  font-style: normal;
  width: 20px;
  text-align: center;
  font-size: 1rem;
}
.sidebar nav button:hover,
.sidebar nav button.active {
  background: var(--surface2);
  color: #fff;
}
.sidebar nav button.active i {
  color: var(--lime);
}
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 18px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sidebar-foot a {
  font-size: 0.66rem;
  color: #fff;
  text-decoration: none;
}
.sidebar-foot small {
  color: #56635d;
  font-size: 0.53rem;
}
.workspace {
  margin-left: 254px;
  min-height: 100vh;
}
.topbar {
  height: 96px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: rgba(8, 16, 13, 0.88);
  backdrop-filter: blur(18px);
  z-index: 10;
}
.topbar small {
  font-size: 0.53rem;
  letter-spacing: 0.17em;
  color: var(--mint);
  font-weight: 800;
}
.topbar h1 {
  font-family: var(--display);
  font-size: 1.08rem;
  margin: 5px 0 0;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.live {
  font-size: 0.6rem;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #b8c4be;
}
.live.big {
  font-size: 0.7rem;
}
.langs {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.langs button {
  width: 29px;
  height: 25px;
  border: 0;
  background: transparent;
  color: #718078;
  font-size: 0.52rem;
  font-weight: 800;
  border-radius: 999px;
}
.langs button.active {
  background: #fff;
  color: #07100c;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 0;
  background: var(--lime);
  font-weight: 900;
  color: #07100c;
}
.menu {
  display: none;
}
.view {
  display: none;
  padding: 34px;
  animation: fade 0.3s ease;
}
.view.active {
  display: block;
}
.welcome {
  padding: 30px 32px;
  border-radius: 20px;
  background: linear-gradient(110deg, #153725, #101916 58%, #14211c);
  border: 1px solid rgba(183, 255, 52, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.welcome:after {
  content: "EG";
  position: absolute;
  right: 18%;
  font: 800 8rem var(--display);
  color: rgba(183, 255, 52, 0.035);
}
.welcome span {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: var(--mint);
  font-weight: 800;
}
.welcome h2,
.section-intro h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2.6rem);
  letter-spacing: -0.045em;
  margin: 8px 0;
}
.welcome p,
.section-intro p {
  font-size: 0.73rem;
  color: var(--muted);
  margin: 0;
}
.primary,
.secondary {
  border-radius: 9px;
  padding: 11px 15px;
  font-size: 0.65rem;
  font-weight: 800;
}
.primary {
  border: 0;
  background: var(--lime);
  color: #07100c;
  box-shadow: 0 10px 30px rgba(183, 255, 52, 0.11);
}
.secondary {
  border: 1px solid var(--line);
  background: var(--surface2);
  color: #fff;
}
.full {
  width: 100%;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.kpis article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
}
.kpis article > span {
  grid-column: 1/-1;
  font-size: 0.52rem;
  letter-spacing: 0.13em;
  color: var(--muted);
  font-weight: 800;
}
.kpis article > b {
  font: 700 1.42rem var(--display);
  margin: 13px 0 8px;
}
.kpis em {
  font-style: normal;
  font-size: 0.56rem;
  align-self: center;
}
.kpis small {
  grid-column: 1/-1;
  font-size: 0.53rem;
  color: #57645e;
}
.up {
  color: var(--mint);
}
.neutral {
  color: var(--gold);
}
.overview-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.72fr;
  gap: 12px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.panel-head h3,
.panel h3 {
  font-family: var(--display);
  font-size: 0.82rem;
  margin: 5px 0;
}
.panel-head > span {
  font-size: 0.55rem;
  color: var(--muted);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.chart {
  height: 210px;
  margin-top: 20px;
  display: flex;
  align-items: end;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 51px,
    var(--line) 52px
  );
}
.chart i {
  flex: 1;
  min-width: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--lime), rgba(183, 255, 52, 0.12));
  transition: 0.25s;
}
.chart i:hover {
  filter: brightness(1.35);
}
.chart-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.56rem;
  color: var(--muted);
}
.chart-foot i,
.legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
}
.mint {
  background: var(--lime);
}
.healthy {
  color: var(--mint) !important;
  border-color: rgba(67, 245, 176, 0.2) !important;
}
.health-ring {
  width: 148px;
  height: 148px;
  margin: 18px auto;
  border-radius: 50%;
  background: conic-gradient(var(--mint) 0 67%, #1e2a25 67%);
  display: grid;
  place-items: center;
  position: relative;
}
.health-ring:after {
  content: "";
  position: absolute;
  inset: 12px;
  background: var(--surface);
  border-radius: 50%;
}
.health-ring > div {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.health-ring b {
  font: 700 1.25rem var(--display);
}
.health-ring span {
  font-size: 0.55rem;
  color: var(--muted);
}
.health dl,
.invoice dl {
  margin: 0;
}
.health dl div,
.invoice dl div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  font-size: 0.61rem;
}
.health dt,
.invoice dt {
  color: var(--muted);
}
.health dd,
.invoice dd {
  font-weight: 800;
  margin: 0;
}
.alerts {
  grid-column: 1/-1;
}
.alerts .panel-head > b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--coral);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
}
.alerts > button {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #fff;
  display: grid;
  grid-template-columns: 35px 1fr 20px;
  text-align: left;
  align-items: center;
  padding: 13px 2px;
}
.alerts button > i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-style: normal;
}
.alerts button span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alerts button b {
  font-size: 0.64rem;
}
.alerts button small {
  font-size: 0.55rem;
  color: var(--muted);
}
.alerts button em {
  font-style: normal;
  color: var(--muted);
}
.warn {
  background: rgba(255, 197, 61, 0.12);
  color: var(--gold);
}
.ok {
  background: rgba(67, 245, 176, 0.12);
  color: var(--mint);
}
.info {
  background: rgba(35, 213, 232, 0.12);
  color: var(--cyan);
}
.section-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 4px 0 28px;
}
.section-intro > div {
  max-width: 720px;
}
.catalog-summary {
  width: 120px;
  height: 86px;
  border-radius: 16px;
  background: var(--lime);
  color: #07100c;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.catalog-summary b {
  font: 800 1.6rem var(--display);
}
.catalog-summary span {
  font-size: 0.58rem;
  font-weight: 800;
}
.toolbar {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
}
.toolbar label {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 12px;
  color: var(--muted);
}
.toolbar input,
.toolbar select,
.toolbar textarea {
  outline: 0;
}
.toolbar label input {
  width: calc(100% - 25px);
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.65rem;
}
.toolbar select {
  border: 1px solid var(--line);
  background: var(--surface);
  color: #fff;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 0.62rem;
}
.catalog-table {
  display: grid;
  gap: 8px;
}
.catalog-game {
  display: grid;
  grid-template-columns: 52px 1.4fr 0.75fr 0.68fr 0.55fr 44px;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 9px 13px;
}
.catalog-game img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}
.catalog-game h3 {
  font: 700 0.66rem var(--display);
  margin: 0 0 4px;
}
.catalog-game small {
  font-size: 0.52rem;
  color: var(--muted);
}
.catalog-game label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.48rem;
  color: var(--muted);
}
.catalog-game select {
  background: #0a120f;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px;
  font-size: 0.56rem;
}
.catalog-game > span {
  font-size: 0.57rem;
  color: var(--muted);
}
.toggle {
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #2a3430;
  padding: 3px;
}
.toggle i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #76827c;
  transition: 0.2s;
}
.toggle.on {
  background: rgba(183, 255, 52, 0.25);
}
.toggle.on i {
  transform: translateX(16px);
  background: var(--lime);
}
.compliance {
  font-size: 0.53rem;
  color: var(--mint);
  border: 1px solid rgba(67, 245, 176, 0.22);
  border-radius: 999px;
  padding: 9px 12px;
}
.math-grid,
.billing-grid,
.integration-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
}
.math-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
}
.game-badge {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ff8b2d, #744600);
  display: grid;
  place-items: center;
  font: 700 0.7rem var(--display);
}
.math-title h3 {
  margin: 0;
}
.math-title p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 0.55rem;
}
.math-title > b {
  margin-left: auto;
  color: var(--mint);
  font-size: 0.52rem;
  border: 1px solid rgba(67, 245, 176, 0.2);
  padding: 7px 9px;
  border-radius: 999px;
}
.math-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.math-metrics div {
  padding: 15px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.math-metrics span {
  font-size: 0.49rem;
  color: var(--muted);
}
.math-metrics b {
  font-size: 0.68rem;
}
.distribution {
  margin-top: 18px;
}
.distribution > span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--lime) 0 56%,
    var(--cyan) 56% 87%,
    var(--purple) 87%
  );
}
.distribution div {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.distribution b {
  font-size: 0.49rem;
  color: var(--muted);
}
.profile-picker label,
.calculator label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.53rem;
  color: var(--muted);
  margin: 12px 0;
}
.profile-picker select,
.profile-picker input,
.profile-picker textarea {
  border: 1px solid var(--line);
  background: #09120e;
  color: #fff;
  border-radius: 8px;
  padding: 9px;
  font-size: 0.62rem;
}
.profile-picker textarea {
  resize: vertical;
  min-height: 52px;
}
.guardrail {
  background: rgba(67, 245, 176, 0.05);
  border: 1px solid rgba(67, 245, 176, 0.13);
  border-radius: 10px;
  padding: 11px;
  margin: 13px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.guardrail b {
  font-size: 0.57rem;
  color: var(--mint);
}
.guardrail span {
  font-size: 0.51rem;
  color: #9aaca3;
}
.version-list {
  margin-top: 12px;
}
.version-row {
  display: grid;
  grid-template-columns: 1fr 0.6fr 0.65fr 0.8fr 1fr;
  padding: 13px 5px;
  border-top: 1px solid var(--line);
  font-size: 0.58rem;
  align-items: center;
}
.version-row.head {
  font-size: 0.47rem;
  color: var(--muted);
  letter-spacing: 0.09em;
}
.tag {
  font-style: normal;
  width: max-content;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 0.48rem;
}
.live-tag {
  background: rgba(67, 245, 176, 0.1);
  color: var(--mint);
}
.review-tag {
  background: rgba(255, 197, 61, 0.1);
  color: var(--gold);
}
.archived-tag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.telemetry-kpis {
  margin-top: 0;
}
.telemetry-chart {
  margin-bottom: 12px;
}
.stream-lines {
  height: 260px;
  margin: 20px 0 10px;
  position: relative;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 51px,
    var(--line) 52px
  );
  overflow: hidden;
}
.stream-lines svg {
  width: 100%;
  height: 100%;
}
.legend {
  display: flex;
  gap: 20px;
  font-size: 0.56rem;
  color: var(--muted);
}
.legend i {
  background: var(--c);
}
.event-row {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr 1fr 0.6fr 0.5fr;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  font-size: 0.57rem;
}
.event-row.head {
  font-size: 0.46rem;
  color: var(--muted);
}
.event-row .good {
  color: var(--mint);
}
.event-row .slow {
  color: var(--gold);
}
.calculator label output {
  align-self: flex-end;
  margin-top: -18px;
  color: #fff;
  font-weight: 800;
}
.calculator input[type="range"] {
  accent-color: var(--lime);
  width: 100%;
}
.calculator .check {
  flex-direction: row;
  align-items: center;
  color: #fff;
}
.check input {
  display: none;
}
.check span {
  width: 37px;
  height: 21px;
  background: var(--lime);
  border-radius: 999px;
  position: relative;
}
.check span:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  right: 3px;
  top: 3px;
  background: #07100c;
  border-radius: 50%;
}
.check input:not(:checked) + span {
  background: #2a3430;
}
.check input:not(:checked) + span:after {
  right: 19px;
  background: #819087;
}
.pricing-note {
  font-size: 0.52rem;
  line-height: 1.6;
  color: var(--muted);
  padding: 11px;
  background: rgba(255, 255, 255, 0.025);
  border-radius: 9px;
}
.invoice > div:first-child {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.invoice > div:first-child > b {
  font: 700 2rem var(--display);
  color: var(--lime);
  margin: 8px 0;
}
.invoice > div:first-child > span {
  font-size: 0.55rem;
  color: var(--muted);
}
.invoice dl {
  margin-bottom: 18px;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.tiers article {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--surface);
}
.tiers article.featured {
  border-color: rgba(183, 255, 52, 0.5);
  box-shadow: inset 0 3px var(--lime);
}
.tiers small {
  font-size: 0.5rem;
  color: var(--mint);
  letter-spacing: 0.12em;
}
.tiers h3 {
  font: 700 1.1rem var(--display);
}
.tiers h3 em {
  font: 500 0.55rem var(--body);
  color: var(--muted);
}
.tiers p {
  font-size: 0.62rem;
  color: var(--muted);
}
.tiers span {
  font-size: 0.54rem;
}
.api-card code,
.key-card code {
  display: block;
  margin: 15px 0;
  padding: 13px;
  background: #07100d;
  border-radius: 9px;
  color: var(--mint);
  font-size: 0.65rem;
  overflow: auto;
}
.api-card div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 0.58rem;
}
.api-card div span,
.key-card p {
  color: var(--muted);
}
.key-card p {
  font-size: 0.58rem;
  line-height: 1.6;
}
.endpoints {
  margin-top: 12px;
}
.endpoints > div:not(.panel-head) {
  display: grid;
  grid-template-columns: 55px 1fr 2fr;
  gap: 15px;
  padding: 12px 5px;
  border-top: 1px solid var(--line);
  font-size: 0.6rem;
}
.endpoints b {
  font-size: 0.48rem;
}
.endpoints code {
  color: #dbe4df;
}
.endpoints span {
  color: var(--muted);
}
.post {
  color: var(--gold);
}
.get {
  color: var(--mint);
}
.audit-row {
  display: grid;
  grid-template-columns: 0.9fr 0.8fr 1.3fr 1fr 0.6fr;
  gap: 12px;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
  font-size: 0.57rem;
  align-items: center;
}
.audit-row.head {
  font-size: 0.46rem;
  color: var(--muted);
}
.audit-row code {
  color: var(--cyan);
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #fff;
  color: #07100c;
  border-radius: 11px;
  padding: 13px 18px;
  font-size: 0.63rem;
  font-weight: 800;
  transform: translateY(80px);
  opacity: 0;
  transition: 0.3s;
  z-index: 30;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.toast.show {
  transform: none;
  opacity: 1;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.theme-toggle { width:34px; height:34px; border:1px solid var(--line); background:var(--surface2); color:var(--text); border-radius:50%; font-size:.8rem }
.security-grid { display:grid; grid-template-columns:.65fr 1fr; gap:12px }
.security-score { text-align:center }
.score-ring { width:145px; height:145px; margin:18px auto; border-radius:50%; background:conic-gradient(var(--lime) 0 92%,var(--surface2) 92%); display:grid; place-items:center; position:relative }
.score-ring:after { content:''; position:absolute; inset:12px; background:var(--surface); border-radius:50% }
.score-ring b,.score-ring span { z-index:1; grid-area:1/1 }
.score-ring b { font:800 2rem var(--display); transform:translateY(-5px) }
.score-ring span { font-size:.55rem; color:var(--muted); transform:translateY(21px) }
.security-score p { font-size:.58rem; color:var(--muted); line-height:1.6 }
.auth-policy>div { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:13px 0; font-size:.59rem }
.auth-policy>div span { color:var(--muted) }
.green { color:var(--mint) }
.role-row { display:grid; grid-template-columns:38px 1fr .6fr 1fr; gap:10px; align-items:center; border-top:1px solid var(--line); padding:12px 0; font-size:.57rem }
.avatar.small { width:30px; height:30px; display:grid; place-items:center; font-size:.5rem }
.role-row>div { display:flex; flex-direction:column }
.role-row small,.role-row>span:last-child { color:var(--muted); font-size:.5rem }
.access-log>div:not(.panel-head) { display:grid; grid-template-columns:34px 1fr; gap:9px; border-top:1px solid var(--line); padding:12px 0 }
.access-log i { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-style:normal }
.access-log span { display:flex; flex-direction:column; gap:3px }
.access-log b { font-size:.58rem }
.access-log small { font-size:.5rem; color:var(--muted) }

.deploy-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px }
.integration-wizard>small { display:block; margin:4px 0 12px }
.method-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:22px }
.method-picker button { border:1px solid var(--line); background:var(--surface2); color:var(--text); border-radius:10px; padding:12px; text-align:left; display:flex; flex-direction:column; gap:5px }
.method-picker button.active { border-color:var(--lime); box-shadow:inset 0 0 0 1px var(--lime) }
.method-picker b { font-size:.58rem }
.method-picker span { color:var(--muted); font-size:.48rem }
.integration-wizard label { display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:.51rem; margin:10px 0 }
.integration-wizard input { border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:8px; padding:10px; font-size:.6rem }
.launch-preview p { color:var(--muted); font-size:.58rem; line-height:1.6 }
.browser-mock { margin:16px 0; background:#07100d; border:1px solid var(--line); border-radius:13px; overflow:hidden; min-height:270px }
.browser-mock>div { height:36px; background:#17221e; display:flex; align-items:center; gap:5px; padding:0 10px }
.browser-mock>div i { width:7px; height:7px; border-radius:50%; background:var(--coral) }
.browser-mock>div i:nth-child(2) { background:var(--gold) }
.browser-mock>div i:nth-child(3) { background:var(--mint) }
.browser-mock>div span { margin-left:8px; background:#0b1511; color:#728078; border-radius:5px; padding:5px 10px; font-size:.47rem; flex:1 }
.browser-mock section { padding:18px; color:#fff }
.browser-mock section>b { font:700 .58rem var(--display) }
#launch-games { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px }
#launch-games article { min-height:82px; border-radius:9px; padding:7px; background-size:cover; background-position:center; display:flex; align-items:end; position:relative; overflow:hidden }
#launch-games article:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.9)) }
#launch-games b { position:relative; z-index:1; font-size:.44rem }
.flow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0 }
.flow-steps article { background:var(--surface2); border:1px solid var(--line); border-radius:11px; padding:14px }
.flow-steps article>b { color:var(--lime); font:700 .6rem var(--display) }
.flow-steps h4 { font:700 .62rem var(--display); margin:12px 0 5px }
.flow-steps p { color:var(--muted); font-size:.5rem; line-height:1.5; margin:0 }
.flow-steps code { color:var(--cyan) }
.integration-flow pre { background:#050a08; color:#b8c8bf; border:1px solid var(--line); border-radius:11px; padding:16px; overflow:auto; font-size:.58rem; line-height:1.6 }
.production-checklist { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px }
.production-checklist span { border:1px solid var(--line); border-radius:999px; padding:7px 10px; color:var(--muted); font-size:.5rem }
.production-checklist .done { color:var(--mint); border-color:rgba(67,245,176,.2) }
#finance-scope { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:9px; padding:10px 12px; font-size:.58rem }
.finance-kpis { margin-top:0 }
.finance-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:12px; margin-bottom:12px }
.profit-row { display:grid; grid-template-columns:1.2fr .8fr .8fr .6fr .6fr; gap:10px; border-top:1px solid var(--line); padding:13px 4px; align-items:center; font-size:.57rem }
.profit-row.head { color:var(--muted); font-size:.46rem }
.profit-row strong { color:var(--mint) }
.dre dl { margin:14px 0 0 }
.dre dl div { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:10px 0; font-size:.57rem }
.dre dt { color:var(--muted) }
.dre dd { margin:0; font-weight:800 }
.dre .subtotal { color:var(--text); border-top-color:rgba(183,255,52,.35) }
.dre .total { color:var(--lime); font-size:.66rem }
.finance-grid.lower { grid-template-columns:1fr 1fr }
.game-profit-row { display:grid; grid-template-columns:30px 1.1fr 1.4fr .6fr; gap:10px; align-items:center; border-top:1px solid var(--line); padding:12px 4px; font-size:.56rem }
.game-profit-row>b { color:var(--muted) }
.game-profit-row i { height:7px; background:var(--surface2); border-radius:999px; position:relative }
.game-profit-row i:after { content:''; position:absolute; inset:0 auto 0 0; width:var(--w); background:linear-gradient(90deg,var(--mint),var(--lime)); border-radius:inherit }
.aging { display:flex; align-items:end; gap:12px; height:175px; margin-top:20px }
.aging>span { flex:1; height:100%; display:flex; flex-direction:column; justify-content:end; align-items:center; gap:6px }
.aging b,.aging small { font-size:.47rem }
.aging small { color:var(--muted); text-align:center }
.aging i { width:72%; height:var(--h); max-height:120px; border-radius:6px 6px 0 0; background:linear-gradient(var(--lime),rgba(183,255,52,.12)) }
.reconciliation>div { display:grid; grid-template-columns:1.4fr .4fr .7fr auto; align-items:center; gap:16px }
.reconciliation small { color:var(--muted); font-size:.48rem; letter-spacing:.12em }
.reconciliation h3 { margin:6px 0 }
.reconciliation p,.reconciliation>div>span { margin:0; color:var(--muted); font-size:.52rem }
.reconciliation>div>b { color:var(--lime); font:800 1.5rem var(--display) }

body.light { --bg:#edf1ea; --surface:#fff; --surface2:#e5ebe3; --line:rgba(7,17,13,.12); --text:#101813; --muted:#627068; background:radial-gradient(circle at 78% 0,rgba(80,188,123,.14),transparent 28%),var(--bg) }
body.light .sidebar { background:#f8faf6 }
body.light .brand,body.light .sidebar-foot a { color:#101813 }
body.light .sidebar nav button { color:#5b675f }
body.light .sidebar nav button:hover,body.light .sidebar nav button.active { color:#101813; background:#e3eadf }
body.light .topbar { background:rgba(248,250,246,.88) }
body.light .live { color:#526159 }
body.light .secondary,body.light .alerts>button { color:#101813 }
body.light .toolbar label input,body.light .toolbar select,body.light .catalog-game select,body.light .profile-picker select,body.light .profile-picker input,body.light .profile-picker textarea { color:#101813; background:#f5f7f2 }
body.light .api-card code,body.light .key-card code { background:#edf1ea }
body.light .toast { background:#101813; color:#fff }
body.light .welcome { background:linear-gradient(110deg,#d8f5df,#fff 58%,#e7f1e8) }
body.light .chart i { background:linear-gradient(#70bf22,rgba(112,191,34,.18)) }
body.light .method-picker button,body.light .integration-wizard input,body.light #finance-scope { color:#101813 }
body.light .integration-flow pre { background:#e8ede6; color:#26342c }
@media (max-width: 1050px) {
  .sidebar {
    width: 210px;
  }
  .workspace {
    margin-left: 210px;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .math-grid,
  .billing-grid,
  .integration-grid {
    grid-template-columns: 1fr;
  }
  .catalog-game {
    grid-template-columns: 52px 1.3fr 0.7fr 0.5fr 44px;
  }
  .catalog-game > span {
    display: none;
  }
}
@media (max-width: 760px) {
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
    width: 250px;
  }
  .sidebar.open {
    transform: none;
  }
  .workspace {
    margin: 0;
  }
  .menu {
    display: block;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.2rem;
  }
  .topbar {
    height: 78px;
    padding: 0 16px;
  }
  .topbar > div:first-of-type small {
    display: none;
  }
  .topbar h1 {
    font-size: 0.8rem;
  }
  .live,
  .langs {
    display: none;
  }
  .view {
    padding: 20px 14px;
  }
  .welcome {
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;
    padding: 22px;
  }
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .kpis article {
    padding: 14px;
  }
  .kpis article > b {
    font-size: 0.9rem;
  }
  .section-intro {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar label {
    flex-basis: 100%;
  }
  .catalog-game {
    grid-template-columns: 45px 1fr 44px;
  }
  .catalog-game label,
  .catalog-game > span {
    display: none;
  }
  .math-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .version-row {
    grid-template-columns: 1fr 0.5fr 0.7fr;
  }
  .version-row > *:nth-child(n + 4) {
    display: none;
  }
  .tiers {
    grid-template-columns: 1fr;
  }
  .event-row {
    grid-template-columns: 0.8fr 1.5fr 0.6fr;
  }
  .event-row > *:nth-child(3),
  .event-row > *:nth-child(4) {
    display: none;
  }
  .audit-row {
    grid-template-columns: 1fr 1fr 0.6fr;
  }
  .audit-row > *:nth-child(3),
  .audit-row > *:nth-child(4) {
    display: none;
  }
  .welcome h2,
  .section-intro h2 {
    font-size: 1.45rem;
  }
  .chart {
    height: 160px;
  }
}

@media (max-width:760px) {
  .security-grid { grid-template-columns:1fr }
  .role-row { grid-template-columns:34px 1fr .7fr }
  .role-row>span:last-child { display:none }
  .deploy-grid,.finance-grid,.finance-grid.lower { grid-template-columns:1fr }
  .method-picker { grid-template-columns:1fr }
  .flow-steps { grid-template-columns:1fr 1fr }
  .profit-row { grid-template-columns:1.2fr .8fr .6fr }
  .profit-row>*:nth-child(3),.profit-row>*:nth-child(5) { display:none }
  .reconciliation>div { grid-template-columns:1fr 1fr }
}

.live.api-online i{background:var(--mint);box-shadow:0 0 12px var(--mint)}.live.api-offline{color:var(--coral)}.live.api-offline i{background:var(--coral);box-shadow:0 0 12px var(--coral)}

/* Crisp, consistent vector icons for every Studio navigation entry. */
#studio-nav button i{font-size:0;width:20px;height:20px;flex:0 0 20px;background:currentColor;mask:var(--studio-icon) center/contain no-repeat;-webkit-mask:var(--studio-icon) center/contain no-repeat;opacity:.78}#studio-nav button.active i{opacity:1}#studio-nav [data-view="overview"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 13h6V4H4v9Zm0 7h6v-5H4v5Zm10 0h6v-9h-6v9Zm0-16v5h6V4h-6Z'/%3E%3C/svg%3E")}#studio-nav [data-view="catalog"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5v4l-9 5-9-5v-4Z'/%3E%3C/svg%3E")}#studio-nav [data-view="deployment"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2v8h8v4h-8v8H9v-8H1v-4h8V2h4Z'/%3E%3C/svg%3E")}#studio-nav [data-view="math"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17h3V9H3v8Zm5 0h3V5H8v12Zm5 0h3v-6h-3v6Zm5 0h3V2h-3v15ZM2 19h20v3H2v-3Z'/%3E%3C/svg%3E")}#studio-nav [data-view="telemetry"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 13h4l3-9 6 16 3-7h4v-3h-6l-1 3-6-11-2 8H2v3Z'/%3E%3C/svg%3E")}#studio-nav [data-view="billing"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15.5V19h-2v-1.4c-1.7-.3-3-1.4-3.1-3.2h2.2c.1.9.8 1.4 1.9 1.4 1.2 0 1.8-.5 1.8-1.2 0-.8-.7-1.1-2.4-1.5-2-.5-3.2-1.3-3.2-3 0-1.6 1.1-2.7 2.8-3V5h2v1.4c1.6.3 2.7 1.4 2.9 3h-2.1c-.2-.8-.8-1.2-1.8-1.2s-1.6.4-1.6 1.1c0 .7.6 1 2.3 1.4 2.1.5 3.4 1.3 3.4 3.1 0 1.8-1.2 3-3.1 3.3Z'/%3E%3C/svg%3E")}#studio-nav [data-view="financials"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h18v18H3V3Zm4 13h2v2H7v-2Zm0-5h2v3H7v-3Zm4-4h2v11h-2V7Zm4 3h2v8h-2v-8Z'/%3E%3C/svg%3E")}#studio-nav [data-view="integrations"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3h8v5h5v8h-5v5H8v-5H3V8h5V3Zm3 3v5H6v2h5v5h2v-5h5v-2h-5V6h-2Z'/%3E%3C/svg%3E")}#studio-nav [data-view="security"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 8 3v6c0 5.1-3.4 9.7-8 11-4.6-1.3-8-5.9-8-11V5l8-3Zm0 4a4 4 0 0 0-2 7.5V17h4v-3.5A4 4 0 0 0 12 6Z'/%3E%3C/svg%3E")}#studio-nav [data-view="audit"]{--studio-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2Zm8 2v5h4l-4-5Zm-5 9 2 2 4-4 2 2-6 6-4-4 2-2Z'/%3E%3C/svg%3E")}