.anytv-platform-panel {
  display: grid;
  align-content: start;
  min-inline-size: 0;
  gap: 9px;
  padding: clamp(10px, 1.6vw, 16px);
  border: 1px solid #343d52;
  border-radius: 17px;
  background: radial-gradient(ellipse at 100% 0, #2d253844, transparent 46%), #151b29;
  box-shadow: inset 0 1px #d5def609, 0 6px 18px #070a132b;
}
.anytv-platform-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px 11px;
  min-inline-size: 0;
}
.anytv-platform-panel-head > div { min-inline-size: 0; }
.anytv-platform-panel-head h2 { color: #f1f3fa; font-size: clamp(.94rem, 2.5vw, 1.14rem); }
.anytv-platform-panel-head p { margin-block-start: 2px; color: #aeb9d0; font-size: .73rem; line-height: 1.35; }
.anytv-platform-loading { color: #c4cdea; font-size: .72rem; }
.anytv-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-inline-size: 0; }
.anytv-platform-tile {
  --platform-edge: #414d6c;
  --platform-accent: #b8caff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 12px;
  grid-template-areas: "logo copy arrow" "count count count";
  align-items: center;
  gap: 4px 6px;
  min-inline-size: 0;
  min-block-size: 71px;
  padding: 7px;
  border: 1px solid #36435a;
  border-color: color-mix(in srgb, var(--platform-edge) 42%, #36435a);
  border-radius: 12px;
  background: #1a2233;
  color: #f0f3fc;
  text-align: start;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.anytv-platform-tile[data-platform="webos"] { --platform-edge: #784f66; --platform-accent: #ffc0d2; }
.anytv-platform-tile[data-platform="titan"] { --platform-edge: #785c52; --platform-accent: #ffd1aa; }
.anytv-platform-tile[data-platform="android"] { --platform-edge: #4c6d66; --platform-accent: #aaebcb; }
.anytv-platform-tile[data-platform="ios"] { --platform-edge: #596985; --platform-accent: #c1d5fb; }
.anytv-platform-tile[data-platform="vidaa"] { --platform-edge: #476b78; --platform-accent: #ade4fa; }
.anytv-platform-tile[data-platform="roku"] { --platform-edge: #6b558d; --platform-accent: #dcc6ff; }
.anytv-platform-tile[data-platform="fire"] { --platform-edge: #7e5b4b; --platform-accent: #ffd1a2; }
.anytv-platform-tile[data-platform="zeasn"] { --platform-edge: #4e6c80; --platform-accent: #b6dcf5; }
.anytv-platform-tile:active:not(:disabled) { background: #222b3f; }
.anytv-platform-tile:focus-visible { outline-color: var(--accent-light, #ffab9f); }
.anytv-platform-logo {
  grid-area: logo;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 33px;
  padding: 3px;
  border: 1px solid #d5def3;
  border-radius: 7px;
  background: #f8faff;
}
.anytv-platform-logo img { inline-size: 100%; block-size: 100%; min-inline-size: 0; min-block-size: 0; object-fit: contain; }
.anytv-platform-tile:is([data-platform="titan"], [data-platform="vidaa"], [data-platform="roku"], [data-platform="zeasn"]) .anytv-platform-logo { padding-inline: 2px; }
.anytv-platform-copy { grid-area: copy; display: grid; min-inline-size: 0; gap: 1px; }
.anytv-platform-copy strong { color: #f4f5fb; font-size: .81rem; font-weight: 690; line-height: 1.14; overflow-wrap: anywhere; }
.anytv-platform-copy small { color: #adb9d4; font-size: .64rem; line-height: 1.18; overflow-wrap: anywhere; }
.anytv-platform-count {
  grid-area: count;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-inline-size: 0;
  color: var(--platform-accent);
}
.anytv-platform-count > bdi { font-size: 1.03rem; font-weight: 740; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.anytv-platform-count > small { color: #adb9d4; font-size: .63rem; line-height: 1.12; overflow-wrap: anywhere; }
.anytv-platform-arrow { grid-area: arrow; color: var(--platform-accent); }
.anytv-platform-arrow svg { width: 12px; height: 12px; }
[dir="rtl"] .anytv-platform-arrow svg { transform: scaleX(-1); }

.anytv-platform-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo copy clear";
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  padding: 8px;
  border: 1px solid #454866;
  border-radius: 13px;
  background: #1b2133;
}
.anytv-platform-filter > .anytv-platform-logo { inline-size: 40px; block-size: 36px; padding: 4px; }
.anytv-platform-filter-copy { grid-area: copy; display: grid; min-inline-size: 0; gap: 2px; }
.anytv-platform-filter-copy small { color: #ffaaa0; font-size: .68rem; }
.anytv-platform-filter-copy strong { color: #eef0fa; font-size: .84rem; line-height: 1.2; overflow-wrap: anywhere; }
.anytv-platform-filter-copy strong > span { color: #a1abc6; }
.anytv-platform-filter > .btn {
  grid-area: clear;
  --control-top: #2a3046;
  --control-bottom: #222a3b;
  --control-edge: #46516c;
  --control-hover: #7886aa;
  min-inline-size: 0;
  min-block-size: 44px;
  padding-inline: 7px;
  border-radius: 9px;
  font-size: .75rem;
}
.anytv-platform-filter > .btn svg { width: 15px; height: 15px; }

@media (max-width: 328px) {
  .anytv-platform-tile { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo copy" "count count"; min-block-size: 67px; padding-inline: 6px; gap: 4px 5px; }
  .anytv-platform-arrow { display: none; }
  .anytv-platform-tile .anytv-platform-logo { inline-size: 34px; block-size: 29px; }
  .anytv-platform-copy strong { font-size: .76rem; }
}
@media (min-width: 560px) {
  .anytv-platform-grid { gap: 8px; }
  .anytv-platform-tile { grid-template-columns: auto minmax(0, 1fr) auto 14px; grid-template-areas: "logo copy count arrow"; min-block-size: 64px; gap: 8px; padding: 8px 10px; }
  .anytv-platform-tile .anytv-platform-logo { inline-size: 52px; block-size: 38px; padding: 4px; }
  .anytv-platform-count { align-items: end; flex-direction: column; gap: 2px; }
  .anytv-platform-count > bdi { font-size: 1.12rem; }
  .anytv-platform-copy strong { font-size: .88rem; }
}
@media (max-width: 1023px) {
  .anytv-platform-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto 12px;
    grid-template-areas: "logo copy count arrow";
    min-block-size: 56px;
  }
}
@media (max-width: 328px) {
  .anytv-platform-tile:last-child:nth-child(odd) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo copy count";
  }
}
@media (min-width: 1024px) { .anytv-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) {
  .anytv-platform-tile:hover:not(:disabled) { border-color: var(--platform-edge); background: #242d42; }
}
@media (prefers-reduced-motion: reduce) { .anytv-platform-tile { transition: none; } }