/* 16/10 (patron) — AUTOCOLLANTS SIGHT dans le chat du live (spectateurs + créateur), incitation aux Éclats, Iris, vue « graphique Sight » du spectateur.
   Charte : amandes / gélules, or, noir, gris ; aucun carré ; thème clair / sombre. Dessins : static/live-autocollants.js */
.stk-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* bouton du chat qui ouvre le sélecteur */
.stk-ouvrir { flex: none; display: inline-grid; place-items: center; width: 44px; height: 38px; border-radius: 50%; border: 1px solid rgba(247, 201, 72, .45); cursor: pointer;
  background: radial-gradient(120% 140% at 30% 0, rgba(247, 201, 72, .25), rgba(247, 201, 72, .05) 70%); color: var(--gold, #f7c948); transition: transform .12s, box-shadow .15s; }
.stk-ouvrir svg { width: 26px; height: 20px; }
.stk-ouvrir:hover, .stk-ouvrir.on { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(247, 201, 72, .8); }
.stk-ouvrir.on { background: linear-gradient(135deg, #f7c948, #d4a63a); color: #1a1200; border-color: transparent; }

/* sélecteur : grande amande au-dessus du champ */
.lv-chat.lvc { position: relative; }
.stk-pick { position: absolute; left: 8px; right: 8px; bottom: 58px; z-index: 8; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; max-height: min(420px, 78%);
  border-radius: 38px / 30px; border: 1px solid rgba(247, 201, 72, .45); background: rgba(8, 11, 20, .97); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
  animation: stkIn .18s ease-out; }
.stk-pick[hidden] { display: none !important; }
@keyframes stkIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.stk-pick-hd { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 0 8px; }
.stk-pick-hd b { color: #f7c948; font-size: 13px; letter-spacing: .04em; } .stk-pick-hd span { color: #8a95a8; font-size: 11.5px; }
.stk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow-y: auto; padding: 2px 4px; scrollbar-width: thin; }
.stk-b { border: 0; background: none; padding: 4px; border-radius: 28px / 22px; cursor: pointer; transition: transform .12s, background .12s; }
.stk-b:hover, .stk-b:focus-visible { transform: translateY(-2px) scale(1.06); background: rgba(247, 201, 72, .08); outline: none; }
.stk-b:active { transform: scale(.94); }
.stk-pick.repos .stk-b { opacity: .45; cursor: progress; transform: none; }
.stk-pick.repos::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #f7c948, #d4a63a); transform-origin: left;
  animation: stkRepos var(--repos, 3000ms) linear forwards; }
@keyframes stkRepos { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ligne du chat avec autocollant */
.lv-chat .ms .lvc-stk { display: flex; align-items: center; gap: 8px; padding: 2px 6px; }
.lv-chat .ms .lvc-stk .nm { color: var(--gold, #f7c948); font-weight: 700; font-size: 13px; }
.lvc-stk .stk { display: block; width: 112px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.stk-pop { animation: stkPop .55s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 30% 80%; }
@keyframes stkPop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: none; } }

/* petites animations des dessins (chat, sélecteur) */
.stk-k-oeil .stk-paup { animation: stkCligne 3.4s infinite; }
@keyframes stkCligne { 0%, 88%, 100% { transform: scaleY(0); } 92%, 95% { transform: scaleY(1); } }
.stk-k-lingot .stk-brille { animation: stkBrille 2.6s ease-in-out infinite; }
@keyframes stkBrille { 0%, 100% { transform: translateX(0); opacity: 0; } 30% { opacity: .5; } 60% { transform: translateX(44px); opacity: 0; } }
.stk-b:hover .stk-k-taureau .stk-tete, .lvc-stk .stk-k-taureau .stk-tete { animation: stkHoche 1.2s ease-in-out 2; transform-origin: 100px 60px; transform-box: view-box; }
.stk-b:hover .stk-k-ours .stk-tete, .lvc-stk .stk-k-ours .stk-tete { animation: stkHoche 1.4s ease-in-out 2 reverse; transform-origin: 100px 60px; transform-box: view-box; }
@keyframes stkHoche { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .stk-pop, .stk-k-oeil .stk-paup, .stk-k-lingot .stk-brille, .stk-tete { animation: none !important; } }

/* champ du chat : bouton autocollants + saisie + envoyer */
.lv-chat.lvc form { align-items: center; }
.lv-chat.lvc form input { flex: 1; min-width: 0; border-radius: 999px; }
.lv-chat.lvc form .btn { border-radius: 999px; }
.lv-chat.lvc .ms { font-size: 14.5px; line-height: 1.4; }
.lv-chat.lvc .h { padding: 10px 14px; }

/* incitation aux Éclats : bandeau dans le chat (spectateur) */
.lvc-cta { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 8px 8px 8px 12px; border-radius: 999px; border: 1px solid rgba(247, 201, 72, .4);
  background: linear-gradient(110deg, rgba(247, 201, 72, .18), rgba(255, 106, 61, .08) 60%, rgba(247, 201, 72, .14)); background-size: 220% 100%; animation: lvcCta 7s ease-in-out infinite; }
@keyframes lvcCta { 50% { background-position: 100% 0; } }
.lvc-cta .ir-oeil { width: 30px; height: 19px; flex: none; }
.lvc-cta span { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.25; color: var(--text, #e3e7ef); } .lvc-cta span b { color: var(--gold, #f7c948); }
.lvc-cta .btn { flex: none; padding: 6px 12px; font-size: 12.5px; border-radius: 999px; }
.lv-chat .ms .lvc-rappel { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 18px / 14px; font-size: 12.5px; color: var(--muted, #8a95a8);
  border: 1px dashed rgba(247, 201, 72, .4); background: rgba(247, 201, 72, .05); }
.lv-chat .ms .lvc-rappel button { margin-left: auto; flex: none; }

/* page du live (spectateur) : objectif + soutiens toujours visibles, appel aux Éclats animé */
.lve-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 12px; padding: 12px 14px 12px 18px; border-radius: 40px / 32px; border: 1px solid rgba(247, 201, 72, .4);
  background: radial-gradient(90% 160% at 0 50%, rgba(247, 201, 72, .16), transparent 70%), var(--panel, #0b1020); }
.lve-cta-oeil { flex: none; display: grid; place-items: center; width: 64px; height: 42px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 201, 72, .28), transparent 70%); }
.lve-cta-oeil .ir-oeil { width: 54px; height: 34px; animation: eclRegard 6s infinite; }
.lve-cta-tx { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lve-cta-tx b { font-size: 15.5px; } .lve-cta-tx .mut { font-size: 12.5px; }
.lve-cta .lve-bande { flex: 1 1 100%; margin: 0; }
.lve-cta .lve-btn { padding: 10px 18px; font-weight: 800; animation: lveBat 2.8s ease-in-out infinite; }
@keyframes lveBat { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.05); } 90% { transform: scale(.98); } }
.lve-merci { position: absolute; left: 50%; top: 18%; z-index: 7; transform: translateX(-50%); pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 10px 22px 10px 12px;
  border-radius: 999px; background: rgba(8, 11, 20, .9); border: 1.5px solid #f7c948; color: #fff; font-weight: 700; box-shadow: 0 0 40px rgba(247, 201, 72, .45); animation: lveMerci 4.2s ease forwards; }
.lve-merci .ir-oeil { width: 40px; height: 25px; } .lve-merci b { color: #f7c948; }
@keyframes lveMerci { 0% { opacity: 0; transform: translate(-50%, -14px) scale(.8); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 16% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }

/* Iris : compteur et envol plus généreux */
.lv-vids .ir-vol.gros { width: 110px; height: 70px; }
.ir-rafale { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.lv-vids video.princ { cursor: pointer; }
.lv-coeur-astuce { position: absolute; right: 12px; top: 12px; z-index: 3; font-size: 11.5px; color: #e6ebf5; background: rgba(5, 9, 19, .7); padding: 4px 10px; border-radius: 999px; pointer-events: none; }

/* spectateur : le graphique Sight en vrai (miroir du créateur), si ce navigateur a Sight */
.lv-sight-b { display: inline-flex; align-items: center; gap: 7px; }
.lv-vids .lv-sight { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; background: #0e1117; border-radius: inherit; }
.lv-vids .lv-sight-cache { position: absolute; inset: 0; z-index: 5; }
.lv-vids .lv-sight-l { position: absolute; left: 12px; bottom: 12px; z-index: 6; font-size: 11.5px; font-weight: 700; color: #1a1200; background: linear-gradient(135deg, #f7c948, #d4a63a); padding: 4px 12px; border-radius: 999px; pointer-events: none; }

:root[data-theme=light] .stk-pick { background: rgba(255, 255, 255, .98); }
:root[data-theme=light] .lvc-cta span { color: #0f172a; }
@media (max-width: 760px) { .stk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lvc-stk .stk { width: 96px; }
  .lve-cta { border-radius: 30px / 24px; padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .lve-cta-oeil { width: 46px; height: 30px; } .lve-cta-oeil .ir-oeil { width: 40px; height: 25px; }
  .lve-cta-tx { flex: 1 1 0; } .lve-cta-tx .mut { display: none; } .lve-cta .lve-btn { padding: 8px 14px; font-size: 13.5px; } }

/* 16/10 (patron : « pas de section chat… autocollants envoyés, subs côté utilisateur ») — barre d'actions du spectateur dans le chat */
.lve-bande[hidden], .lve-pan[hidden] { display: none !important; }
.lvc-bar { display: flex; gap: 4px; padding: 8px 8px 0; border-top: 1px solid rgba(212, 166, 58, .16); }
.lvc-chip { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 7px 6px; border-radius: 999px; white-space: nowrap; overflow: hidden;
  font-size: 11.5px !important;
  border: 1px solid rgba(247, 201, 72, .32); background: radial-gradient(120% 140% at 50% 0, rgba(247, 201, 72, .12), transparent 65%), rgba(9, 14, 27, .6);
  color: var(--text, #e3e7ef); font: 700 12px system-ui, sans-serif; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lvc-chip svg { color: var(--gold, #f7c948); flex: none; width: 14px; height: 14px; }
.lvc-chip span { overflow: hidden; text-overflow: ellipsis; }
.lvc-chip:hover { transform: translateY(-1px); border-color: var(--gold, #f7c948); box-shadow: 0 6px 18px -10px rgba(247, 201, 72, .9); }
.lvc-chip.ecl { background: linear-gradient(135deg, #f7c948, #d4a63a); color: #1a1200; border-color: transparent; } .lvc-chip.ecl svg { color: #1a1200; }
.lvc-chip.bientot { opacity: .62; }
.lve-cta-bts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.lve-btn-sub { border-color: rgba(247, 201, 72, .5) !important; }
.lve-indispo { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 9px 14px; border-radius: 999px; border: 1px dashed rgba(247, 201, 72, .45);
  background: rgba(247, 201, 72, .07); color: var(--text, #e3e7ef); font-size: 13px; }
.lve-indispo[hidden] { display: none !important; }
.lve-indispo svg { color: var(--gold, #f7c948); flex: none; }
.lve-pan.lve-off [data-lve-payer], .lve-pan.lve-off [data-lve-sub] { opacity: .5; cursor: not-allowed; }
.lve-pan [data-lve-sub].lve-focus { box-shadow: 0 0 0 2px var(--gold, #f7c948), 0 8px 24px -10px rgba(247, 201, 72, .9); }
:root[data-theme=light] .lvc-chip { background: #fff; color: #0f172a; } :root[data-theme=light] .lvc-chip.ecl { background: linear-gradient(135deg, #f7c948, #d4a63a); color: #1a1200; }
:root[data-theme=light] .lve-indispo { color: #0f172a; }
@media (prefers-reduced-motion: reduce) { .lvc-chip { transition: none; } }

/* ═══ 25/10 (patron : « quand on envoie les autocollants, il y a un effet spécial et qu'on puisse en avoir encore beaucoup plus ») ═══
   65 autocollants en 4 onglets colorés (Méthode Sight · Marché · Trade · Émotions), éclats dorés dans le chat, EFFET SPÉCIAL sur l'image du live
   (.stk-fx : arrivée en courbe, apparition qui grossit, onde en œil, éclats, flottement, envol). Mouvement réduit : simple fondu, sans éclats. */
.stk-pick { max-height: min(470px, 82%); }
.stk-tabs { display: flex; gap: 5px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; }
.stk-tabs::-webkit-scrollbar { display: none; }
.stk-tab { --tc: #f7c948; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); background: color-mix(in srgb, var(--tc) 9%, transparent); color: var(--tc);
  font: 800 12px/1.1 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; transition: background .15s, color .15s, transform .12s; }
.stk-tab em { font-style: normal; font-size: 10.5px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 22%, transparent); }
.stk-tab:hover { background: color-mix(in srgb, var(--tc) 18%, transparent); }
.stk-tab.on { background: var(--tc); color: #120d02; border-color: transparent; box-shadow: 0 6px 16px -8px var(--tc); }
.stk-tab.on em { background: rgba(0, 0, 0, .16); }
.stk-tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.stk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stk-cat-t { --tc: #f7c948; grid-column: 1 / -1; margin: 8px 2px 2px; color: var(--tc); font: 800 11px system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; }
.stk-cat-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 50%, transparent), transparent); }
.lvs-stks .stk-cat-t:first-child { margin-top: 0; }

/* éclats dorés (chat + effet) */
.lvc-stk .stk { position: relative; }
.stk-eclats { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.stk-eclats i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff6d0, #f7c948 55%, rgba(247, 201, 72, 0) 72%);
  opacity: 0; animation: stkEclat .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) forwards; }
.stk-eclats i.c { width: 10px; height: 10px; border-radius: 0; background: #ffe08a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.stk-eclats i.b { background: radial-gradient(circle, #fff, #ffd970 50%, rgba(247, 201, 72, 0) 72%); width: 6px; height: 6px; }
@keyframes stkEclat { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); } }
.lvc-stk .stk-eclats i { animation-delay: calc(.18s + var(--d, 0s)); }

/* effet spécial sur l'image du live : en GRAND, éphémère, AU MILIEU (un à la fois, file d'attente dans live-autocollants.js) */
.stk-fx { --dur: 2s; position: absolute; left: 50%; top: 46%; z-index: 7; width: clamp(170px, 36%, 420px); transform: translate(-50%, -50%); pointer-events: none; }
.stk-fx.fort { --dur: 2.6s; width: clamp(200px, 42%, 480px); }
.stk-fx-s { position: relative; display: block; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); animation: stkFxPop var(--dur) cubic-bezier(.2, .9, .3, 1) forwards; }
.stk-fx.fort .stk-fx-s { animation: stkFxPop var(--dur) cubic-bezier(.2, .9, .3, 1) forwards, stkFxSecoue .55s ease-out .2s; }
.stk-fx-s .stk-svg { width: 100%; }
@keyframes stkFxPop {
  0% { opacity: 0; transform: scale(.2) rotate(-10deg); }
  11% { opacity: 1; transform: scale(1.2) rotate(var(--r, 0deg)); }
  19% { transform: scale(.95) rotate(var(--r, 0deg)); }
  25% { transform: scale(1) rotate(var(--r, 0deg)); }
  80% { opacity: 1; transform: translateY(-2%) scale(1) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: translateY(-24%) scale(.8) rotate(var(--r, 0deg)); }
}
@keyframes stkFxSecoue { 0%, 100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 6px -2px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }
.stk-fx-onde { position: absolute; left: 50%; top: 42%; width: 100%; aspect-ratio: 2 / 1.1; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0;
  border: 3px solid #f7c948; box-shadow: 0 0 30px rgba(247, 201, 72, .7), inset 0 0 22px rgba(247, 201, 72, .45); animation: stkFxOnde 1s ease-out .22s forwards; }
.stk-fx-onde.b { animation-delay: .45s; }
@keyframes stkFxOnde { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
.stk-fx-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(60% 55% at 50% 46%, rgba(247, 201, 72, .42), rgba(247, 201, 72, .08) 55%, transparent 75%); animation: stkFxFlash .9s ease-out .12s forwards; }
@keyframes stkFxFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.stk-fx > .stk-eclats { top: 42%; }
.stk-fx > .stk-eclats i { width: 11px; height: 11px; left: -5px; top: -5px; animation-name: stkEclatFx; animation-duration: 1.2s; animation-delay: calc(.22s + var(--d, 0s)); }
.stk-fx > .stk-eclats i.c { width: 14px; height: 14px; }
@keyframes stkEclatFx { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * 2.4), calc(var(--dy) * 2.4 + 34px)) scale(1) rotate(200deg); } }
.stk-fx.fort > .stk-eclats i { animation-duration: 1.5s; }
@keyframes stkEclatFxFort { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * 3.4), calc(var(--dy) * 3.4 + 50px)) scale(1.2) rotate(260deg); } }
.stk-fx.fort > .stk-eclats i { animation-name: stkEclatFxFort; }
.stk-fx-qui { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; padding: 3px 12px; border-radius: 999px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(5, 9, 19, .88); border: 1.5px solid rgba(247, 201, 72, .6); color: #f7c948; font: 800 12.5px system-ui, sans-serif; }
.stk-fx.calme .stk-fx-s { animation: stkFxCalme 1.8s ease forwards; }
.stk-fx.calme .stk-fx-onde { display: none; }
@keyframes stkFxCalme { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stk-eclats, .stk-fx-onde, .stk-fx-flash { display: none; } .stk-fx-s { animation: stkFxCalme 1.8s ease forwards !important; } }
:root[data-theme=light] .stk-tab.on { color: #120d02; }
:root[data-theme=light] .stk-tab:not(.on) { color: color-mix(in srgb, var(--tc) 60%, #0f172a); background: color-mix(in srgb, var(--tc) 12%, #fff); }
:root[data-theme=light] .stk-cat-t { color: color-mix(in srgb, var(--tc) 60%, #0f172a); }
@media (max-width: 760px) { .stk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stk-tab { padding: 6px 9px; font-size: 11.5px; } }
/* onglets : 4 colonnes égales, toujours visibles (même dans le chat étroit du live) */
.stk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.stk-tab { min-width: 0; padding: 6px 4px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.stk-tab em { display: none; }

/* 29/10 (patron : « les autocollants du graphique aussi pour le chat ; les emojis, on les dégage ») — catalogue dessiné du graphique Sight dans le chat
   des lives (static/autocollants-chat.js, mêmes autocollants que la messagerie) : sélecteur en amande au-dessus du champ, image animée dans le fil */
.stk-ouvrir.stk-g svg { width: 22px; height: 22px; }
.lv-chat .ms .lvc-stkg { align-items: flex-end; }
.lvc .stkc { display: block; width: 104px; height: 104px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.lvc .stkc-cv { display: block; opacity: 0; transition: opacity .2s; } .lvc .stkc-cv.pret { opacity: 1; }
.lvc .stkc-pk { position: absolute; left: 10px; right: 10px; bottom: 64px; z-index: 30; max-height: min(420px, calc(100% - 90px)); display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px;
  border-radius: 30px / 24px; border: 1px solid rgba(247, 201, 72, .4); background: rgba(8, 11, 22, .97); box-shadow: 0 26px 60px -12px rgba(0, 0, 0, .7); animation: lvcStkIn .18s cubic-bezier(.2, .9, .3, 1); }
.lvc .stkc-pk[hidden] { display: none; }
@keyframes lvcStkIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.lvc .stkc-hd { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.lvc .stkc-hd b { flex: none; color: var(--gold, #f7c948); font-size: 13px; }
.lvc .stkc-q { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: #050913; color: #e3e7ef; font-size: 13px; outline: none; }
.lvc .stkc-q:focus { border-color: var(--gold, #f7c948); }
.lvc .stkc-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; flex: none; } .lvc .stkc-tabs::-webkit-scrollbar { display: none; }
.lvc .stkc-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: none; color: #9aa3b5; font: 700 12px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.lvc .stkc-tab em { font-style: normal; font-variant-numeric: tabular-nums; font-size: 10.5px; opacity: .75; }
.lvc .stkc-tab:hover { color: #e3e7ef; border-color: var(--gold, #f7c948); }
.lvc .stkc-tab.on { color: #1a1200; background: linear-gradient(135deg, #f7c948, #d4a63a); border-color: transparent; }
.lvc .stkc-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; padding: 2px; scrollbar-width: thin; }
.lvc .stkc-b { display: grid; place-items: center; padding: 3px; border: 0; border-radius: 28px / 22px; background: none; cursor: pointer; transition: transform .12s, background .12s; }
.lvc .stkc-b:hover { background: rgba(247, 201, 72, .1); transform: translateY(-2px) scale(1.05); } .lvc .stkc-b:active { transform: scale(.95); }
.lvc .stkc-b:focus-visible, .lvc .stkc-tab:focus-visible { outline: 2px solid var(--gold, #f7c948); outline-offset: 2px; }
.lvc .stkc-vide { grid-column: 1 / -1; margin: 20px 0; text-align: center; color: #9aa3b5; font-size: 13px; }
:root[data-theme=light] .lvc .stkc-pk { background: rgba(255, 252, 244, .98); } :root[data-theme=light] .lvc .stkc-q { background: #fff; color: #1a1a1a; }