.hype-control { display: inline-flex; flex-direction: column; justify-content: center; flex-shrink: 0; color: #8a929d; }
.hype-control-row { position: relative; display: inline-flex; align-items: center; }
.hype-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 4px; min-height: 34px; padding: 8px 10px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; color: #8a929d; font: inherit; font-size: 10px; font-weight: 800; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.hype-star { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.hype-button:hover { background: #f7f8fa; border-color: #cbd1d8; color: #737d8b; }
.hype-button.is-active { color: #ff4f9a; background: #fff5f9; border-color: #ffd1e2; }
.hype-button.is-active .hype-star { fill: currentColor; }
.hype-button:disabled { opacity: .6; cursor: wait; }
.hype-info { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; padding: 0; border: 0; background: transparent; color: #8a929d; font-size: 15px; line-height: 1; cursor: pointer; }
.hype-button:focus-visible, .hype-info:focus-visible { outline: 2px solid #ff4f9a; outline-offset: 2px; }
.hype-status { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 1000; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 16px; border-radius: 10px; background: #35303b; color: #fff; font-size: 13px; box-shadow: 0 4px 16px #0003; }
.profile-grid--story-cards .profile-grid-tile--hype { aspect-ratio: auto; overflow: visible; background: var(--secondary-bg, #fff); }
.profile-grid-tile--hype > a { display: block; text-decoration: none; color: inherit; }
.profile-grid-tile--hype .hype-control { display: inline-flex; padding: 6px 8px 28px; }
.profile-grid-tile--hype .hype-button { min-height: 32px; font-size: 10px; padding: 4px 8px; }
.situation-detail-page .situation-start-button { align-self: stretch; }
.situation-hype-banner { margin-top: 14px; }
.hype-control--banner { display: flex; width: 100%; }
.hype-control--banner .hype-control-row { display: flex; border: 1px solid var(--button-primary-bg, #f657b5); border-radius: 10px; background: #2b2b2b; }
.hype-control--banner .hype-control-row:has(.is-active) { border-color: var(--button-primary-bg, #f657b5); background: #2b2b2b; }
.hype-control--banner .hype-button { flex: 1; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 46px; padding: 12px 14px; border: 0; border-radius: 10px 0 0 10px; background: transparent; color: #ffffff; font-size: 13px; font-weight: 400; white-space: normal; text-align: left; }
.hype-control--banner .hype-star { flex-shrink: 0; color: var(--button-primary-bg, #f657b5); }
.hype-control--banner .hype-button:hover { background: #353033; }
.hype-control--banner .hype-button.is-active { color: #ffffff; }
.hype-control--banner .hype-info { position: static; transform: none; flex-shrink: 0; align-self: stretch; width: 44px; height: auto; border-radius: 0 10px 10px 0; color: #bdbdbd; }
.hype-control--banner .hype-info:hover { background: #353033; color: #ffffff; }
.hype-label-active, .hype-button.is-active .hype-label-default { display: none; }
.hype-button.is-active .hype-label-active { display: inline; }

.profile-actions { grid-template-columns: minmax(0, 1fr) 42px auto; align-items: stretch; margin-bottom: 22px; }
.profile-actions .hype-control { justify-content: stretch; }
.profile-actions .hype-control-row { height: 100%; }
.profile-actions .hype-button { height: 100%; }

.hype-info-popover { position: fixed; z-index: 1000; width: min(300px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.hype-info-popover[hidden] { display: none; }
.hype-info-popover .updated-casts-info-text + .updated-casts-info-text { margin-top: 8px; }

.hype-info-popover .updated-casts-info-text { color: #2a2328; }
.hype-info-popover .updated-casts-info-close { color: #737078; }

.hype-control--banner .hype-button:focus-visible, .hype-control--banner .hype-info:focus-visible { outline-color: var(--button-primary-bg, #f657b5); }