/* PromXAI Compatibility — test186
 * Static official asset system.
 * One Core registry + one Theme renderer + zero layout-shift animation.
 */

/* Shared compatibility tile */
.px-compat-logo{
  --px-compat-tile:40px;
  width:var(--px-compat-tile);height:var(--px-compat-tile);
  display:inline-grid;place-items:center;flex:0 0 var(--px-compat-tile);
  border:1px solid var(--px-compat-tile-border);
  border-radius:12px;overflow:hidden;
  background:var(--px-compat-tile-bg);
  box-shadow:var(--px-compat-tile-shadow);
  transition:border-color .16s ease,box-shadow .16s ease;
}
html[data-theme="dark"] .px-compat-logo{
  --px-compat-tile-bg:linear-gradient(180deg,#17243a 0%,#0d1628 100%);
  --px-compat-tile-border:rgba(155,182,232,.28);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(2,8,23,.20);
}
html[data-theme="light"] .px-compat-logo{
  --px-compat-tile-bg:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
  --px-compat-tile-border:rgba(119,143,191,.28);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(76,93,130,.10);
}
.px-compat-logo img,.px-compat-logo svg{
  width:30px;height:30px;max-width:30px;max-height:30px;
  display:block;object-fit:contain;filter:none;box-shadow:none;
}
.px-compat-logo[data-compat-shape="tile"] img{width:32px;height:32px;max-width:32px;max-height:32px;border-radius:8px}
/* ChatGPT: official monochrome knot on a white plate in both themes. */
html[data-theme="dark"] .px-compat-logo[data-compat-logo="gpt-image"],
html[data-theme="light"] .px-compat-logo[data-compat-logo="gpt-image"]{
  --px-compat-tile-bg:#fff;--px-compat-tile-border:rgba(17,24,39,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(2,8,23,.14);
}
.px-compat-logo[data-compat-logo="gpt-image"] img{width:28px;height:28px;max-width:28px;max-height:28px;filter:brightness(0) saturate(100%);object-fit:contain}
/* Gemini: the official app icon already lives on a white rounded-square tile.
 * On a dark shared outer tile, contain spacing can expose a dark seam around
 * the official mark in Homepage. Match Prompt Detail by using the same white
 * outer plate in both themes without altering the official icon itself. */
html[data-theme="dark"] .px-compat-logo[data-compat-logo="gemini"],
html[data-theme="light"] .px-compat-logo[data-compat-logo="gemini"]{
  --px-compat-tile-bg:#fff;
  --px-compat-tile-border:rgba(17,24,39,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(2,8,23,.14);
}
.px-compat-logo[data-compat-logo="gemini"] img{
  width:31px;height:31px;max-width:31px;max-height:31px;
  border-radius:8px;object-fit:contain;object-position:center;background:#fff;
}
/* Midjourney: the official published sailboat asset is a horizontal white artwork.
 * Use a white outer plate in both themes so contain-letterboxing never exposes
 * the dark shared tile as false top/bottom separators. The official artwork
 * remains uncropped and unmodified. */
html[data-theme="dark"] .px-compat-logo[data-compat-logo="midjourney"],
html[data-theme="light"] .px-compat-logo[data-compat-logo="midjourney"]{
  --px-compat-tile-bg:#fff;
  --px-compat-tile-border:rgba(17,24,39,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(2,8,23,.14);
}
.px-compat-logo[data-compat-logo="midjourney"] img{
  width:31px;height:31px;max-width:31px;max-height:31px;
  border-radius:7px;object-fit:contain;object-position:center;background:#fff;
}
.px-compat-logo__wordmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0 4px;
  font:900 13px/1 var(--px-font,Arial,sans-serif);letter-spacing:-.35px;
  color:var(--px-text);white-space:nowrap;
}
html[data-theme="dark"] .px-compat-logo__wordmark{color:#f8fbff}
html[data-theme="light"] .px-compat-logo__wordmark{color:#172033}

/* Semantic plate contract — shared everywhere.
 * Image engines stay on a white plate in Light and Dark.
 * Video engines stay on a black plate in Light and Dark.
 * The renderer supplies data-compat-kind from the Core registry, so Homepage,
 * Prompt Detail and Phone view cannot drift into separate visual variants. */
html[data-theme="dark"] .px-compat-logo[data-compat-kind="image"],
html[data-theme="light"] .px-compat-logo[data-compat-kind="image"]{
  --px-compat-tile-bg:#fff;
  --px-compat-tile-border:rgba(17,24,39,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(2,8,23,.14);
}
html[data-theme="dark"] .px-compat-logo[data-compat-kind="video"],
html[data-theme="light"] .px-compat-logo[data-compat-kind="video"]{
  --px-compat-tile-bg:linear-gradient(180deg,#111827 0%,#070b12 100%);
  --px-compat-tile-border:rgba(255,255,255,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 14px rgba(2,8,23,.22);
}
.px-compat-logo[data-compat-kind="video"] .px-compat-logo__wordmark{color:#fff}

/* Interaction: glow only. No scale, translate, width change, reveal, or animation. */
.px-compat-filter-button,
.px-mobile-compatibility-button,
.px-prompt-compatibility__link,
.px-prompt-phone-compatibility a{
  --px-compat-brand:#725cff;
  display:inline-grid;place-items:center;
  padding:0;border:0;background:transparent;color:inherit;text-decoration:none;
  cursor:pointer;box-shadow:none;
}
.px-compat-filter-button:hover .px-compat-logo,
.px-compat-filter-button:focus-visible .px-compat-logo,
.px-mobile-compatibility-button:hover .px-compat-logo,
.px-mobile-compatibility-button:focus-visible .px-compat-logo,
.px-prompt-compatibility__link:hover .px-compat-logo,
.px-prompt-compatibility__link:focus-visible .px-compat-logo,
.px-prompt-phone-compatibility a:hover .px-compat-logo,
.px-prompt-phone-compatibility a:focus-visible .px-compat-logo{
  border-color:color-mix(in srgb,var(--px-compat-brand) 58%,#dbe8ff 18%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px color-mix(in srgb,var(--px-compat-brand) 24%,transparent),0 0 16px color-mix(in srgb,var(--px-compat-brand) 28%,transparent),0 6px 16px rgba(2,8,23,.16);
}
.px-compat-filter-button.is-active .px-compat-logo,
.px-mobile-compatibility-button.is-active .px-compat-logo{
  border-color:color-mix(in srgb,var(--px-compat-brand) 76%,#e8f3ff 20%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px color-mix(in srgb,var(--px-compat-brand) 30%,transparent),0 0 18px color-mix(in srgb,var(--px-compat-brand) 34%,transparent),0 7px 16px rgba(2,8,23,.18);
}

/* Home / browse rail */
.px-home-results-compat{
  display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;
  padding:6px 8px;overflow-x:auto;scrollbar-width:none;
  border:1px solid color-mix(in srgb,var(--px-border) 76%,transparent);
  border-radius:16px;background:color-mix(in srgb,var(--px-card) 52%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(2,8,23,.06);
}
.px-home-results-compat::-webkit-scrollbar{display:none}
.px-home-results-compat__primary,.px-home-results-compat__more{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.px-home-results-compat__more[hidden],.px-home-results-compat [data-compat-kind][hidden]{display:none}
.px-home-results-compat__more-toggle{display:none}
.px-compat-filter-button{width:42px;min-width:42px;height:42px;flex:0 0 42px}
html[data-theme="light"] .px-home-results-compat{background:color-mix(in srgb,#fff 90%,var(--px-card));box-shadow:0 8px 22px rgba(71,86,122,.08)}

/* Prompt Detail */
.px-prompt-compatibility,
.px-prompt-phone-compatibility{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;width:100%;
  margin-top:12px;padding:0;border:0;background:transparent;box-shadow:none;
}
.px-prompt-compatibility__label,
.px-prompt-phone-compatibility>span{
  font-size:11.5px;font-weight:850;line-height:1;color:var(--px-muted);white-space:nowrap;flex:0 0 auto;
}
.px-prompt-compatibility__logos,
.px-prompt-phone-compatibility>div{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:nowrap;min-width:0;
  flex:1 1 auto;width:auto;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.px-prompt-compatibility__divider{width:1px;min-width:1px;height:24px;flex:0 0 1px;margin-inline-start:auto;border-radius:999px;background:linear-gradient(180deg,rgba(139,163,201,.05),rgba(139,163,201,.42),rgba(139,163,201,.05));opacity:.95}
.px-prompt-compatibility__logos::-webkit-scrollbar,
.px-prompt-phone-compatibility>div::-webkit-scrollbar{display:none}
.px-prompt-compatibility__link,
.px-prompt-phone-compatibility a{width:42px;min-width:42px;height:42px;flex:0 0 42px}
.px-prompt-phone-compatibility{margin:10px 14px 0}

/* test228 — phone compatibility uses one compact strip for the six canonical marks. */
.px-mobile-compatibility-group{display:grid;gap:8px}
.px-mobile-compatibility-group__title{margin-bottom:0}
.px-mobile-compatibility-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;align-items:center}
.px-mobile-compatibility-button{width:40px;height:40px;justify-self:center}
.px-mobile-compatibility-button .px-compat-logo{--px-compat-tile:36px}
.px-mobile-compatibility-clear{width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--px-border);border-radius:10px;background:color-mix(in srgb,var(--px-card) 92%,transparent);color:var(--px-muted);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.px-mobile-compatibility-clear.is-active{color:#fff;border-color:color-mix(in srgb,var(--px-accent,#725cff) 45%,var(--px-border));background:color-mix(in srgb,var(--px-accent,#725cff) 24%,var(--px-card))}
.px-mobile-compatibility-more{display:none}

@media (max-width:760px){
  .px-compat-logo{--px-compat-tile:36px;border-radius:10px}
  .px-compat-logo img,.px-compat-logo svg{width:27px;height:27px;max-width:27px;max-height:27px}
  .px-compat-logo[data-compat-shape="tile"] img{width:29px;height:29px;max-width:29px;max-height:29px}
  .px-prompt-compatibility,.px-prompt-phone-compatibility{gap:7px;margin-top:10px}
  .px-prompt-compatibility__label,.px-prompt-phone-compatibility>span{font-size:10.5px}
  .px-compat-filter-button,.px-prompt-compatibility__link,.px-prompt-phone-compatibility a{width:38px;min-width:38px;height:38px;flex-basis:38px}
}


@media (max-width:390px){
  .px-mobile-compatibility-grid{gap:3px}
  .px-mobile-compatibility-button{width:36px;height:36px}
  .px-mobile-compatibility-button .px-compat-logo{--px-compat-tile:33px}
}

@media (prefers-reduced-motion:reduce){
  .px-compat-logo{transition:none}
}

/* test400 — ChatGPT/OpenAI aliases use the same monochrome white-plate contract as gpt-image. */
html[data-theme="dark"] .px-compat-logo[data-compat-logo="chatgpt"],
html[data-theme="light"] .px-compat-logo[data-compat-logo="chatgpt"],
html[data-theme="dark"] .px-compat-logo[data-compat-logo="openai"],
html[data-theme="light"] .px-compat-logo[data-compat-logo="openai"]{
  --px-compat-tile-bg:#fff;
  --px-compat-tile-border:rgba(17,24,39,.18);
  --px-compat-tile-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(2,8,23,.14);
}
.px-compat-logo[data-compat-logo="chatgpt"] img,
.px-compat-logo[data-compat-logo="openai"] img{
  width:28px;height:28px;max-width:28px;max-height:28px;
  filter:brightness(0) saturate(100%);
  object-fit:contain;
}

/* test417 — one compact Prompt→Skill pill shares the compatibility strip; about two tool tiles wide. */
.px-prompt-compatibility__skill-action,
.px-prompt-phone-compatibility a.px-prompt-compatibility__skill-action{
  position:relative;width:82px;min-width:82px;height:42px;flex:0 0 82px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 8px;
  border:1px solid rgba(48,205,142,.27);border-radius:11px;
  background:linear-gradient(145deg,rgba(25,142,96,.14),rgba(29,103,121,.08));color:#c9f4df;
  font-size:10px;font-weight:900;line-height:1;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(2,8,23,.10);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.px-prompt-compatibility__skill-action b{position:absolute;top:4px;inset-inline-end:5px;min-width:15px;height:15px;display:grid;place-items:center;padding:0 3px;border-radius:999px;background:#1fa875;color:#fff;font-size:7.5px;line-height:1;font-weight:950}
.px-prompt-compatibility__skill-action:hover,.px-prompt-compatibility__skill-action:focus-visible{border-color:rgba(67,224,158,.44);background:linear-gradient(145deg,rgba(29,165,111,.22),rgba(32,116,136,.12));color:#effff7;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(48,205,142,.08),0 6px 14px rgba(2,8,23,.12)}
html[data-theme="light"] .px-prompt-compatibility__skill-action{border-color:rgba(24,159,104,.21);background:linear-gradient(145deg,#effbf6,#edf8f8);color:#16875a;box-shadow:0 5px 14px rgba(31,102,78,.07)}
.px-prompt-compatibility__logos>.px-prompt-compatibility__skill-action:first-child:last-child,.px-prompt-phone-compatibility>div>.px-prompt-compatibility__skill-action:first-child:last-child{margin-inline-start:auto}
@media(max-width:760px){.px-prompt-compatibility__skill-action,.px-prompt-phone-compatibility a.px-prompt-compatibility__skill-action{width:76px;min-width:76px;height:38px;flex-basis:76px;padding:0 7px;border-radius:10px;font-size:9.4px}.px-prompt-compatibility__divider{height:20px}}