/* Twitch plugin – shared frontend, detail and widget styles. */
.twitch-plugin,
.nx-twitch-detail,
.nx-tw {
  --tw-accent: var(--nx-color-primary, var(--bs-primary, #9146ff));
  --tw-brand: #9146ff;
  --tw-live: #e91916;
  --tw-surface: var(--nx-color-surface, var(--bs-body-bg, #fff));
  --tw-card: var(--nx-color-card-bg, var(--bs-card-bg, var(--tw-surface)));
  --tw-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --tw-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --tw-border: var(--nx-color-card-border, var(--bs-border-color, rgba(24, 32, 42, .14)));
  --tw-button-bg: var(--nx-color-button-bg, var(--tw-accent));
  --tw-button-text: var(--nx-color-button-text, #fff);
  --tw-shadow: var(--nx-component-shadow, var(--bs-box-shadow, none));
  color: var(--tw-text);
}

body.nx-site-twitch .twitch-hero {
  color: var(--nx-page-head-text, var(--tw-text));
  background: var(--nx-page-head-bg, color-mix(in srgb, var(--tw-accent) 8%, var(--tw-card)));
}

.twitch-plugin .twitch-channel-intro { min-width: 220px; }
.twitch-plugin .twitch-channel-card { position: relative; overflow: hidden; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; --twitch-cover-height: 218px; }
.twitch-plugin .twitch-external-link { position: relative; z-index: 3; text-decoration: none; }
.twitch-plugin .twitch-external-link:hover { text-decoration: underline; }
.twitch-plugin .twitch-channel-card:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
.twitch-plugin .twitch-channel-card:hover { transform: translateY(-2px); box-shadow: var(--tw-shadow) !important; }
.twitch-plugin .twitch-cover { height: var(--twitch-cover-height); overflow: hidden; z-index: 1; background: color-mix(in srgb, var(--tw-text) 88%, #000); }
.twitch-plugin .twitch-cover.is-offline.has-cover-image { --twitch-cover-height: 240px; height: 240px; }
.twitch-plugin .twitch-cover-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.twitch-plugin .twitch-cover.is-live .twitch-cover-img { object-position: center top; }
.twitch-plugin .twitch-cover.is-offline .twitch-cover-img { object-fit: contain; }
.twitch-plugin .twitch-cover-art { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--tw-brand) 30%, #09070f), var(--tw-brand)); font-size: 3.1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.twitch-plugin .twitch-cover-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35)); transition: opacity .2s ease; }
.twitch-plugin .twitch-channel-card:hover .twitch-cover-overlay { opacity: .75; }
.twitch-plugin .twitch-live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; animation: twitch-live-pulse 1.4s ease-in-out infinite; }
@keyframes twitch-live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
.twitch-plugin .twitch-cover-action { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: #fff; background: rgba(0, 0, 0, .45); font-size: .95rem; font-weight: 700; line-height: 1.2; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.twitch-plugin .twitch-cover-action span { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
.twitch-plugin .twitch-cover-action i { font-size: 2.4rem; }
.twitch-plugin .twitch-channel-card:hover .twitch-cover-action { opacity: 1; }
.twitch-plugin .twitch-card-body { z-index: 2; padding-top: 2.5rem; }
.twitch-plugin .twitch-avatar { position: absolute; left: 1rem; top: -2.25rem; z-index: 10; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; color: #fff; background: color-mix(in srgb, var(--tw-text) 90%, #000); border: 4px solid var(--tw-card); font-size: 1.1rem; font-weight: 800; box-shadow: var(--tw-shadow); }
.twitch-plugin .twitch-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.twitch-consent-hidden { display: none !important; }

.nx-twitch-detail { display: flex; flex-direction: column; gap: 20px; }
.nx-twitch-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 10px); }
.nx-twitch-user { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.nx-twitch-user img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.nx-twitch-user h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.nx-twitch-live { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); gap: 14px; }
.nx-twitch-player { aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--nx-component-radius, 10px); }
.nx-twitch-player iframe, .nx-twitch-chat iframe { width: 100%; height: 100%; display: block; border: 0; }
.nx-twitch-chat { min-height: 100%; overflow: hidden; background: #111; border-radius: var(--nx-component-radius, 10px); }
.nx-twitch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nx-twitch-stats > div { padding: 14px; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 8px); }
.nx-twitch-stats span, .nx-twitch-stats strong { display: block; }
.nx-twitch-stats span { color: var(--tw-muted); font-size: .75rem; }
.nx-twitch-media h2 { margin: 0; font-size: 1.2rem; }
.nx-twitch-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nx-twitch-media-card { overflow: hidden; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 8px); text-decoration: none; }
.nx-twitch-thumb { position: relative; height: 145px; background: color-mix(in srgb, var(--tw-text) 86%, #000); }
.nx-twitch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nx-twitch-thumb span { position: absolute; top: 8px; left: 8px; padding: 3px 7px; color: #fff; background: rgba(0, 0, 0, .75); border-radius: var(--nx-component-radius, 4px); }
.nx-twitch-media-card strong, .nx-twitch-media-card small { display: block; padding: 8px 10px 0; }
.nx-twitch-media-card small { padding-top: 0; padding-bottom: 10px; color: var(--tw-muted); }

.nx-tw { padding: 18px 0; color: var(--tw-text); background: var(--tw-surface); }
.nx-tw * { box-sizing: border-box; }
.nx-tw a { color: inherit; text-decoration: none; }
.nx-tw__in { width: min(100% - 28px, 1180px); margin: auto; }
.nx-tw__sec { margin-bottom: 24px; }
.nx-tw__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 13px; }
.nx-tw__head h2 { position: relative; margin: 0; padding-left: 26px; font-size: 17px; font-weight: 800; text-transform: uppercase; }
.nx-tw__head h2::before { content: "◧"; position: absolute; left: 0; color: var(--tw-accent); }
.nx-tw__head h2::after { content: ""; position: absolute; left: 26px; bottom: -7px; width: 120px; height: 3px; background: var(--tw-accent); transform: skewX(-25deg); }
.nx-tw__more { color: var(--tw-accent) !important; font-size: 10px; font-weight: 800; }
.nx-tw__channels, .nx-tw__items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.nx-tw-card { overflow: hidden; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 6px); }
.nx-tw-card__pic { position: relative; display: block; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--tw-text) 86%, #000); }
.nx-tw-card__pic > img:not(.nx-tw-avatar), .nx-tw-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nx-tw-status { position: absolute; top: 6px; left: 6px; padding: 4px 7px; color: #fff; background: color-mix(in srgb, var(--tw-muted) 75%, #000); border-radius: var(--nx-component-radius, 3px); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.nx-tw-status.live { background: var(--tw-live); }
.nx-tw-avatar { position: absolute; left: 9px; bottom: -18px; width: 39px; height: 39px; object-fit: cover; background: color-mix(in srgb, var(--tw-text) 86%, #000); border: 2px solid var(--tw-card); border-radius: 50%; }
.nx-tw-card__body { padding: 24px 9px 9px; }
.nx-tw-card h3, .nx-tw-item h3 { margin: 0 0 5px; font-size: 10px; line-height: 1.3; }
.nx-tw-cat { margin: 0 0 8px; color: var(--tw-muted); font-size: 9px; }
.nx-tw-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.nx-tw-view { color: var(--tw-accent); font-size: 8px; font-weight: 800; }
.nx-tw-btn { padding: 5px 7px; color: var(--tw-accent); border: 1px solid var(--tw-accent); border-radius: var(--nx-component-radius, 4px); font-size: 8px; font-weight: 800; }
.nx-tw-btn.live { color: var(--tw-button-text); background: var(--tw-button-bg); border-color: var(--tw-button-bg); }
.nx-tw__switch { display: flex; gap: 7px; }
.nx-tw-tab { padding: 7px 13px; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 4px); font-size: 9px; font-weight: 800; cursor: pointer; }
.nx-tw-tab.active { color: var(--tw-button-text); background: var(--tw-button-bg); border-color: var(--tw-button-bg); }
.nx-tw-item[hidden] { display: none !important; }
.nx-tw-item__pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--tw-text) 86%, #000); border-radius: var(--nx-component-radius, 5px); }
.nx-tw-dur { position: absolute; top: 5px; left: 5px; padding: 3px 5px; color: #fff; background: rgba(0, 0, 0, .8); border-radius: var(--nx-component-radius, 3px); font-size: 8px; }
.nx-tw-item h3 { margin-top: 7px; }
.nx-tw-item p { margin: 0; color: var(--tw-muted); font-size: 8px; }
.nx-tw__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nx-tw-info { min-height: 64px; display: flex; align-items: center; gap: 13px; padding: 12px 16px; color: var(--tw-text); background: var(--tw-card); border: 1px solid var(--tw-border); border-radius: var(--nx-component-radius, 5px); }
.nx-tw-info__ico { color: var(--tw-accent); font-size: 24px; }
.nx-tw-info.follow .nx-tw-info__ico { color: var(--tw-brand); }
.nx-tw-info strong { display: block; font-size: 11px; text-transform: uppercase; }
.nx-tw-info span { display: block; margin-top: 3px; color: var(--tw-muted); font-size: 9px; }
.nx-tw-follow { margin-left: auto; padding: 8px 14px; color: var(--tw-button-text); background: var(--tw-button-bg); border-radius: var(--nx-component-radius, 4px); font-size: 9px; font-weight: 800; }
.nx-tw-empty { padding: 20px; color: var(--tw-muted); border: 1px dashed var(--tw-border); border-radius: var(--nx-component-radius, 5px); text-align: center; font-size: 10px; }

@media (max-width: 1050px) { .nx-tw__channels, .nx-tw__items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) { .nx-twitch-live { grid-template-columns: 1fr; } .nx-twitch-chat { height: 500px; } .nx-twitch-media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .nx-tw__channels, .nx-tw__items { grid-template-columns: repeat(2, 1fr); } .nx-tw__bottom { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .nx-twitch-stats, .nx-twitch-media-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .nx-tw__channels, .nx-tw__items { grid-template-columns: 1fr; } .nx-tw__head { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}