/* Shared controls entry and theme preview. */
#lontong-controls {
  box-sizing: border-box;
  width: min(94vw, 440px);
  max-height: 90dvh;
  overflow: auto;
  border: 1px solid #cbd9e8;
  border-radius: 24px;
  padding: 24px;
  background: #fff;
  color: var(--brand-ink);
  font:
    15px/1.5 system-ui,
    sans-serif;
  box-shadow: 0 16px 60px #132f4b33;
}
#lontong-controls::backdrop {
  background: #10283c88;
}
#lontong-controls h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 18px 0 12px;
}
#lontong-controls p {
  color: var(--brand-muted);
  margin: 12px 0;
}
#lontong-controls button {
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid #d4e0ed;
  background: #f4f8fd;
  color: var(--brand-action);
}
#lontong-controls button:disabled {
  opacity: 0.55;
  cursor: default;
}
#lontong-controls :focus-visible {
  outline: 3px solid var(--brand-action);
  outline-offset: 3px;
}
.controls-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.controls-nav .controls-close {
  margin-left: auto;
  font-size: 24px;
  border: 0 !important;
  background: none !important;
  padding: 0 10px !important;
}
.controls-card {
  display: block;
  width: 100%;
  text-align: left;
  white-space: pre-line;
  margin: 16px 0;
  padding: 20px !important;
  font-weight: 600 !important;
}
.controls-secondary,
.controls-primary {
  width: 100%;
  margin-top: 16px;
}
.controls-primary {
  background: var(--brand-action) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.controls-link {
  width: 100%;
  background: none !important;
  border: 0 !important;
}
.controls-wallpaper,
.controls-theme-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
}
.controls-theme-tile {
  width: 100%;
  font-weight: 600 !important;
  text-align: left;
  padding: 8px !important;
}
.controls-theme-tile img {
  margin-bottom: 8px;
}
.controls-portraits {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.controls-portraits img {
  width: calc((100% - 16px) / 3);
  height: 84px;
  object-fit: contain;
  border-radius: 12px;
  background: #eef4fc;
}
#lontong-controls fieldset {
  padding: 0;
  border: 0;
  margin: 20px 0 0;
}
#lontong-controls legend {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.controls-scope {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d4e0ed;
  border-radius: 14px;
  margin: 8px 0;
  cursor: pointer;
}
.controls-scope:has(input:checked) {
  border-color: var(--brand-action);
  background: #edf5ff;
}
.controls-scope input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand-action);
}
.controls-scope strong,
.controls-scope small {
  display: block;
}
.controls-scope small {
  color: var(--brand-muted);
}
#lontong-controls .controls-info {
  background: #edf5ff;
  color: var(--brand-ink);
  padding: 14px;
  border-radius: 14px;
}
@media (max-width: 600px) {
  #lontong-controls {
    margin: auto auto 0;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

#lontong-controls .controls-nav {
  position: sticky;
  top: -24px;
  background: #fff;
  z-index: 1;
  padding: 4px 0;
}

/* Personal theme gallery: selection and Apply stay on one screen. */
.controls-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.controls-theme-grid .controls-theme-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
  color: var(--brand-ink) !important;
}
.controls-theme-grid strong {
  font-size: 13px;
  line-height: 1.35;
}
.controls-theme-grid small {
  font-size: 11px;
  line-height: 1.4;
  color: var(--brand-muted);
}
.controls-theme-grid [aria-pressed='true'] {
  border: 2px solid var(--brand-action) !important;
  background: #edf5ff !important;
}
.controls-theme-grid img {
  height: auto;
  min-height: 70px;
  background: #e8eef7;
}
.controls-theme-grid img:not([src]) {
  visibility: hidden;
}
#lontong-controls > .controls-primary {
  position: sticky;
  bottom: -24px;
  box-shadow: 0 -8px 18px #fff;
}

/* Controls landing menu: quiet surfaces, clear hierarchy and aligned line icons. */
#lontong-controls .controls-brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #fff2e5;
  color: #d46a22;
}
.controls-brand-mark svg {
  width: 25px;
  height: 25px;
}
#lontong-controls h2 {
  letter-spacing: -0.6px;
  font-size: 25px;
  font-weight: 700;
  margin: 20px 0 24px;
  color: #172d45;
}
#lontong-controls .controls-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 16px !important;
  margin: 12px 0;
  white-space: normal;
  border: 1px solid #e0e7ef;
  background: #fff;
  color: #172d45;
  font-weight: 400 !important;
  box-shadow: 0 2px 5px #20395304;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
#lontong-controls .controls-action:hover {
  background: #f7faff;
  border-color: #b6cbe4;
}
#lontong-controls .controls-action:active {
  transform: scale(0.985);
}
.controls-action-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.controls-action-icon svg {
  width: 25px;
  height: 25px;
}
.controls-action-icon.theme {
  background: #eaf2ff;
  color: #2869bc;
}
.controls-action-icon.food {
  background: #fff3e9;
  color: #b86e36;
}
.controls-action-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  text-align: left;
}
.controls-action-copy strong {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.controls-action-copy small {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #68788a;
}
.controls-action-arrow {
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  color: #8b9bad;
}
.controls-action-arrow svg {
  width: 20px;
  height: 20px;
}
#lontong-controls > .controls-secondary {
  margin-top: 24px;
  border: 0;
  background: #f2f5f9;
  color: #52677d;
  font-weight: 500;
}
#lontong-controls .controls-close {
  color: #7c8c9d;
  background: #f4f6f9 !important;
  border-radius: 50%;
  min-height: 34px;
  width: 34px;
  height: 34px;
  font-size: 23px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  #lontong-controls .controls-action {
    transition: none;
  }
}

#lontong-controls .controls-action-icon.food {
  background: #f1f4f8;
  color: #61748b;
}
.controls-action-copy .controls-cost {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #f3f5f7;
  color: #7b8794;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1px;
}
#lontong-controls .controls-action:has(.controls-cost) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* One-shot Code Ninja chain: anticipation, impact shake, weighted roll and settle. */
#lontong-controls .controls-logo-stage {
  display: block;
  position: relative;
  width: 170px;
  height: 70px;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.ninja-action-logo {
  position: absolute;
  left: 0;
  top: 8px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform-origin: 50% 78%;
}
.ninja-logo-shadow {
  position: absolute;
  left: 5px;
  top: 61px;
  width: 38px;
  height: 4px;
  border-radius: 50%;
  background: #233145;
  opacity: 0.12;
}
.ninja-impact-ring {
  position: absolute;
  left: -4px;
  top: 4px;
  width: 56px;
  height: 56px;
  border: 2px solid #eab349;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
#lontong-controls[data-ninja-entry] {
  animation: ninja-impact-shake 380ms 680ms linear both;
}
[data-ninja-entry] .ninja-action-logo {
  animation: ninja-logo-chain 2800ms linear both;
}
[data-ninja-entry] .ninja-logo-shadow {
  animation: ninja-weight-shadow 2800ms linear both;
}
[data-ninja-entry] .ninja-impact-ring {
  animation: ninja-pressure-ring 520ms 610ms ease-out both;
}
[data-ninja-entry] .controls-action {
  animation: ninja-actions-reveal 260ms 1000ms ease-out both;
}
@keyframes ninja-logo-chain {
  0% {
    transform: translate(0, 3px) scale(0.86, 1.06) rotate(-8deg);
    opacity: 0;
  }
  8% {
    transform: translate(0, -5px) scale(1.06, 0.96) rotate(5deg);
    opacity: 1;
  }
  18% {
    transform: translate(0, -9px) scale(1.12) rotate(-4deg);
  }
  23% {
    transform: translate(0, -9px) scale(1.12) rotate(-4deg);
  }
  27% {
    transform: translate(0, 6px) scale(1.24, 0.75) rotate(0);
  }
  34% {
    transform: translate(0, -4px) scale(0.95, 1.07) rotate(0);
  }
  39% {
    transform: translate(0, 0) rotate(0);
  }
  48% {
    transform: translate(35px, -2px) rotate(150deg);
  }
  57% {
    transform: translate(84px, 1px) rotate(350deg);
  }
  61% {
    transform: translate(91px, 6px) rotate(360deg) scale(1.15, 0.8);
  }
  68% {
    transform: translate(72px, -27px) rotate(470deg) scale(0.94, 1.06);
  }
  75% {
    transform: translate(42px, 5px) rotate(610deg) scale(1.12, 0.85);
  }
  81% {
    transform: translate(18px, -13px) rotate(690deg);
  }
  87% {
    transform: translate(0, 4px) rotate(720deg) scale(1.09, 0.9);
  }
  93% {
    transform: translate(0, -4px) rotate(720deg) scale(0.98, 1.02);
  }
  100% {
    transform: translate(0, 0) rotate(720deg);
    opacity: 1;
  }
}
@keyframes ninja-impact-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  12% {
    transform: translate(-5px, 2px) rotate(-0.35deg);
  }
  26% {
    transform: translate(5px, -2px) rotate(0.3deg);
  }
  42% {
    transform: translate(-4px, 1px);
  }
  58% {
    transform: translate(3px, -1px);
  }
  74% {
    transform: translate(-2px, 0);
  }
  88% {
    transform: translate(1px, 0);
  }
}
@keyframes ninja-pressure-ring {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
@keyframes ninja-weight-shadow {
  0%,
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 0.12;
  }
  23% {
    transform: scaleX(0.65);
    opacity: 0.07;
  }
  27% {
    transform: scaleX(1.5);
    opacity: 0.2;
  }
  39% {
    transform: scaleX(1);
    opacity: 0.12;
  }
  61% {
    transform: translateX(91px) scaleX(1.4);
    opacity: 0.2;
  }
  68% {
    transform: translateX(72px) scaleX(0.55);
    opacity: 0.06;
  }
  75% {
    transform: translateX(42px) scaleX(1.3);
    opacity: 0.18;
  }
  81% {
    transform: translateX(18px) scaleX(0.7);
    opacity: 0.07;
  }
  87% {
    transform: translateX(0) scaleX(1.2);
    opacity: 0.16;
  }
}
@keyframes ninja-actions-reveal {
  from {
    transform: translateY(5px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #lontong-controls[data-ninja-entry],
  [data-ninja-entry] .ninja-action-logo,
  [data-ninja-entry] .ninja-logo-shadow,
  [data-ninja-entry] .ninja-impact-ring,
  [data-ninja-entry] .controls-action {
    animation: none;
  }
  .ninja-impact-ring {
    display: none;
  }
}

/* Applied appearance is persistent and distinct from a pending selection. */
.controls-theme-grid .controls-theme-tile {
  position: relative;
}
.controls-theme-active {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  color: #147b45;
  font:
    650 11px/1.2 system-ui,
    sans-serif;
  box-shadow: 0 1px 8px #143c2526;
}
.controls-theme-active[hidden] {
  display: none;
}
.controls-theme-grid .controls-theme-tile[data-active='true'] {
  border-color: #23965a !important;
  box-shadow: 0 0 0 1px #23965a inset;
  background: #f3faf6 !important;
}
#lontong-controls > .controls-primary[data-applied='true'] {
  background: #e8f5ed !important;
  color: #147b45 !important;
  opacity: 1;
  cursor: default;
  border-color: transparent;
}
#lontong-controls .controls-theme-feedback.is-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #f0f8f3;
  color: #19633c;
  font-size: 14px;
  font-weight: 500;
}
.controls-theme-feedback.is-success::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #238653;
  color: #fff;
  font-size: 15px;
}

/* Navigation stays light, separate from the filled Apply action. */
#lontong-controls .controls-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  min-height: 44px;
  margin-left: -8px;
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  color: var(--brand-action);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.2px;
  transition:
    background 0.16s,
    transform 0.16s;
}
.controls-back > span:first-child {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.controls-back svg {
  display: block;
  width: 20px;
  height: 20px;
}
@media (hover: hover) {
  #lontong-controls .controls-back:hover {
    background: #f0f5fc;
  }
}
#lontong-controls .controls-back:active {
  background: #eaf2fc;
  transform: translateX(-2px);
}
@media (prefers-reduced-motion: reduce) {
  #lontong-controls .controls-back {
    transition: none;
  }
  #lontong-controls .controls-back:active {
    transform: none;
  }
}

.controls-action-icon.calendar {
  background: #eef1ff;
  color: #6554b8;
}
.controls-action-icon.tournament {
  background: #e9f6fc;
  color: #087daf;
}

.polling-plan{display:grid;gap:12px;text-align:left}
.polling-plan>p{margin:0;color:#526981;font-size:.86rem}
.polling-card{display:grid;gap:10px;padding:14px;background:#f4f7fb;border:1px solid #dce6f1;border-radius:14px}
.polling-card h3,.polling-card p{margin:0}
.polling-card label,.polling-card div p{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0}
.polling-card div p{border-bottom:1px solid #e1e8f0;font-size:.83rem}
.polling-card div p span{text-align:right}
.polling-card select{max-width:55%;font:inherit;color:inherit;background:white;border:1px solid #cbd9e8;border-radius:8px;padding:6px}
.polling-card small{display:block;margin-top:8px;color:#526981}

/* Group related actions as settings rows. */
#lontong-controls .ninja-settings-group { margin: 16px 0 0; }
#lontong-controls .ninja-settings-group h3 {
  margin: 0 0 7px 4px;
  color: var(--ink, #192e44);
  font-size: .9rem;
  font-weight: 700;
}
#lontong-controls .ninja-settings-rows {
  border: 1px solid #dce6ef;
  border-radius: 14px;
  background: var(--surface, #fff);
  overflow: hidden;
}
#lontong-controls .ninja-settings-rows .controls-action {
  width: 100%;
  margin: 0;
  min-height: 58px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#lontong-controls .ninja-settings-rows .controls-action + .controls-action {
  border-top: 1px solid #e4ebf2;
}
#lontong-controls .ninja-settings-rows .controls-action:hover {
  background: #edf5fc;
}
#lontong-controls .ninja-settings-rows .controls-action:focus-visible {
  outline-offset: -3px;
}

#lontong-controls .polling-plan { gap: 10px; }
#lontong-controls .polling-plan > p { font-size: .8rem; line-height: 1.4; }
#lontong-controls .polling-card { gap: 0; padding: 8px 12px; border-radius: 12px; background: #f7f9fc; }
#lontong-controls .polling-card h3 { font-size: .78rem; color: #516981; margin: 4px 0; }
#lontong-controls .polling-card label { min-height: 44px; padding: 4px 0; font-size: .87rem; border-bottom: 1px solid #e0e8f0; }
#lontong-controls .polling-card select { max-width: 57%; min-height: 36px; font-size: .82rem; padding: 4px 6px; }
#lontong-controls .polling-card div p { padding: 5px 0; }
#lontong-controls .polling-card small { margin: 4px 0; font-size: .75rem; }
#lontong-controls .polling-access { margin-top: 7px; }
#lontong-controls .polling-access summary { display: list-item; min-height: 44px; padding: 11px 0; color: #17598c; cursor: pointer; font-weight: 650; }
#lontong-controls .polling-access input { width: 48%; min-height: 36px; border: 1px solid #cbd9e8; border-radius: 8px; }
#lontong-controls .polling-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 6px; }
#lontong-controls .polling-actions button { min-height: 44px; margin: 0; padding: 5px 7px; font-size: .78rem; }
#lontong-controls .polling-card > button { min-height: 44px; margin: 0; padding: 4px 0; text-align: left; font-size: .8rem; }
#lontong-controls .polling-card [role="status"]:empty { display: none; }
#lontong-controls .polling-edition-list details { border-top:1px solid #dce6ef; }
#lontong-controls .polling-edition-list h4 {
  margin: 10px 0 4px; color: #516981; font-size: .78rem;
}
#lontong-controls .polling-edition-list summary,
#lontong-controls .polling-refresh-plan summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 0;
  cursor: pointer; list-style: none; font-size: .85rem;
}
#lontong-controls .polling-card summary::-webkit-details-marker { display: none; }
#lontong-controls .polling-card summary::after {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px 0 auto;
  border: solid #526981; border-width: 0 2px 2px 0; transform: rotate(-45deg);
}
#lontong-controls .polling-card details[open] > summary::after,
#lontong-controls .polling-refresh-plan[open] > summary::after { transform: rotate(45deg); }
#lontong-controls .polling-event-label { flex: 1; min-width: 0; }
#lontong-controls .polling-event-label small { margin: 1px 0 0; }
#lontong-controls .polling-event-status { max-width: 38%; text-align: right; }
#lontong-controls .polling-edition-list .polling-featured {
  padding: 0 10px; border: 1px solid #d4e4f5; border-radius: 10px; background: #eaf3ff;
}
#lontong-controls .polling-featured .polling-event-label strong { font-size: .95rem; }
#lontong-controls .polling-featured .polling-event-label small { color: #17598c; font-weight: 650; }
#lontong-controls .polling-refresh-plan summary { font-weight: 700; color: #516981; }
#lontong-controls .polling-refresh-plan > p { color: #526981; font-size: .75rem; margin: 0 0 5px; }
#lontong-controls .polling-edition-list details > div { padding:0 4px 7px; }


/* Keep the controls landing page compact and consistent across its three groups. */
#lontong-controls[data-controls-page="menu"] h2 {
  margin: 10px 0 20px;
  font-size: 24px;
}
#lontong-controls[data-controls-page="menu"] .ninja-settings-group {
  margin-top: 20px;
}
#lontong-controls[data-controls-page="menu"] .ninja-settings-group:first-of-type {
  margin-top: 0;
}
#lontong-controls[data-controls-page="menu"] .ninja-settings-rows .controls-action {
  min-height: 76px;
  padding: 12px 14px !important;
  gap: 12px;
}
#lontong-controls[data-controls-page="menu"] .controls-action-copy {
  gap: 3px;
}
#lontong-controls[data-controls-page="menu"] .controls-action-arrow {
  flex-basis: 20px;
}

/* M2.4: preserve the compact desktop polling controls. */
@media(max-width:600px){
 #lontong-controls .polling-card select{min-height:44px}
}

#lontong-controls[data-controls-page="match-video"] { width: min(94vw, 720px); }
.match-video-controls .match-video-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
}
#lontong-controls .match-video-metrics button {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
  min-width: 0;
  padding: 8px;
  text-align: left;
  font-size: 12px;
  overflow-wrap: anywhere;
}
#lontong-controls .match-video-metrics button[aria-pressed="true"] {
  border-color: var(--brand-action);
  box-shadow: inset 0 -2px var(--brand-action);
}
.match-video-metrics strong { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.match-video-metric-count { display: block; white-space: nowrap; }
.match-video-metric-total { display: block; margin-top: 3px; font-size: .75rem; font-weight: 500; color: var(--brand-muted); white-space: nowrap; }
.match-video-controls small { display: block; color: var(--brand-muted); }
.match-video-controls h3 { margin: 12px 0 6px; font-size: 1rem; }
.match-video-controls dl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.match-video-controls dl div { min-width: 0; }
.match-video-controls .match-video-runs,
.match-video-controls .match-video-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  font-size: .8rem;
}
.match-video-controls dd { margin: 0; font-weight: 600; }
.match-video-controls dt { color: var(--brand-muted); }
.match-video-controls .match-video-runs,
.match-video-controls .match-video-detail { background: #f4f8fd; border-radius: 8px; padding: 8px; font-size: .8rem; }
#lontong-controls .match-video-controls .match-video-notice { font-size: .8rem; margin: 5px 0; }
.match-video-notice:empty { display: none; }
.match-video-row { border-bottom: 1px solid #d4e0ed; }
.match-video-row summary { min-height: 44px; padding: 8px 4px; overflow-wrap: anywhere; }
.match-video-fixture { display: inline-block; vertical-align: top; }
.match-video-status { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 0 14px; }
.match-video-badge { color: var(--brand-ink); background: #e8f0fb; padding: 2px 5px; border-radius: 5px; font-size: .73rem; }
.match-video-badge:is(.covered, .bestFound, .finalised) { color: #195b40; background: #e2f4e9; }
.match-video-badge:is(.failed, .manualReview, .verificationDue) { color: #922835; background: #fbe8ea; }
.match-video-badge:is(.quota, .replacing) { color: #725009; background: #fff2d3; }
.match-video-detail ol { padding-left: 1.15rem; margin: 0; }
.match-video-detail li + li { margin-top: 4px; }
.match-video-detail time { color: var(--brand-muted); display: inline-block; margin-right: 8px; }
.match-video-controls > button { margin-top: 8px; }
@media (max-width: 430px) {
  #lontong-controls[data-controls-page="match-video"] { padding: 12px; }
  .match-video-controls .match-video-metrics { gap: 4px; }
  #lontong-controls .match-video-metrics button { padding: 6px; }
}

/* Match video coverage: restrained, expandable iPhone-first layout. */
#lontong-controls .match-video-dashboard { display:grid; gap:12px; }
#lontong-controls .match-video-switch { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; background:#e9edf3; border-radius:12px; }
#lontong-controls .match-video-switch button { min-height:38px; padding:7px 8px; border:0; border-radius:9px; background:transparent; color:var(--brand-muted); font-size:13px; font-weight:600; }
#lontong-controls .match-video-switch button[aria-pressed="true"] { background:#fff; color:var(--brand-ink); box-shadow:0 1px 3px #182d4b19; }
.match-video-dashboard-content { display:grid; gap:10px; min-width:0; }
.match-video-dashboard-heading { display:grid; gap:3px; }
.match-video-dashboard-heading strong { font-size:17px; letter-spacing:-.025em; }
.match-video-dashboard-heading small { font-size:12px; }
.match-video-run-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; font-size:11px; color:var(--brand-muted); }
.match-video-section { min-width:0; background:#fff; border:1px solid var(--brand-border); border-radius:14px; padding:0 12px 12px; }
.match-video-section > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0 10px; min-height:60px; cursor:pointer; list-style:none; }
.match-video-section > summary::-webkit-details-marker,.match-video-drill > summary::-webkit-details-marker { display:none; }
.match-video-section-name,.match-video-drill-label { display:grid; min-width:0; gap:3px; }
.match-video-section-name strong { font-size:14px; font-weight:650; }
.match-video-section-name small,.match-video-drill-label small { font-size:11px; color:var(--brand-muted); }
.match-video-section-percent { font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; }
.match-video-track { height:6px; overflow:hidden; border-radius:999px; background:#e7edf5; }
.match-video-fill { display:block; height:100%; border-radius:inherit; background:var(--brand-action); }
.match-video-section-body { margin-top:8px; }
.match-video-drill { border-top:1px solid var(--brand-border); padding:0 2px 9px; }
.match-video-drill > summary { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:48px; cursor:pointer; list-style:none; }
.match-video-drill-label strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.match-video-percent { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
/* Keep coverage figures in one right-aligned column before the disclosure chevron. */
.match-video-section > summary > .match-video-section-name,
.match-video-drill > summary > .match-video-drill-label { flex:1 1 auto; min-width:0; }
.match-video-section > summary > .match-video-section-percent,
.match-video-drill > summary > .match-video-percent { flex:0 0 56px; text-align:right; white-space:nowrap; }
.match-video-section > summary::after,
.match-video-drill > summary::after { flex:0 0 16px; text-align:center; }

.match-video-drill > .match-video-track { height:4px; margin-bottom:7px; }
.match-video-drill-list { padding:2px 0 4px 8px; }
.match-video-drill-match { border-top:1px solid #e9edf3; }
.match-video-drill-match > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 0; cursor:pointer; }
.match-video-drill-match .match-video-badge { flex-shrink:0; max-width:42%; font-size:10px; }
.match-video-drill-info { display:grid!important; grid-template-columns:1fr 1fr; padding:8px; background:#f4f8fd; border-radius:8px; }

.match-video-section > summary::after,.match-video-drill > summary::after { content:'⌄'; color:var(--brand-muted); font-size:17px; line-height:1; margin-left:1px; }
.match-video-section[open] > summary::after,.match-video-drill[open] > summary::after { transform:rotate(180deg); }
.match-video-section > summary:focus-visible,.match-video-drill > summary:focus-visible,.match-video-drill-match > summary:focus-visible { outline:2px solid var(--brand-action); outline-offset:3px; border-radius:5px; }

/* Historical comparisons within the existing match video Diagnostics tab. */
#lontong-controls .match-video-periods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:3px; background:#e9edf3; border-radius:11px; }
#lontong-controls .match-video-periods button { min-height:38px; padding:7px 4px; border:0; border-radius:8px; background:transparent; color:var(--brand-muted); font-size:12px; font-weight:600; }
#lontong-controls .match-video-periods button[aria-pressed="true"] { background:var(--brand-action); color:white; }

.match-video-trend { display:flex; align-items:center; justify-content:center; padding:4px 5px; border-radius:7px; font-size:11px; font-weight:650; text-align:center; font-variant-numeric:tabular-nums; }
.match-video-trend.positive { color:#17613e; background:#e3f5e9; }
.match-video-trend.negative { color:#9a2835; background:#fce9eb; }
.match-video-trend.neutral { color:var(--brand-muted); background:#e9edf3; }
.match-video-runs dd,.match-video-progress dd { font-variant-numeric:tabular-nums; }

/* Shared visual rules for Coverage and Diagnostics; retain existing status colours. */
#lontong-controls[data-controls-page="match-video"] .match-video-controls,
#lontong-controls[data-controls-page="match-video"] .match-video-dashboard {
  min-width:0;
  color:var(--brand-ink);
}
#lontong-controls[data-controls-page="match-video"] .match-video-section > summary,
#lontong-controls[data-controls-page="match-video"] .match-video-drill > summary,
#lontong-controls[data-controls-page="match-video"] .match-video-drill-match > summary {
  box-sizing:border-box;
  width:100%;
  min-width:0;
}
#lontong-controls[data-controls-page="match-video"] .match-video-section-name strong,
#lontong-controls[data-controls-page="match-video"] .match-video-drill-label strong {
  line-height:1.3;
  overflow-wrap:anywhere;
}
#lontong-controls[data-controls-page="match-video"] .match-video-section-name small,
#lontong-controls[data-controls-page="match-video"] .match-video-drill-label small {
  line-height:1.4;
  overflow-wrap:anywhere;
}
#lontong-controls[data-controls-page="match-video"] .match-video-section-percent,
#lontong-controls[data-controls-page="match-video"] .match-video-percent {
  color:var(--brand-ink);
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
#lontong-controls[data-controls-page="match-video"] .match-video-drill-match > summary > .match-video-drill-label {
  flex:1 1 auto;
  min-width:0;
}
#lontong-controls[data-controls-page="match-video"] .match-video-drill-match .match-video-badge {
  box-sizing:border-box;
  text-align:center;
  overflow-wrap:anywhere;
  line-height:1.35;
}
#lontong-controls[data-controls-page="match-video"] .match-video-badge {
  border-radius:5px;
  font-weight:600;
}
#lontong-controls[data-controls-page="match-video"] .match-video-drill-list,
#lontong-controls[data-controls-page="match-video"] .match-video-drill-info {
  min-width:0;
}
@media (max-width:430px) {
  #lontong-controls[data-controls-page="match-video"] .match-video-section { padding-right:10px; padding-left:10px; }
  #lontong-controls[data-controls-page="match-video"] .match-video-section > summary,
  #lontong-controls[data-controls-page="match-video"] .match-video-drill > summary { gap:8px; }
  #lontong-controls[data-controls-page="match-video"] .match-video-drill-list { padding-left:4px; }
}


/* Stable tab viewport: preserve both panels and their independent scroll positions. */
#lontong-controls[data-controls-page="match-video"] .match-video-dashboard {
  display:flex;
  flex-direction:column;
  min-height:0;
}
#lontong-controls[data-controls-page="match-video"] .match-video-switch { flex:0 0 auto; }
#lontong-controls[data-controls-page="match-video"] .match-video-dashboard-viewport {
  min-height:0;
  height:clamp(280px, 58dvh, 680px);
  overflow:hidden;
}
#lontong-controls[data-controls-page="match-video"] .match-video-dashboard-viewport > .match-video-dashboard-content {
  box-sizing:border-box;
  height:100%;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
  animation:match-video-tab-appear 160ms ease-out both;
}
#lontong-controls[data-controls-page="match-video"] .match-video-dashboard-viewport > [hidden] {
  display:none !important;
}
@keyframes match-video-tab-appear {
  from { opacity:.65; }
  to { opacity:1; }
}
@media (prefers-reduced-motion:reduce) {
  #lontong-controls[data-controls-page="match-video"] .match-video-dashboard-viewport > .match-video-dashboard-content { animation:none; }
}

/* Compact two-column wallpaper picker: preserve download and selection semantics. */
#lontong-controls[data-controls-page="themes"] .controls-theme-grid{
  gap:9px;
  margin:10px 0 12px;
  align-items:stretch;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-tile{
  position:relative;
  box-sizing:border-box;
  gap:4px;
  padding:7px!important;
  border-radius:13px;
  min-height:0;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-tile img{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  margin:0 0 3px;
  border-radius:9px;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-grid strong{
  font-size:13px;
  line-height:1.25;
  min-height:2.5em;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-grid small{
  font-size:11px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-grid [data-theme-status]{
  margin-top:auto;
}
#lontong-controls[data-controls-page="themes"] .controls-theme-grid [aria-pressed="true"]{
  border-color:var(--brand-action)!important;
}
@media(max-width:360px){
  #lontong-controls[data-controls-page="themes"] .controls-theme-grid{gap:7px}
  #lontong-controls[data-controls-page="themes"] .controls-theme-tile{padding:6px!important}
}
/* Owner diagnostics remain inside the existing control dialog. */
#lontong-controls .operations-table{width:100%;border-collapse:collapse;font-size:.8rem;table-layout:fixed}
#lontong-controls .operations-table th,#lontong-controls .operations-table td{text-align:left;vertical-align:top;padding:8px 4px;overflow-wrap:anywhere;border-bottom:1px solid #cbd5e1}
#lontong-controls .operations-table pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.7rem;max-height:260px;overflow:auto}
#lontong-controls .operations-table button,#lontong-controls .operational-controls button{min-height:44px;white-space:normal;max-width:100%}