: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/front panel look */
.kp-ext-panel{
  background: var(--kp-panel-bg, #0f172a);
  border: 1px solid var(--kp-panel-border, rgba(148,163,184,.18));
  border-radius: var(--kp-panel-radius, 12px);
  box-shadow: var(--kp-panel-shadow, 0 1px 2px rgba(0,0,0,.2));
  padding: var(--kp-panel-pad, 16px 20px);
  margin: 16px 0;
}
.wrap .kp-ext-panel{
  background: var(--kp-admin-panel-bg, #fff);
  color: var(--kp-admin-text, #111827);
  border-color: var(--kp-admin-border, #e5e7eb);
  box-shadow: none;
}
.kp-ext-panel-hd{
  font-size: var(--kp-panel-title-size, 16px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--kp-panel-title, #e2e8f0);
  margin-bottom: 12px;
}
.wrap .kp-ext-panel-hd{ color: var(--kp-admin-title, #111827); }
.kp-ext-panel-bd{ padding: 0; }
.kp-ext-form label{ margin-right:14px; color: var(--kp-text, #e5e7eb); }
.wrap .kp-ext-form label{ color: var(--kp-admin-text, #111827); }
.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:8px; border:1px solid var(--kp-btn-border, rgba(148,163,184,.25)); background: var(--kp-btn-bg, #111827); color: var(--kp-btn-text, #e5e7eb); }
.wrap .kp-ext-btn{ background: var(--kp-admin-btn-bg, #f9fafb); color: var(--kp-admin-btn-text, #111827); border-color: var(--kp-admin-btn-border, #d1d5db); }
.kp-ext-btn:hover{ filter: brightness(1.06); }
.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:#0b1220; display:flex; align-items:center; justify-content:center; color:#9ca3af; font-weight:600; }
.wrap .kp-ext-tile{ background:#f9fafb; color:#374151; }
.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, .kp-player-tile{ position:relative; }
[data-kp-hilite-border="0"]{ outline:none!important; box-shadow:none!important; }
[data-kp-hilite-glow="0"]::after{ opacity:0!important; }
[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;
}