:root{
  --kp-hilite-eligible:#1E90FF;
  --kp-hilite-ineligible:#FF8C00;
  --kp-hilite-width:3px;
  --kp-hilite-radius:14px;
  --kp-hilite-glow:8px;
  --kp-hilite-dash:5;
  --kp-hilite-sweep-ms:1000ms;
  --kp-hilite-eligible-pattern:solid;
  --kp-hilite-ineligible-pattern:dashed;
}

/* Admin panel visual (subtle) */
.kp-ext-panel{ background:transparent; border:0; box-shadow:none; margin:16px 0; }
.kp-ext-panel-hd{ padding:8px 0; font-weight:700; font-size:18px; }
.kp-ext-panel-bd{ padding:8px 0 14px; }
.kp-ext-form label{ margin-right:14px; }
.kp-ext-row{ display:flex; flex-wrap:wrap; gap:12px; margin:10px 0; align-items:center; }
.kp-ext-adv{ margin-top:6px; }
.kp-ext-actions{ display:flex; gap:12px; align-items:center; margin-top:10px; }
.kp-ext-btn{ padding:8px 14px; border-radius:6px; border:1px solid #d1d5db; background:#f9fafb; cursor:pointer; }
.kp-ext-btn:hover{ background:#f3f4f6; }
.kp-ext-btn-secondary{ background:#fff; }
.kp-ext-status{ font-size:12px; color:#6b7280; }
.kp-ext-status.ok{ color:#059669; }
.kp-ext-status.warn{ color:#b91c1c; }
.kp-ext-preview{ display:flex; gap:12px; align-items:center; margin:10px 0; }
.kp-ext-tile{ position:relative; width:200px; height:64px; border-radius:12px; background:#f9fafb; display:flex; align-items:center; justify-content:center; color:#111827; font-weight:600; }
.kp-ext-tile.kp-eligible-now{ color: var(--kp-hilite-eligible); }
.kp-ext-tile.kp-ineligible-now{ color: var(--kp-hilite-ineligible); }

/* Tile highlight styles on TV */
.kp-tile, .kp-player, .player-tile{ position:relative; }
.kp-tile[data-kp-hilite-border="0"], .kp-player[data-kp-hilite-border="0"], .player-tile[data-kp-hilite-border="0"]{ outline:none!important; box-shadow:none!important; }
.kp-tile[data-kp-hilite-glow="0"]::after, .kp-player[data-kp-hilite-glow="0"]::after, .player-tile[data-kp-hilite-glow="0"]::after{ opacity:0!important; }
.kp-tile[data-kp-hilite-ticks="0"]::before, .kp-player[data-kp-hilite-ticks="0"]::before, .player-tile[data-kp-hilite-ticks="0"]::before{ display:none!important; }

.kp-eligible-now{
  outline: var(--kp-hilite-width) var(--kp-hilite-eligible-pattern) var(--kp-hilite-eligible);
  outline-offset: -2px; border-radius: var(--kp-hilite-radius);
  box-shadow: inset 0 0 0 1px var(--kp-hilite-eligible);
}
.kp-ineligible-now{
  outline: var(--kp-hilite-width) var(--kp-hilite-ineligible-pattern) var(--kp-hilite-ineligible);
  outline-offset: -2px; border-radius: var(--kp-hilite-radius);
  box-shadow: inset 0 0 0 1px var(--kp-hilite-ineligible); opacity: 0.98;
}
.kp-eligible-now::after, .kp-ineligible-now::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius: var(--kp-hilite-radius);
  box-shadow: 0 0 var(--kp-hilite-glow) currentColor; opacity: .0; transition: opacity 220ms ease;
}
.kp-eligible-now[data-kp-hilite-glow="1"]::after{ color:var(--kp-hilite-eligible); opacity:.9; }
.kp-ineligible-now[data-kp-hilite-glow="1"]::after{ color:var(--kp-hilite-ineligible); opacity:.6; }
.kp-eligible-now[data-kp-hilite-ticks="1"]{ color:var(--kp-hilite-eligible); }
.kp-ineligible-now[data-kp-hilite-ticks="1"]{ color:var(--kp-hilite-ineligible); }
.kp-eligible-now[data-kp-hilite-ticks="1"]::before{ content:'✓'; position:absolute; right:6px; top:6px; font-weight:700; font-size:14px; text-shadow: 0 0 3px rgba(0,0,0,.35); }
.kp-ineligible-now[data-kp-hilite-ticks="1"]::before{ content:'✕'; position:absolute; right:6px; top:6px; font-weight:700; font-size:14px; text-shadow: 0 0 3px rgba(0,0,0,.35); }

@keyframes kpHiliteSweep {
  from { background: conic-gradient(var(--kp-hilite-eligible) 0deg, transparent 0deg 360deg); }
  to   { background: conic-gradient(var(--kp-hilite-eligible) 360deg, transparent 360deg); }
}
.kp-hilite-lite-sweep{ position: relative; }
.kp-hilite-lite-sweep::after{
  content:''; position:absolute; inset: -2px; pointer-events:none; border-radius: calc(var(--kp-hilite-radius) + 2px);
  background: conic-gradient(var(--kp-hilite-eligible) 0deg, transparent 0deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--kp-hilite-width) - 2px), #000 calc(100% - var(--kp-hilite-width) - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--kp-hilite-width) - 2px), #000 calc(100% - var(--kp-hilite-width) - 1px));
  animation: kpHiliteSweep var(--kp-hilite-sweep-ms) linear 1; opacity: .9;
}