/* Страница стримера /partner/<код>, вход со страницы партнёрского кейса и карточка «Стрим и страница» в кабинете
   (streamer.js). Палитра темы: ночь #17131F/#1F1A2A, контур #120E1C, рамка #3A2F52, луна #F6EEDB, лиловый #C9BFE8,
   тыква #FFA048, ядовито-зелёный #8CFF3A. Без темы акцент золотой #ffd76a и синий сайта #3868C0. Рамки целыми 2 px,
   поля нажатия от 44 px, числа без переносов, анимации только transform и opacity. Скругления сайт гасит сам. */

#streamerView, #streamerCabinetCard, .st-case-entry {
    --st-ink: #120E1C; --st-night: #17131F; --st-night2: #1F1A2A; --st-line: #3A2F52; --st-line2: #4A3F62;
    --st-moon: #F6EEDB; --st-lilac: #C9BFE8; --st-muted: #ABA1C2; --st-acc: #ffd76a; --st-acc2: #3868C0; --st-plus: #6fe0a6; --st-err: #FF9A80;
}
body.season-halloween #streamerView, body.season-halloween #streamerCabinetCard, body.season-halloween .st-case-entry { --st-acc: #FFA048; --st-acc2: #8CFF3A; --st-plus: #8CFF3A; }

#streamerView .st-mono, #streamerCabinetCard .st-mono { font-family: 'DM Mono', 'Segoe UI', monospace; white-space: nowrap; }
#streamerView .st-muted, #streamerCabinetCard .st-muted { color: var(--st-muted); }
#streamerView .st-acc, #streamerCabinetCard .st-acc { color: var(--st-acc); }

/* ── страница ── */
.st-page { max-width: 1120px; margin: 0 auto; padding: 8px 0 48px; color: var(--st-moon); min-width: 0; }
.st-card {
    position: relative; box-sizing: border-box; min-width: 0; padding: 16px; margin: 0 0 12px;
    background: var(--st-night); border: 2px solid var(--st-line); box-shadow: inset 0 -3px 0 var(--st-ink);
}
.st-h { margin: 0 0 10px; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--st-lilac); line-height: 1.3 !important; }
.st-load, .st-empty { text-align: center; padding: 28px 16px; }
.st-empty .st-btn { margin-top: 12px; }
.st-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; align-items: start; }
.st-col { min-width: 0; }
/* телефон: одна колонка, сначала то, что живёт во время стрима: код, голосование, колёса */
@media (max-width: 900px) { .st-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .st-col { display: contents; } #stCode { order: 4; } #stCode.is-live { order: 0; } #stPoll { order: 1; } #stWheels { order: 2; } #stCase { order: 3; } #stPast { order: 5; } }

/* шапка */
.st-hero { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "ava main side" "ava body side"; gap: 4px 16px; align-items: center; }
.st-hero > .st-ava { grid-area: ava; align-self: start; } .st-hero-main { grid-area: main; align-self: end; } .st-hero-body { grid-area: body; min-width: 0; align-self: start; } .st-hero-side { grid-area: side; }
.st-intro { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--st-muted); max-width: 560px; }
/* partner v3: полоса хозяина страницы */
.st-owner { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; font-size: 14px; color: var(--st-lilac); border-color: var(--st-acc) !important; }
/* partner v3: код в кадре прямо сейчас */
#stCode.is-live { border-color: var(--st-acc); box-shadow: inset 0 -3px 0 var(--st-ink), 0 0 0 2px color-mix(in srgb, var(--st-acc) 35%, transparent); }
#stCode.is-live #stCodeInput { border-color: var(--st-acc) !important; }
#stCode .st-live { margin-right: 6px; }
@media (min-width: 901px) { .st-col { display: flex; flex-direction: column; } .st-col > .st-card { margin-bottom: 12px; } #stCode.is-live { order: -1; } }
.st-ava { position: relative; width: 88px; height: 88px; display: grid; place-items: center; background: var(--st-acc2); border: 2px solid var(--st-ink); box-shadow: 0 0 0 2px var(--st-line); overflow: hidden; }
.st-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.st-ava b { font-size: 38px; font-weight: 800; color: var(--st-ink); }
.st-hero-main { min-width: 0; }
.st-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); }
#streamerView .st-name { margin: 2px 0 4px; font-size: 30px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: .02em !important; overflow-wrap: anywhere; color: var(--st-moon); }
.st-bio { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: var(--st-moon); overflow-wrap: anywhere; }
.st-links { display: flex; flex-wrap: wrap; gap: 8px; }
.st-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--st-night2); border: 2px solid var(--st-line2); color: var(--st-moon) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.st-link:hover, .st-link:focus-visible { border-color: var(--st-acc); }
.st-ico { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; shape-rendering: crispEdges; }
.st-hero-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 220px; }
.st-hint { font-size: 12.5px; color: var(--st-muted); text-align: center; }
@media (max-width: 720px) {
    .st-hero { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "ava main" "body body" "side side"; gap: 12px; }
    .st-hero > .st-ava { align-self: center; } .st-hero-main { align-self: center; }
    .st-links .st-link { flex: 1 1 calc(50% - 4px); justify-content: center; }
    .st-ava { width: 64px; height: 64px; } .st-ava b { font-size: 28px; }
    #streamerView .st-name { font-size: 24px !important; }
    .st-hero-side { grid-column: 1 / -1; width: auto; }
}

/* кнопки и поля */
.st-btn { min-height: 44px !important; padding: 0 16px !important; font-weight: 800 !important; white-space: nowrap; }
.st-btn:disabled { opacity: .55; cursor: progress; }
.st-wide { width: 100%; margin-top: 12px; }
.st-follow { background: var(--st-acc) !important; color: var(--st-ink) !important; border: 2px solid var(--st-ink) !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.st-follow.is-on { background: var(--st-night2) !important; color: var(--st-acc) !important; border-color: var(--st-acc) !important; box-shadow: none; }
.st-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.st-row-end { justify-content: flex-end; align-items: center; }
.st-row-end .st-msg { flex: 1 1 160px; }
.st-input { min-height: 44px; font-size: 16px !important; box-sizing: border-box; }
.st-row .st-input { flex: 1 1 160px; min-width: 0; }
#stCodeInput { text-transform: uppercase; letter-spacing: .08em; font-family: 'DM Mono', monospace; }
.st-msg { display: block; min-height: 20px; margin-top: 6px; font-size: 14px; font-weight: 700; }
.st-msg.is-ok { color: var(--st-plus); }
.st-msg.is-err { color: var(--st-err); }

/* кейс */
.st-case { display: flex; align-items: center; gap: 14px; }
.st-case .st-cimg { width: 96px; height: 96px; object-fit: contain; flex: 0 0 96px; }
.st-case-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-case-main b { font-size: 18px; overflow-wrap: anywhere; }
.st-case-main span { white-space: nowrap; }

/* колёса */
.st-wlist, .st-plist, .st-opts, .st-winners, .st-cab-res { list-style: none; margin: 0; padding: 0; }
.st-wlist { display: flex; flex-direction: column; gap: 8px; }
.st-wrow, .st-past-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; min-height: 56px;
    padding: 8px 12px; background: var(--st-night2); border: 2px solid var(--st-line2); color: var(--st-moon); text-align: left; cursor: pointer; font: inherit;
}
.st-wrow:hover, .st-wrow:focus-visible, .st-past-head:hover, .st-past-head:focus-visible { border-color: var(--st-acc); }
.st-wcode { font-size: 18px; font-weight: 700; color: var(--st-acc); }
.st-wmeta { font-size: 14px; line-height: 1.35; min-width: 0; }
.st-wmeta b { white-space: nowrap; }
.st-go { font-size: 24px; color: var(--st-muted); line-height: 1; }
.st-plist { display: flex; flex-direction: column; gap: 10px; }
.st-past-head { grid-template-columns: auto minmax(0, 1fr); min-height: 44px; }
.st-past-head .st-muted { font-size: 13px; }
.st-winners { margin: 4px 0 0 0; display: flex; flex-direction: column; gap: 2px; }
.st-winners li { display: flex; gap: 10px; justify-content: space-between; padding: 4px 12px; font-size: 14px; min-width: 0; }
.st-wn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.st-wp { color: var(--st-plus); font-weight: 700; white-space: nowrap; }

/* голосование */
.st-poll-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 14px; }
.st-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--st-acc); }
.st-live::before { content: ''; width: 8px; height: 8px; background: var(--st-acc); animation: stBlink 1.2s steps(2, end) infinite; }
@keyframes stBlink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .st-live::before { animation: none; } }
#streamerView .st-q { font-size: 18px !important; letter-spacing: .01em !important; text-transform: none; color: var(--st-moon); margin-bottom: 12px; }
.st-opts { display: flex; flex-direction: column; gap: 8px; }
.st-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 6px 12px 6px 6px;
    background: var(--st-night2); border: 2px solid var(--st-line2); color: var(--st-moon); text-align: left; font: inherit; box-sizing: border-box; }
.st-optbtn { cursor: pointer; }
.st-optbtn:hover, .st-optbtn:focus-visible { border-color: var(--st-acc); }
.st-opt .st-oimg { width: 44px; height: 44px; object-fit: contain; }
.st-optm { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-optn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pct { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 16px; white-space: nowrap; min-width: 48px; text-align: right; }
.st-optbtn .st-pct { font-family: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--st-acc); padding: 8px 10px; border: 2px solid var(--st-acc); }
.st-bar { display: block; height: 8px; background: var(--st-ink); border: 2px solid var(--st-ink); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--st-acc2); transform-origin: 0 50%; transition: transform .4s ease-out; }
.st-opt.is-mine { border-color: var(--st-acc2); }
.st-opt.is-win { border-color: var(--st-acc); }
.st-opt.is-win .st-bar i { background: var(--st-acc); }
.st-opt.is-win .st-pct { color: var(--st-acc); }
.st-foot { margin: 10px 0 0; font-size: 14px; }

/* отписка из сообщения бота */
.st-ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-color: var(--st-acc); }
.st-ask > span:first-child { font-weight: 700; }
.st-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── вход со страницы кейса ── */
.st-case-entry {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; min-height: 56px; margin: 0 0 12px;
    padding: 8px 14px 8px 8px; background: var(--st-night); border: 2px solid var(--st-acc); box-shadow: inset 0 -3px 0 var(--st-ink);
    color: var(--st-moon); text-align: left; cursor: pointer; font: inherit; box-sizing: border-box;
}
.st-case-entry:hover, .st-case-entry:focus-visible { background: var(--st-night2); }
.st-ce-ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--st-acc); color: var(--st-ink); border: 2px solid var(--st-ink); }
.st-ce-ico .st-ico { width: 20px; height: 20px; }
.st-ce-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-ce-main b { font-size: 16px; font-weight: 800; }
.st-ce-main span { font-size: 13px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-case-entry .st-go { color: var(--st-acc); }

/* ── кабинет ── */
#streamerCabinetCard .st-cab { display: flex; flex-direction: column; gap: 12px; color: var(--st-moon); }
#streamerCabinetCard .st-cab-sec { padding: 14px; background: var(--st-night2); border: 2px solid var(--st-line); min-width: 0; }
#streamerCabinetCard .st-cab-h { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
#streamerCabinetCard .st-cab-sec > p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
#streamerCabinetCard .st-small { font-size: 12.5px !important; margin: 8px 0 0 !important; }
#streamerCabinetCard .st-a { color: var(--st-acc); overflow-wrap: anywhere; }
#streamerCabinetCard .st-lbl { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 700; color: var(--st-lilac); }
#streamerCabinetCard .st-lbl .st-muted { font-weight: 500; }
#streamerCabinetCard .st-lbl .st-input { display: block; width: 100%; margin-top: 4px; }
#streamerCabinetCard .st-inline, #streamerCabinetCard .st-row .st-lbl { margin: 0; }
#streamerCabinetCard .st-grow { flex: 1 1 200px; margin: 0; min-width: 0; }
#streamerCabinetCard .st-sel-s { width: auto !important; min-width: 120px; }
#streamerCabinetCard .st-ta { width: 100%; resize: vertical; min-height: 64px; }
#streamerCabinetCard .st-linkin { display: block; width: 100%; margin: 0 0 6px; }
#streamerCabinetCard .st-add { margin-top: 2px; }
#streamerCabinetCard .st-fs { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
#streamerCabinetCard .st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#streamerCabinetCard .st-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: var(--st-night); border: 2px solid var(--st-line2); cursor: pointer; font-size: 14px; font-weight: 700; }
#streamerCabinetCard .st-chip input { width: 18px; height: 18px; accent-color: var(--st-acc); margin: 0; }
#streamerCabinetCard .st-chip:has(input:checked) { border-color: var(--st-acc); }
#streamerCabinetCard .st-pollsel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
@media (max-width: 560px) { #streamerCabinetCard .st-pollsel { grid-template-columns: minmax(0, 1fr); } }
#streamerCabinetCard .st-cab-res { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
#streamerCabinetCard .st-cab-res li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--st-night); font-size: 14px; }
#streamerCabinetCard .st-btns { display: flex; flex-wrap: wrap; gap: 8px; }
#streamerCabinetCard .st-how { margin-top: 10px; }
/* partner v3: превью виджета в демо-режиме */
#streamerCabinetCard .st-obs-prev { margin-top: 10px; background: #000; border: 2px solid var(--st-line2); overflow: hidden; }
#streamerCabinetCard .st-obs-prev iframe { display: block; width: 100%; border: 0; background: transparent; }
#streamerCabinetCard .st-obs-prev[data-layout="corner"] iframe { height: 620px; }
#streamerCabinetCard .st-obs-prev[data-layout="bar"] iframe { aspect-ratio: 16 / 9; height: auto; }
#streamerCabinetCard .st-obs-prev[data-layout="vertical"] { max-width: 380px; }
#streamerCabinetCard .st-obs-prev[data-layout="vertical"] iframe { aspect-ratio: 9 / 16; height: auto; }
#streamerCabinetCard .st-small { font-size: 12.5px; margin: 6px 0 0; }
#streamerCabinetCard [hidden] { display: none !important; }
#streamerCabinetCard .st-how summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--st-acc); }
#streamerCabinetCard .st-how p { margin: 0; font-size: 13.5px; line-height: 1.45; }
#stObsUrl { font-size: 13px !important; }

/* иконка TOK, которую сайт ставит вместо слова: по высоте строки */
#streamerView .token-inline-icon, #streamerCabinetCard .token-inline-icon, .st-case-entry .token-inline-icon { width: 1.05em !important; height: 1.05em !important; vertical-align: -0.15em; margin: 0 0 0 2px; }