/*
 * EKIM v0.19 commercial broadcast theme
 * -----------------------------------
 * This file is intentionally loaded after styles.css. It owns only the main
 * prediction workspace, keeping the historical component styles and dialogs
 * stable while the marketplace-facing shell can evolve independently.
 */

:root {
  --v14-bg: #020910;
  --v14-panel: rgba(5, 18, 27, 0.94);
  --v14-panel-soft: rgba(8, 26, 36, 0.82);
  --v14-line: rgba(109, 158, 170, 0.17);
  --v14-line-strong: rgba(118, 178, 190, 0.28);
  --v14-text: #edf4f3;
  --v14-muted: #7f959d;
  --v14-mint: #58e2ab;
  --v14-coral: #ef5d70;
  --v14-gold: #ddb85c;
}

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(35, 104, 119, 0.13), transparent 35%),
    linear-gradient(155deg, #02080e 0%, #06131c 52%, #02080e 100%);
}

body::before {
  opacity: 0.035;
  background-size: 48px 48px;
}

.quick-ledger-import {
  color: #211805;
  border-color: rgba(238, 202, 111, 0.74);
  background: linear-gradient(135deg, #f0d57f, #c29238);
  box-shadow: 0 8px 24px rgba(204, 160, 65, 0.14);
}

.match-workspace-switcher,
.toolbar,
.series-nav,
.draft-grid,
.analysis-dock-tabs {
  user-select: none;
}

.toolbar input,
.toolbar select,
.draft-grid input,
.draft-grid select {
  user-select: text;
}

.card {
  border-color: var(--v14-line);
  background: linear-gradient(155deg, rgba(7, 24, 34, 0.92), rgba(3, 12, 19, 0.96));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

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

.topbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(111, 153, 164, 0.14);
  border-radius: 11px;
  color: #778b92;
  background: rgba(255, 255, 255, 0.018);
}

.topbar-actions button:hover {
  color: #dfe9e7;
  border-color: rgba(88, 226, 171, 0.3);
  background: rgba(88, 226, 171, 0.06);
}

.topbar-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#top-account {
  width: 34px;
  padding: 0;
  border-radius: 50%;
}

#top-account span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #d8e4e1;
  background: #11202b;
  font-size: 10px;
  font-weight: 800;
}

.kalshi-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  padding: 0;
  border: 1px solid rgba(83, 205, 213, .22);
  border-radius: 30px;
  background: #04131c;
  color: #eef6fb;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .65);
}
.kalshi-dialog::backdrop { background: rgba(0, 5, 10, .78); backdrop-filter: blur(12px); }
.kalshi-dialog > form { padding: 28px; overflow: auto; max-height: calc(100vh - 36px); }
.kalshi-warning { padding: 14px 18px; margin-bottom: 16px; border-radius: 16px; color: #ffd36b; background: rgba(218, 169, 58, .1); border: 1px solid rgba(218, 169, 58, .3); }
.kalshi-signal-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.kalshi-signal-card > div { min-width: 0; padding: 18px; border-radius: 20px; background: linear-gradient(145deg, rgba(17, 45, 56, .72), rgba(4, 18, 27, .88)); border: 1px solid rgba(71, 178, 192, .16); }
.kalshi-signal-card span, .kalshi-signal-card small { display: block; color: #7f9baa; font-size: 12px; }
.kalshi-signal-card strong { display: block; margin: 7px 0 4px; color: #f3d16e; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalshi-settings, .kalshi-market-panel { margin-top: 14px; padding: 18px; border: 1px solid rgba(71, 178, 192, .16); border-radius: 22px; background: rgba(2, 13, 21, .6); }
.kalshi-settings summary { cursor: pointer; color: #b6cad4; font-weight: 700; }
.kalshi-settings-grid { display: grid; grid-template-columns: 180px 1fr; gap: 12px; margin-top: 16px; }
.kalshi-settings-grid label, .kalshi-risk-grid label, .kalshi-market-search label, .kalshi-selected-market label { display: grid; gap: 7px; color: #7894a4; font-size: 12px; }
.kalshi-settings-grid input, .kalshi-settings-grid select, .kalshi-settings-grid textarea, .kalshi-risk-grid input, .kalshi-market-search input, .kalshi-selected-market select { width: 100%; box-sizing: border-box; border: 1px solid #245064; border-radius: 14px; padding: 12px 14px; background: #03111b; color: #eef6fb; }
.kalshi-private-key { grid-column: 1 / -1; }
.kalshi-private-key textarea { min-height: 92px; resize: vertical; font-family: ui-monospace, monospace; font-size: 11px; }
.kalshi-actions, .kalshi-order-actions { display: flex; gap: 10px; margin-top: 12px; }
.kalshi-market-search { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.kalshi-market-scopes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; padding: 5px; border-radius: 18px; background: rgba(255,255,255,.035); }
.kalshi-market-scopes button { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 14px; color: #7f99a6; background: transparent; box-shadow: none; }
.kalshi-market-scopes button:hover { transform: none; color: #dce9ec; }
.kalshi-market-scopes button.active { color: #05150f; background: linear-gradient(135deg, #65edbd, #3fcf9e); box-shadow: 0 8px 24px rgba(63,207,158,.18); }
.kalshi-market-results { display: grid; gap: 8px; margin-top: 12px; max-height: 220px; overflow: auto; }
.kalshi-market-results > button { display: grid; gap: 5px; padding: 13px 16px; text-align: left; border-radius: 15px; background: rgba(7, 29, 40, .85); border: 1px solid rgba(65, 150, 170, .2); color: #eaf4f8; }
.kalshi-market-results > button.selected { border-color: #58e2b1; box-shadow: inset 0 0 0 1px rgba(88, 226, 177, .35); }
.kalshi-market-results small { color: #7694a3; }
.kalshi-model-pricing { margin-top: 14px; padding: 18px; border: 1px solid rgba(71,178,192,.16); border-radius: 22px; background: rgba(2,13,21,.6); }
.kalshi-pricing-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.kalshi-pricing-head h3 { margin: 4px 0 0; font-size: 18px; }
.kalshi-pricing-head > small { color: #7894a4; text-align: right; }
.kalshi-pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.kalshi-pricing-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 13px; padding: 17px; border-radius: 18px; border: 1px solid rgba(80,164,181,.17); background: linear-gradient(145deg, rgba(13,38,49,.82), rgba(4,17,26,.94)); }
.kalshi-pricing-card.bp { border-color: rgba(217,177,72,.23); }
.kalshi-pricing-card header { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kalshi-pricing-card header span { color: #819ba7; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.kalshi-pricing-card header strong { color: #edf7f7; }
.kalshi-pricing-card .pricing-probability span,.kalshi-pricing-card .pricing-limit span { display: block; color: #78939f; font-size: 10px; }
.kalshi-pricing-card .pricing-probability b { display: block; margin-top: 4px; color: #62e6b1; font-size: 30px; line-height: 1; }
.kalshi-pricing-card.bp .pricing-probability b { color: #ebc665; }
.kalshi-pricing-card .pricing-limit { text-align: right; }
.kalshi-pricing-card .pricing-limit b { display: block; margin-top: 4px; color: #f5f7f8; font-size: 26px; line-height: 1; }
.kalshi-pricing-card footer { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; padding-top: 11px; border-top: 1px solid rgba(102,150,162,.12); color: #78939f; font-size: 11px; }
.kalshi-pricing-card footer .positive { color: #61e4ad; }
.kalshi-pricing-card footer .negative { color: #ff7188; }
.kalshi-settlement-note { display: block; margin-top: 10px; color: #6f8c99; text-align: right; }
.kalshi-selected-market { margin-top: 14px; padding: 15px; border-radius: 17px; background: rgba(74, 214, 178, .06); border: 1px solid rgba(74, 214, 178, .18); }
.kalshi-selected-market > strong, .kalshi-selected-market > small { display: block; }
.kalshi-selected-market > small { color: #7894a4; margin-top: 4px; }
.kalshi-outcome-mapping { margin-top: 12px; color: #7894a4; font-size: 12px; }
.kalshi-outcome-mapping summary { cursor: pointer; }
.kalshi-outcome-mapping > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kalshi-buy-ticket { margin-top: 14px; padding: 18px; border: 1px solid rgba(71,178,192,.18); border-radius: 22px; background: linear-gradient(145deg,rgba(8,31,41,.94),rgba(3,16,24,.98)); }
.kalshi-buy-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.kalshi-buy-ticket-head h3 { margin: 3px 0 0; font-size: 24px; }
.kalshi-risk-grid { display: grid; grid-template-columns: 1fr 1fr minmax(180px,.65fr); gap: 10px; margin-top: 14px; }
.kalshi-paper-toggle { display: flex !important; flex-direction: row; align-items: center; justify-content: center; border-radius: 16px; background: rgba(83, 221, 179, .08); border: 1px solid rgba(83, 221, 179, .2); }
.kalshi-paper-toggle input { width: auto; }
.kalshi-buy-ticket-head .kalshi-paper-toggle { min-height: 42px; padding: 0 16px; }
.kalshi-recommendation { grid-column: 1/-1; display: grid; gap: 4px; padding: 12px 14px; border-radius: 13px; background: rgba(78,226,178,.08); color: #8ba4ae; font-size: 12px; }
.kalshi-recommendation strong { color: #66e5b2; font-size: 15px; }
.kalshi-order-preview { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px 18px; align-items: center; margin-top: 14px; padding: 17px 19px; border-radius: 18px; background: #061721; border: 1px solid #183a49; color: #91a9b5; }
.kalshi-order-preview.allowed { border-color: rgba(82, 226, 176, .45); background: rgba(36, 151, 116, .09); }
.kalshi-order-preview.blocked { border-color: rgba(240, 95, 110, .35); background: rgba(150, 32, 52, .08); }
.kalshi-order-preview strong { color: #edf6fa; }
.kalshi-order-preview small { grid-column: 1 / -1; color: #7894a4; }
.kalshi-order-actions { justify-content: flex-end; }

@media (max-width: 820px) {
  .kalshi-signal-card, .kalshi-risk-grid { grid-template-columns: 1fr 1fr; }
  .kalshi-pricing-cards { grid-template-columns: 1fr; }
  .kalshi-settings-grid, .kalshi-market-search { grid-template-columns: 1fr; }
  .kalshi-order-preview { grid-template-columns: 1fr; }
  .kalshi-order-preview small { grid-column: auto; }
}

/* The macOS hidden title bar places traffic lights inside the web surface. */
body.desktop-shell .app-topbar {
  padding-left: 76px !important;
}

@media (min-width: 1180px) {
  main {
    max-width: 1720px;
  }

  body > header {
    width: 100%;
    max-width: none;
    min-height: 54px;
    height: 54px;
    padding: 6px 18px;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    border-bottom: 1px solid rgba(111, 153, 164, 0.1);
    background: rgba(2, 9, 15, 0.82);
    backdrop-filter: blur(24px);
  }

  body > header .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
  }

  body > header .brand img {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 6px 14px rgba(76, 224, 170, 0.12));
  }

  body > header .brand h1 {
    color: var(--v14-text);
    font-size: 17px;
    letter-spacing: 0.11em;
  }

  body > header .brand h1 span {
    margin-left: 6px;
    color: var(--v14-gold);
    font-size: 8px;
  }

  .app-topbar .topbar-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .app-topbar .topbar-actions span {
    font-size: 10px;
  }

  main {
    height: calc(100vh - 54px);
    padding: 6px 24px 64px;
  }

  /* Match workspaces become compact application tabs. */
  .match-workspace-switcher {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    justify-content: flex-start;
    margin: 0 0 0 4px;
    padding: 2px 0 2px 16px;
    border: 0;
    border-left: 1px solid rgba(107, 149, 160, 0.12);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .match-workspace-switcher > div:first-child {
    display: none;
  }

  #match-workspace-tabs {
    grid-template-columns: repeat(2, minmax(170px, 250px));
    width: auto;
    gap: 6px;
  }

  .match-workspace-tab {
    min-height: 34px;
    height: 34px;
    padding: 4px 10px;
    border-color: rgba(104, 145, 157, 0.13);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
  }

  .match-workspace-tab span {
    padding: 3px 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
  }

  .match-workspace-tab.active {
    border-color: rgba(221, 184, 92, 0.46);
    background: rgba(221, 184, 92, 0.07);
    box-shadow: inset 0 -2px 0 var(--v14-gold);
  }

  .match-workspace-tab.active::after {
    display: none;
  }

  .match-workspace-tab b {
    font-size: 11px;
  }

  .match-workspace-tab small {
    font-size: 8px;
  }

  /* Essential actions remain visible; advanced tools expand on demand. */
  .toolbar {
    display: flex;
    min-height: 54px;
    height: auto;
    max-height: none;
    gap: 8px;
    margin: 6px 0 0;
    padding: 7px 9px;
    overflow: visible;
    flex-wrap: wrap;
    align-items: flex-end;
    border: 0;
    border-radius: 20px;
    background: rgba(5, 17, 25, 0.56);
    box-shadow: none;
  }

  .toolbar label {
    flex: 0 0 auto;
    height: 40px;
    gap: 2px;
    color: #667d86;
    font-size: 8px;
  }

  .toolbar label:nth-of-type(1) { width: 126px; }
  .toolbar label:nth-of-type(2) { width: 96px; }
  .toolbar label:nth-of-type(3) { width: 138px; }
  .toolbar label:nth-of-type(4) { width: 82px; }
  .toolbar label:nth-of-type(5) { width: 128px; }

  .toolbar select,
  .toolbar input,
  .toolbar button {
    min-height: 34px;
    height: 34px;
    border-color: rgba(101, 147, 159, 0.18);
    border-radius: 999px;
    background: rgba(2, 11, 18, 0.72);
    color: #afbec2;
    font-size: 11px;
    box-shadow: none;
  }

  .toolbar button {
    flex: 0 0 auto;
    min-width: max-content;
    padding-inline: 16px;
  }

  .toolbar button:hover {
    border-color: rgba(89, 224, 174, 0.42);
    color: #e7f3ef;
  }

  .toolbar > button {
    display: none;
  }

  .toolbar #save-match,
  .toolbar #quick-ledger-import,
  .toolbar #lolesports-import,
  .toolbar #swap,
  .toolbar #reset-current-bp,
  .toolbar #mobile-tools-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .toolbar #save-match {
    color: #062016;
    border-color: transparent;
    background: var(--v14-mint);
  }

  .toolbar #reset-current-bp {
    color: #d88b96;
  }

  .toolbar #mobile-tools-toggle {
    color: var(--v14-gold);
  }

  body.mobile-tools-open .toolbar {
    height: auto;
    max-height: none;
    overflow: visible;
    flex-wrap: wrap;
  }

  body.mobile-tools-open .toolbar > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Fearless draft navigation mirrors a restrained segmented control. */
  .series-nav {
    position: relative;
    min-height: 48px;
    height: 48px;
    justify-content: center;
    margin: 6px 0 0;
    padding: 5px 12px;
    border-radius: 22px;
    background: rgba(3, 13, 20, 0.62);
    box-shadow: none;
  }

  .series-nav > div:first-child {
    display: none;
  }

  .series-nav > div:nth-child(2) {
    gap: 0;
    padding: 3px;
    border: 1px solid rgba(101, 146, 157, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
  }

  .game-tab {
    min-width: 92px;
    min-height: 34px;
    height: 34px;
    padding: 5px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #758a92;
    box-shadow: none;
  }

  .game-tab.active {
    color: #10120d;
    background: linear-gradient(135deg, #efd273, #b98530);
    box-shadow: 0 9px 24px rgba(202, 160, 61, 0.17);
  }

  .game-tab.complete:not(.active) {
    color: #75caa8;
    box-shadow: inset 0 0 0 1px rgba(88, 226, 171, 0.3);
  }

  .series-nav > span {
    position: absolute;
    right: 18px;
    color: #61767e;
    font-size: 10px;
  }

  /* Main broadcast desk. */
  .draft-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.86fr) minmax(0, 1.2fr);
    flex: 1 1 auto;
    min-height: 0;
    gap: 18px;
    margin-top: 8px;
    overflow: hidden;
  }

  .draft-grid > .team,
  .draft-grid > .center {
    min-height: 0;
    height: 100%;
    border-radius: 28px;
    border-color: var(--v14-line);
    background: var(--v14-panel);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.21);
  }

  .draft-grid > .team.blue {
    border-top-color: rgba(74, 147, 220, 0.46);
  }

  .draft-grid > .team.red {
    border-top-color: rgba(223, 79, 101, 0.48);
  }

  .team-head {
    min-height: 58px;
    height: 58px;
    padding: 8px 14px;
    border-bottom-color: rgba(105, 150, 160, 0.1);
    border-radius: 27px 27px 0 0;
    background: transparent;
  }

  .team-head > div {
    display: grid;
    flex: 1;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 0 9px;
    min-width: 0;
  }

  .team-side-label {
    grid-column: 2;
    grid-row: 1;
    color: #60747c;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.14em;
  }

  .team-head-emblem {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
  }

  .team-head-emblem .team-badge {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .team-head h2 {
    display: none;
  }

  .team-head h2::after {
    display: none;
  }

  .team-head select {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 29px;
    height: 29px;
    margin: 0;
    padding: 0 30px 0 2px;
    border: 0;
    background: transparent;
    color: var(--v14-text);
    font-size: 16px;
    font-weight: 800;
  }

  body.pure-bp .team-head select {
    display: none;
  }

  .team-head > b {
    flex: 0 0 74px;
    width: 74px;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
  }

  .blue .team-head > b {
    color: #65aef1;
    text-align: right;
  }

  .red .team-head > b {
    color: var(--v14-coral);
    text-align: left;
  }

  .draft-grid > .team > [id$="-slots"] {
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    flex: 1 1 auto;
    min-height: 0;
    gap: 7px;
    padding: 8px 10px;
  }

  /* Full-width cinematic Pick card with controls embedded into the artwork. */
  .slot.broadcast-slot,
  .red .slot.broadcast-slot,
  body.pure-bp .slot.broadcast-slot,
  body.pure-bp .red .slot.broadcast-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 72px;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    isolation: isolate;
    border: 1px solid rgba(99, 143, 154, 0.14);
    border-radius: 15px;
    background: #050e16;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transform: none;
  }

  .slot.broadcast-slot:hover {
    border-color: rgba(90, 222, 177, 0.32);
    background: #07131c;
    transform: none;
  }

  .broadcast-slot .slot-art,
  .red .broadcast-slot .slot-art {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background:
      radial-gradient(circle at 28% 30%, rgba(54, 100, 112, 0.3), transparent 38%),
      #06131d;
  }

  .broadcast-slot .champ-splash,
  .red .broadcast-slot .champ-splash {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
    object-position: var(--splash-x, 58%) var(--splash-y, 24%);
    transform: scale(1);
    filter: saturate(0.94) contrast(1.04) brightness(0.9);
  }

  .broadcast-slot.waiting-pick .champ-splash,
  .broadcast-slot.waiting-pick .champ-portrait {
    display: none !important;
  }

  .broadcast-slot .champ-portrait,
  .red .broadcast-slot .champ-portrait {
    z-index: 0;
    inset: 0 0 0 auto;
    width: 48%;
    height: 100%;
    border: 0;
    border-radius: 0 14px 14px 0;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: saturate(0.92) contrast(1.04) brightness(0.72);
    mask-image: none;
    box-shadow: none;
    opacity: 0.76;
  }

  .broadcast-slot.has-splash:not(.splash-failed) .champ-portrait {
    opacity: 0;
  }

  .broadcast-slot .slot-art::after,
  .red .broadcast-slot .slot-art::after {
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(2, 9, 15, 0.98) 0%, rgba(2, 9, 15, 0.94) 31%, rgba(2, 9, 15, 0.58) 54%, rgba(2, 9, 15, 0.06) 86%),
      linear-gradient(0deg, rgba(2, 9, 15, 0.2), transparent 78%);
  }

  .red .broadcast-slot .slot-art::after {
    background:
      linear-gradient(to left, rgba(12, 6, 11, 0.98) 0%, rgba(12, 6, 11, 0.94) 31%, rgba(18, 7, 13, 0.58) 54%, rgba(25, 8, 14, 0.06) 86%),
      linear-gradient(0deg, rgba(14, 6, 10, 0.2), transparent 78%);
  }

  .broadcast-slot .broadcast-role,
  .red .broadcast-slot .broadcast-role {
    z-index: 4;
    top: 8px;
    bottom: auto;
    left: 49px;
    color: #7f959d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .red .broadcast-slot .broadcast-role {
    right: auto;
    left: 49px;
  }

  .broadcast-slot .slot-art > strong {
    display: none;
  }

  .broadcast-slot .slot-controls,
  .red .broadcast-slot .slot-controls {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-self: start;
    width: min(58%, 340px);
    min-width: 205px;
    gap: 0;
    padding: 23px 8px 6px 49px;
    background: transparent;
  }

  .red .broadcast-slot .slot-controls {
    padding: 23px 8px 6px 49px;
  }

  .slot-player-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .broadcast-slot .player-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 4px;
    transform: translateY(-34%);
    border-color: transparent;
    color: #53d2b4;
    background: rgba(83, 210, 180, 0.08);
    box-shadow: none;
  }

  .red .broadcast-slot .player-icon {
    color: #ef6679;
    background: rgba(239, 102, 121, 0.08);
  }

  .broadcast-slot .role-glyph {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .broadcast-slot .player-select,
  .broadcast-slot .champion-search {
    min-height: 23px;
    height: 23px;
    padding: 0 24px 0 0;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .broadcast-slot .player-select {
    color: #edf4f2;
    font-size: 14px;
    font-weight: 800;
  }

  .broadcast-slot .champion-search {
    color: #899ba1;
    font-size: 10px;
  }

  .broadcast-slot .player-select:hover,
  .broadcast-slot .champion-search:hover,
  .broadcast-slot .player-select:focus,
  .broadcast-slot .champion-search:focus {
    padding-left: 7px;
    border-color: rgba(89, 224, 174, 0.28);
    background: rgba(2, 12, 19, 0.78);
  }

  body.pure-bp .broadcast-slot .slot-controls {
    display: grid;
    align-content: center;
    width: min(58%, 340px);
    padding: 24px 8px 7px 49px;
  }

  body.pure-bp .red .broadcast-slot .slot-controls {
    padding: 24px 8px 7px 49px;
  }

  .broadcast-slot .signature-star {
    right: 3px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    font-size: 11px;
  }

  .broadcast-slot .champion-suggestions {
    min-width: 320px;
    border-color: rgba(108, 167, 179, 0.32);
    border-radius: 16px;
    background: rgba(3, 13, 21, 0.98);
    backdrop-filter: blur(24px);
  }

  .bans {
    min-height: 45px;
    margin: 0 10px 10px;
    padding: 5px 0 0;
    border-top-color: rgba(105, 150, 160, 0.1);
  }

  .bans::before {
    font-size: 8px;
  }

  .ban-search {
    min-height: 27px;
    height: 27px;
    border-color: rgba(99, 143, 154, 0.14);
    border-radius: 999px;
    background: rgba(2, 11, 18, 0.55);
    font-size: 8px;
  }

  /* Prediction summary is deliberately calmer than the draft cards. */
  .draft-grid > .center {
    justify-content: flex-start;
    padding: 18px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .single-game-prob {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .game-matchup {
    grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr);
    gap: 10px;
    margin: 0 0 24px;
    padding: 2px 0 17px;
    border-bottom-color: rgba(108, 151, 160, 0.12);
  }

  .team-badge {
    width: 42px;
    height: 42px;
    border-color: rgba(89, 224, 174, 0.34);
    border-radius: 14px;
    box-shadow: none;
  }

  .team-badge.red {
    border-color: rgba(239, 93, 112, 0.34);
  }

  .game-matchup small {
    color: #617880;
    font-size: 8px;
  }

  .game-matchup > div b {
    color: #e8efef;
    font-size: 12px;
  }

  .game-matchup > em b {
    font-size: 16px;
  }

  .prob-heading {
    justify-content: center;
  }

  .prob-heading > span {
    color: #85999f;
    font-size: 12px;
  }

  .prob-heading small {
    display: none;
  }

  .prob strong {
    margin: 19px 4px 15px;
    font-size: 40px;
    letter-spacing: -0.04em;
  }

  .prob em:first-child {
    color: var(--v14-mint);
  }

  .prob em:last-child {
    color: var(--v14-coral);
  }

  .bar {
    height: 8px;
    background: var(--v14-coral);
    box-shadow: none;
  }

  .bar i {
    background: var(--v14-mint);
    box-shadow: none;
  }

  .prob-side-labels {
    color: #657b83;
    font-size: 9px;
  }

  .verdict {
    padding: 26px 5px 22px;
  }

  .verdict strong {
    color: #e7efed;
    font-size: 17px;
  }

  .verdict span {
    color: #667d85;
    font-size: 10px;
  }

  .synergy-alerts {
    gap: 8px;
    max-height: 155px;
    margin: 0 0 12px;
    overflow: auto;
    scrollbar-width: thin;
  }

  .synergy-chip {
    padding: 12px;
    border-color: rgba(89, 224, 174, 0.22);
    border-radius: 18px;
    background: rgba(29, 83, 69, 0.12);
    color: #b7c9c6;
    box-shadow: none;
  }

  .synergy-chip img {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }

  .synergy-chip b {
    font-size: 10px;
  }

  .synergy-chip i,
  .synergy-chip span,
  .synergy-chip small {
    font-size: 8px;
  }

  .synergy-scope-grid {
    overflow-x: auto;
  }

  .counter-alerts {
    max-height: 150px;
    overflow: auto;
    scrollbar-width: thin;
  }

  .counter-alert {
    border-color: rgba(239, 93, 112, 0.18);
    border-radius: 15px;
    background: rgba(38, 15, 22, 0.24);
  }

  .warning {
    margin-top: auto;
    padding: 10px 12px;
    border-color: rgba(198, 161, 77, 0.15);
    border-radius: 14px;
    background: rgba(44, 34, 12, 0.18);
    color: #8f815f;
    font-size: 9px;
  }

  /* The global tab keeps the richer series components. */
  body.series-overview #prediction-center {
    min-height: 0;
    padding: 26px;
  }

  body.series-overview .series-prob {
    border-radius: 24px;
  }

  /* Floating analysis switcher from the concept render. */
  .analysis-dock-tabs {
    width: min(520px, calc(100vw - 36px));
    margin: 8px auto 0;
    padding: 5px;
    border-color: rgba(113, 159, 169, 0.22);
    border-radius: 999px;
    background: rgba(5, 17, 25, 0.9);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px);
  }

  .analysis-dock-tabs button {
    min-width: 0;
    min-height: 34px;
    flex: 1;
    padding: 6px 18px;
    border: 0;
    color: #899da3;
    background: transparent;
  }

  .analysis-dock-tabs button.active {
    color: #0a1712;
    background: var(--v14-mint);
    box-shadow: 0 8px 25px rgba(69, 222, 164, 0.18);
  }

  .analysis-dock-panel.active {
    border-radius: 30px;
  }
}

/* v0.19 primary BP / live workspace switch */
.app-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(103, 153, 165, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.app-mode-switch button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  color: #7f959d;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}

.app-mode-switch button.active {
  color: #effaf7;
  background: linear-gradient(145deg, rgba(31, 111, 108, 0.7), rgba(12, 55, 65, 0.92));
  box-shadow: 0 8px 22px rgba(38, 216, 186, 0.1), inset 0 0 0 1px rgba(86, 231, 190, 0.3);
}

.app-mode-switch #app-mode-live i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ef5d70;
  box-shadow: 0 0 10px rgba(239, 93, 112, 0.75);
}

@media (max-width: 1179px) {
  .app-mode-switch {
    order: 2;
    margin-left: auto;
  }
  .app-topbar .topbar-actions { order: 2; margin-left: 0; }
}

@media (max-width: 720px) {
  .app-mode-switch button { padding: 0 10px; font-size: 10px; }
  .app-topbar .topbar-actions { display: none; }
}

/* Quick result entry reuses the encrypted ledger without showing analytics. */
.ledger-dialog.quick-entry {
  width: min(1040px, calc(100vw - 28px));
}

.ledger-dialog.quick-entry .ledger-portfolio,
.ledger-dialog.quick-entry .ledger-history {
  display: none;
}

.ledger-dialog.quick-entry .ledger-entry {
  margin-top: 0;
}

.ledger-dialog.quick-entry #ledger-import-current {
  display: none;
}

.ledger-dialog.quick-entry #ledger-auth-message:not(:empty) {
  padding: 13px 16px;
  border: 1px solid rgba(221, 184, 92, 0.28);
  border-radius: 16px;
  background: rgba(79, 57, 12, 0.18);
  text-align: center;
}

@media (max-width: 720px) {
  body > header.app-topbar {
    padding: 9px 12px;
  }

  .app-topbar .brand img {
    width: 30px;
    height: 30px;
  }

  .app-topbar .brand h1 {
    font-size: 17px;
  }

  .app-topbar .topbar-actions button {
    min-height: 32px;
  }

  .app-topbar .topbar-actions button > span:not(:only-child) {
    display: none;
  }

  #quick-ledger-import {
    grid-column: 1 / -1;
  }

  #prediction-ledger {
    display: none;
  }

  body.mobile-tools-open #prediction-ledger {
    display: block;
  }
}

@media (max-width: 1179px) {
  body > header.app-topbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
    background: rgba(2, 9, 15, 0.9);
    border-bottom: 1px solid rgba(111, 153, 164, 0.12);
  }

  .app-topbar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .app-topbar .brand img {
    width: 32px;
    height: 32px;
  }

  .app-topbar .brand h1 {
    font-size: 18px;
  }

  .app-topbar .brand h1 span {
    margin-left: 6px;
    color: var(--v14-gold);
    font-size: 8px;
  }

  .app-topbar .topbar-actions {
    margin-left: auto;
  }

  .app-topbar .match-workspace-switcher {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-topbar .match-workspace-switcher > div:first-child {
    display: none;
  }

  .app-topbar #match-workspace-tabs {
    width: 100%;
  }
}

/* Keep the new product language on tablets without changing mobile behavior. */
@media (min-width: 721px) and (max-width: 1179px) {
  body > header,
  main {
    max-width: 1040px;
  }

  .match-workspace-switcher,
  .toolbar,
  .series-nav,
  .draft-grid > .team,
  .draft-grid > .center {
    border-radius: 26px;
  }
}

/* Red-side broadcast cards mirror the blue side on desktop. */
@media (min-width: 1180px) {
  .red .team-head {
    flex-direction: row-reverse;
  }

  .red .team-head > div {
    grid-template-columns: minmax(0, 1fr) 36px;
    flex: 1;
    text-align: right;
  }

  .red .team-side-label {
    grid-column: 1;
    text-align: right;
  }

  .red .team-head-emblem {
    grid-column: 2;
  }

  .red .team-head select {
    grid-column: 1;
    padding: 0 2px 0 30px;
    direction: rtl;
    text-align: right;
  }

  .red .broadcast-slot .champ-splash {
    object-position: var(--splash-x, 58%) var(--splash-y, 24%);
  }

  .red .broadcast-slot .champ-portrait {
    inset: 0 auto 0 0;
    border-radius: 14px 0 0 14px;
    object-position: center;
  }

  .red .broadcast-slot .slot-art::after {
    background:
      linear-gradient(to left, rgba(12, 6, 11, 0.98) 0%, rgba(12, 6, 11, 0.94) 31%, rgba(18, 7, 13, 0.58) 54%, rgba(25, 8, 14, 0.06) 86%),
      linear-gradient(0deg, rgba(14, 6, 10, 0.2), transparent 78%);
  }

  .red .broadcast-slot .broadcast-role {
    right: 49px;
    left: auto;
    text-align: right;
  }

  .red .broadcast-slot .slot-controls,
  body.pure-bp .red .broadcast-slot .slot-controls {
    justify-self: end;
    padding: 23px 49px 6px 8px;
    text-align: right;
  }

  body.pure-bp .red .broadcast-slot .slot-controls {
    padding-top: 24px;
    padding-bottom: 7px;
  }

  .red .broadcast-slot .player-icon {
    right: 11px;
    left: auto;
  }

  .red .broadcast-slot .player-select,
  .red .broadcast-slot .champion-search {
    padding-right: 0;
    padding-left: 24px;
    direction: rtl;
    text-align: right;
  }

  .red .broadcast-slot .player-select:hover,
  .red .broadcast-slot .champion-search:hover,
  .red .broadcast-slot .player-select:focus,
  .red .broadcast-slot .champion-search:focus {
    padding-right: 7px;
    padding-left: 24px;
  }

  .red .broadcast-slot .signature-star {
    right: auto;
    left: 3px;
  }

  .red .broadcast-slot .champion-suggestions {
    right: 0;
    left: auto;
    direction: ltr;
    text-align: left;
  }
}