:root { color-scheme: dark; font-family: Inter,system-ui,sans-serif; background:#040912; color:#f4f8ff; } *{box-sizing:border-box} body{min-height:100vh;margin:0;background:radial-gradient(circle at 50% -10%,#123966 0%,transparent 42%),#040912}.shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:24px 0 60px}header,.card{border:1px solid rgba(103,181,255,.25);border-radius:18px;background:rgba(7,19,34,.9);box-shadow:0 25px 80px rgba(0,0,0,.32)}header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}.brand{font-weight:850;color:#71c7ff}.brand-beta{margin-left:8px;color:#b88cff;font-size:.72em;font-weight:950;letter-spacing:.08em}.dot{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:#4de2a1;box-shadow:0 0 16px #4de2a1}.card{padding:28px;margin-top:24px}h1{margin:0 0 10px;font-size:clamp(28px,6vw,44px)}p{color:#a7bdd3;line-height:1.55}button,.button{border:0;border-radius:10px;padding:11px 15px;background:#a970ff;color:#07111f;font:inherit;font-weight:850;cursor:pointer;text-decoration:none}button.secondary{background:#0d2843;color:#b5dcff;border:1px solid #22527d}.hidden{display:none!important}.muted{color:#7891a9}.topline{display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;background:#173d61;object-fit:cover}.discord-support{display:grid;place-items:center;width:36px;height:36px;border:1px solid #22527d;border-radius:9px;color:#b5dcff;text-decoration:none}.discord-support:hover{border-color:#8d72d7;background:#222044;color:#fff}.discord-support:focus-visible{outline:3px solid rgba(143,214,255,.82);outline-offset:2px}.discord-support svg{width:19px;height:19px}.dashboard{display:grid;gap:14px;margin-top:14px}.panel{border:1px solid rgba(103,181,255,.2);border-radius:14px;padding:14px;background:rgba(5,15,27,.8)}.channelbar{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:end}.tabs{display:flex;gap:8px;overflow-x:auto;padding:3px 0}.tab{flex:0 0 auto;min-width:150px;padding:11px 14px;text-align:left;background:#0b2239;color:#e6f3ff;border:1px solid #1d517d}.tab.active{background:#a970ff;color:#07111f;border-color:#c8a3ff}.tab>span{display:block;margin-top:2px;color:#79c6ff;font-size:.78rem}.tab.active span{color:#31105c}.add-area form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.add-area input{min-width:0}input{width:100%;padding:11px;border:1px solid #28567c;border-radius:9px;background:#061625;color:#fff;font:inherit}#tab-count,/* Schwebt oben in der Mitte, unabhaengig davon, wohin gerade gescrollt ist,
   und laesst Klicks durch. Frueher stand die Meldung unter der Kanalleiste und
   blieb dort bis zur naechsten stehen. */
#notice{position:fixed;z-index:860;top:22px;left:50%;max-width:min(560px,calc(100vw - 32px));margin:0;padding:11px 20px;border:1px solid rgba(105,188,255,.5);border-radius:999px;background:#0d2136;box-shadow:0 16px 44px rgba(0,0,0,.6);color:#dbeaff;font-size:.84rem;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,-14px);transition:opacity .26s ease,transform .26s ease;pointer-events:none}
#notice.is-shown{opacity:1;transform:translate(-50%,0)}
#notice.ok{border-color:rgba(94,227,166,.6);background:#0d3325;color:#a8f2cd}
#notice.error{border-color:rgba(255,150,150,.7);background:#57131b;color:#ffdede}
@media(prefers-reduced-motion:reduce){#notice{transition:none;transform:translate(-50%,0)}}.error{color:#ff9c9c}.ok{color:#61e8ae}.chat-stage{height:72vh;min-height:620px;padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #173852}.chat-head strong{color:#79c6ff}.chat-status{font-size:.8rem;color:#f5bd55}.chat-status.online{color:#4de2a1}.chat-empty{display:grid;place-items:center;color:#7891a9}.message-list{display:none;overflow-y:auto;padding:10px 14px;scrollbar-color:#28567c transparent}
.message-list>*{overflow-anchor:none}
/* Nur dieses Element am Listenende ist Scroll-Anker: Waechst oberhalb Inhalt (Emotes,
   Badges, Vorschauen laden nach), haelt der Browser die Position im selben
   Layout-Schritt. Beim Lesen weiter oben liegt der Anker ausserhalb des Sichtfelds
   und die Leseposition bleibt unveraendert. */
.message-list>.chat-scroll-anchor{overflow-anchor:auto;height:1px;margin-top:-1px}.message-list.active{display:block}.chat-message{padding:7px 8px;border-radius:7px;line-height:1.45;overflow-wrap:anywhere}.chat-message:hover{background:#0c2033}.message-meta{font-size:.82rem}.chat-time{margin-right:7px;color:#617d97}.chat-shared-source{display:inline-flex;width:1.32em;height:1.32em;margin:0 4px 0 0;vertical-align:-.34em}.chat-shared-source:empty{display:none}.chat-shared-source img{width:100%;height:100%;border:1px solid rgba(215,184,255,.78);border-radius:50%;object-fit:cover}.chat-badge{display:inline-block;margin-right:4px;padding:1px 4px;border-radius:4px;background:#25435d;color:#d8ebff;font-size:.65rem}.chat-user{font-weight:850}.chat-text{color:#e8f2fb}.chat-emote{height:28px;vertical-align:middle;margin:0 2px}.chat-emote.seventv-emote{height:30px}.seventv-user-badge-slot{display:inline-flex;align-items:center;width:1.125em;height:1.125em;margin-right:3px;vertical-align:-.26em}.seventv-user-badge-slot:empty{display:none}.seventv-user-badge{display:block;width:100%;height:100%;object-fit:contain}.chat-user.seventv-paint{display:inline;width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:0;background-color:transparent!important;background-clip:text!important;-webkit-background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}.chat-bits{display:inline-block;margin:0 4px 0 1px;padding:1px 5px;border:1px solid rgba(91,198,255,.45);border-radius:5px;background:rgba(25,105,153,.24);color:#8bd9ff;font-size:.72em;font-weight:850;vertical-align:.06em}.reply{margin:0 0 3px 54px;padding-left:8px;border-left:2px solid #49667e;color:#8098ad;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-message{margin:8px;padding:8px 10px;border-radius:7px;background:#39240b;color:#ffd08c}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:12px;border-top:1px solid #173852;background:#06111e}.chat-compose input:disabled{opacity:.55}@media(max-width:760px){.shell{width:100%;padding:0}.shell header{border-radius:0;border-width:0 0 1px}.dashboard{margin:8px}.channelbar{grid-template-columns:1fr}.panel{padding:10px}.topline span{display:none}.chat-stage{height:calc(100vh - 235px);min-height:430px}.chat-message{padding:8px 3px}.add-area{display:none}}
    .chat-stage{position:relative}.chat-live-end{position:absolute;z-index:28;right:12px;bottom:76px;padding:7px 11px;border:1px solid rgba(105,188,255,.42);border-radius:999px;background:rgba(8,32,53,.96);color:#b9e2ff;box-shadow:0 8px 24px rgba(0,0,0,.42);font-size:.72rem}.chat-live-end:hover{background:#153d60;color:#fff}.tab-wrap{position:relative;display:flex;flex:0 0 auto}
/* Der Name traegt die Farbe seines Kanals; auf dem ausgewaehlten Knopf liegt
   ohnehin schon Farbe, dort bleibt er neutral und lesbar. */
.tab strong{color:var(--kanalfarbe,inherit)}
.tab.active strong{color:#f4faff}
/* Ungleich breite Knoepfe lassen die Leiste unruhig wirken. Sie bekommen
   deshalb eine feste Breite mit Platz fuer etwa zwoelf Zeichen; laengere Namen
   enden mit Auslassungspunkten. Abgeschnitten wird nur der Name - der
   Live-Punkt dahinter bleibt sichtbar. */
.channelbar .tab>strong{display:flex;align-items:center;min-width:0}
/* Die Zeichnung statt eines Emojis: ueberall dieselbe Form, auch klein lesbar. */
.tab .tab-access-icon{flex:none;display:inline-flex;align-items:center;width:auto;height:auto;margin-left:5px;padding:0;border-radius:0;background:none;color:#ffc27a}
.tab .tab-access-icon svg{width:1.15em;height:1.15em;display:block}
.tab.active .tab-access-icon,.tab[data-platform="kick"].active .tab-access-icon{background:none;color:#ffd9a8}
.tab-name{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tab .channel-live-dot{flex:none}.tab-wrap .tab{padding-right:38px}.channel-live-dot{position:relative;display:none;width:8px;height:8px;margin-left:7px;border-radius:50%;background:#ff263f;box-shadow:0 0 7px rgba(255,38,63,.9);transform:translateZ(0);will-change:transform,opacity}.channel-live-dot::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(255,55,76,.72);border-radius:50%;opacity:0;transform:scale(.65);will-change:transform,opacity}.tab.is-live .channel-live-dot{display:inline-block;animation:channel-live-breathe 2.8s ease-in-out infinite}.tab.is-live .channel-live-dot::after{animation:channel-live-ring 2.8s cubic-bezier(.2,.65,.35,1) infinite}@keyframes channel-live-breathe{0%,100%{opacity:.82;transform:translateZ(0) scale(.94)}50%{opacity:1;transform:translateZ(0) scale(1.06)}}@keyframes channel-live-ring{0%{opacity:.58;transform:scale(.65)}70%,100%{opacity:0;transform:scale(1.65)}}@media(prefers-reduced-motion:reduce){.tab.is-live .channel-live-dot,.tab.is-live .channel-live-dot::after{animation:none}.tab.is-live .channel-live-dot::after{opacity:.25;transform:scale(1.25)}}.tab-remove{position:absolute;right:5px;top:50%;transform:translateY(-50%);padding:5px 8px;background:transparent;color:#91abc2;border:0}.tab-remove:hover{color:#ff8d9d;background:#3a1721}.badge-image{width:18px;height:18px;margin-right:3px;vertical-align:-4px}.chat-message.mentioned{background:rgba(169,112,255,.13);border-left:3px solid #a970ff}.chat-compose{grid-template-columns:auto minmax(0,1fr) auto}.emote-toggle{padding:9px 12px;background:#0d2843;color:#b5dcff;border:1px solid #22527d}.reply-preview{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:8px 10px;border:1px solid rgba(169,112,255,.38);border-left:4px solid #a970ff;border-radius:8px;background:#17192f;color:#a9c0d5;font-size:.82rem}.reply-preview-copy{display:grid;gap:2px;min-width:0}.reply-preview-copy strong{color:#d8bcff;font-size:.76rem}.reply-preview-copy span{display:-webkit-box;overflow:hidden;color:#e3edf7;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}.reply-preview button{flex:0 0 auto;padding:5px 9px;background:transparent;color:#ff9aaa}.mention-picker{position:absolute;z-index:35;right:72px;bottom:70px;left:58px;overflow:hidden;border:1px solid #315a7c;border-radius:10px;background:#071827;box-shadow:0 16px 45px rgba(0,0,0,.55)}.mention-picker button{display:flex;width:100%;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:0;background:transparent;color:#eaf5ff;text-align:left}.mention-picker button:hover,.mention-picker button.active{background:#193651}.mention-picker small{color:#9bb3c9}.rich-composer{min-height:43px;max-height:120px;overflow-y:auto;padding:10px 12px;border:1px solid #28567c;border-radius:9px;background:#061625;color:#fff;line-height:1.45;outline:0}.rich-composer:focus{border-color:#a970ff;box-shadow:0 0 0 3px rgba(169,112,255,.12)}.rich-composer:empty::before{content:attr(data-placeholder);color:#668199;pointer-events:none}.rich-composer.is-disabled{opacity:.55}.composer-inline-emote{display:inline-flex;align-items:center;vertical-align:middle;margin:0 2px}.composer-inline-emote img{width:28px;height:28px;object-fit:contain}.emote-picker{position:absolute;z-index:30;top:56px;right:12px;bottom:76px;left:12px;display:grid;grid-template-rows:auto auto auto minmax(80px,1fr) auto;gap:8px;height:auto;max-height:none;padding:10px;border:1px solid #244765;border-radius:10px;background:#06111e;box-shadow:0 20px 55px rgba(0,0,0,.58)}.emote-picker-head{display:flex;justify-content:space-between;align-items:center}.emote-picker-head strong{color:#e8f4ff}.emote-picker-head button{padding:3px 8px;background:transparent;color:#9bb3c9}.emote-search{padding:9px}.emote-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible}.emote-tabs button{min-width:0;padding:7px 6px;background:#0d2237;color:#a9bfd4;border:1px solid #1e425f;font-size:.76rem;white-space:normal;line-height:1.2}.emote-tabs button.active{background:#48257a;color:#f3eaff;border-color:#a970ff}.emote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;overflow-y:auto;align-content:start;min-height:0}.emote-group{grid-column:1/-1}.emote-group h3{margin:5px 0 7px;color:#dcecff;font-size:.8rem}.emote-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}.emote-option{display:grid;grid-template-rows:34px auto;place-items:center;gap:3px;min-width:0;min-height:58px;padding:5px;background:#0d1f32;color:#bcd0e4;border:1px solid #1c3d59}.emote-option:hover{background:#17324a}.emote-option img{max-width:34px;max-height:34px}.emote-option span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.65rem}.emote-option.locked{cursor:not-allowed;border-color:#4b3d54;background:#171521;color:#b8aebe}.emote-option.locked:hover{background:#171521}.emote-option.locked img{opacity:.42;filter:grayscale(.65)}.emote-option.locked span{color:#c4a9cf}.emote-state,.emote-permission{color:#91a9bf;font-size:.8rem}.emote-permission{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px;border-radius:7px;background:#291a3d}.emote-permission a{color:#d7bfff;font-weight:800}@media(max-width:760px){.emote-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.emote-tabs button{min-height:38px}.emote-picker{top:50px;right:8px;bottom:72px;left:8px;height:auto;max-height:none}.mention-picker{right:58px;bottom:68px;left:50px}}
    .automod-card{margin:8px 2px;padding:11px;border:1px solid #b96c24;border-left:4px solid #ff9f38;border-radius:10px;background:linear-gradient(135deg,rgba(100,47,10,.76),rgba(37,23,17,.94));box-shadow:0 7px 22px rgba(0,0,0,.22)}.automod-card.is-approved{border-color:#2e9c70;border-left-color:#4de2a1;background:rgba(13,66,48,.72)}.automod-card.is-denied,.automod-card.is-expired{border-color:#7a4751;border-left-color:#d56a7b;background:rgba(57,27,34,.75)}.automod-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#ffc77f;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.automod-status{color:#ffe0b5;letter-spacing:0;text-align:right}.automod-user{margin-top:7px;color:#fff;font-weight:850}.automod-reason{margin-left:6px;color:#d7a875;font-size:.74rem;font-weight:600}.automod-text{margin-top:5px;padding:8px;border-radius:7px;background:rgba(3,11,19,.6);color:#fff;overflow-wrap:anywhere}.automod-text a{color:#78caff;text-decoration:underline}.automod-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.automod-actions button{min-height:42px}.automod-allow{background:#43d59b;color:#041711}.automod-deny{background:#d95b70;color:#fff}.automod-actions button:disabled{cursor:default;opacity:.48}@media(max-width:760px){.automod-card{margin:8px 0;padding:10px}.automod-actions button{min-height:46px}}
    .message-actions-button{float:right;padding:2px 8px;background:transparent;color:#b8a0d8;font-size:.82rem}.message-actions-button:hover,.message-actions-button.is-pinned{color:#ffe09a;background:#332b20}.message-actions-modal{position:absolute;z-index:120;inset:0;display:grid;place-items:center;padding:16px;background:rgba(1,6,12,.78);backdrop-filter:blur(5px)}.message-actions-card{width:min(430px,calc(100% - 24px));max-height:calc(100% - 24px);overflow-y:auto;padding:16px;border:1px solid #315a7c;border-radius:16px;background:#071827;box-shadow:0 25px 80px rgba(0,0,0,.68)}.message-actions-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.message-actions-head h2{margin:0;color:#d7ecff;font-size:1.05rem}.message-actions-close{padding:5px 9px;background:transparent;color:#a9bdd1}.message-actions-copy{max-height:100px;overflow:auto;margin:10px 0;padding:9px;border-radius:8px;background:#04101c;color:#dcecff;overflow-wrap:anywhere}.message-actions-copy a{color:#78caff}.message-actions-pin{margin:10px 0;padding:10px;border:1px solid rgba(242,204,117,.28);border-radius:10px;background:rgba(89,62,12,.16)}.message-actions-pin label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;color:#ecd48d;font-size:.82rem}.message-actions-pin select{min-width:0;padding:9px;border:1px solid #315a7c;border-radius:8px;background:#0c2036;color:#fff}.message-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.message-actions-grid button{min-height:44px}.message-action-unpin{background:#72531c;color:#fff}.message-action-delete{background:#632638;color:#fff}@media(max-width:760px){.chat-message>.message-actions-button,.chat-message>.delete-button{display:none}.message-actions-modal{position:fixed;align-items:end;padding:10px}.message-actions-card{width:min(430px,100%);max-height:calc(100dvh - 20px);padding-bottom:max(16px,env(safe-area-inset-bottom));border-radius:17px}.message-actions-grid button{min-height:48px}}
    button.chat-user{display:inline;padding:0;border:0;border-radius:3px;background:transparent;font:inherit;font-weight:850;text-align:left;cursor:pointer}.chat-user:hover,.chat-user:focus-visible{text-decoration:underline;text-underline-offset:3px}.message-user-profile{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;margin:10px 0}.message-user-avatar{width:48px;height:48px;border-radius:50%;background:#153452 center/cover no-repeat}.message-user-profile strong{color:#fff}.message-user-details{margin-top:3px;color:#99b3ca;font-size:.78rem;line-height:1.45}.message-user-history{margin:10px 0;padding:9px;border:1px solid #1c405e;border-radius:9px}.message-user-history>strong{color:#9dcfff;font-size:.78rem}.message-user-history-item{margin-top:6px;color:#c7d9e8;font-size:.76rem;overflow-wrap:anywhere}.message-user-history-item time{margin-right:6px;color:#67839c}.message-user-status{display:inline-block;margin:2px 5px 2px 0;padding:3px 7px;border-radius:999px;background:#132e45;color:#c4dcf0}.message-user-status.yes{background:#173f32;color:#70efb9}.message-user-status.no{background:#35252a;color:#d8a9b1}
    .chat-message.is-pinned{box-shadow:inset 3px 0 #f0c65d;background:rgba(83,62,17,.24)}.chat-message.first-message{position:relative;margin-top:15px;border-left:2px solid #df45ff;border-radius:0 7px 7px 0;background:rgba(99,39,105,.33);padding-top:9px}.first-message-label{position:absolute;top:-14px;right:7px;color:#eb55ff;font-size:.59rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
    a{color:#79c6ff}.chat-text a,.reply a{color:#6fc6ff;text-decoration:underline;text-underline-offset:2px}.delete-button{float:right;padding:2px 7px;background:transparent;color:#789ab8;font-size:.72rem}.delete-button:hover{color:#ff91a1;background:#3a1721}#moderation-auth{display:inline-block;margin-top:5px;font-size:.84rem}.mobile-options-list a{display:block;padding:11px 15px;border:1px solid #6e4a99;border-radius:10px;background:#34204e;color:#e4ccff;font-weight:850;text-align:left;text-decoration:none}
    .chat-stage{grid-template-rows:auto auto minmax(0,1fr) auto}.chat-stage>.chat-head{grid-row:1}.chat-stage>.creator-hype{grid-row:2}.chat-stage>.chat-empty,.chat-stage>.message-list{grid-row:3}.chat-stage>.chat-compose{grid-row:4}.creator-hype{position:relative;margin:8px 10px 0;padding:10px 12px 12px;overflow:hidden;border:1px solid #bd5b39;border-radius:11px;background:linear-gradient(120deg,#5b2418,#501848 72%,#2d1957);box-shadow:0 8px 25px rgba(0,0,0,.28)}.creator-hype-head{display:flex;justify-content:space-between;gap:10px;color:#fff;font-size:.78rem;font-weight:900}.creator-hype-progress{height:7px;margin-top:8px;overflow:hidden;border-radius:99px;background:rgba(0,0,0,.42)}.creator-hype-progress span{display:block;height:100%;background:linear-gradient(90deg,#ffbd54,#ee3fa9,#b54eff)}.creator-hype-numbers{display:flex;justify-content:space-between;margin-top:5px;color:#ffd6bd;font-size:.68rem}.creator-hype-time{position:absolute;right:0;bottom:0;left:0;height:3px;background:rgba(0,0,0,.32)}.creator-hype-time span{display:block;height:100%;background:#ffca5c;transition:width 1s linear}.creator-event-card{margin:7px 2px;padding:10px 11px;border:1px solid #6a4196;border-left:4px solid #a970ff;border-radius:9px;background:linear-gradient(135deg,rgba(62,30,89,.82),rgba(15,25,42,.94))}.creator-event-card.points{border-color:#8750aa;border-left-color:#d977ff}.creator-event-card.hype{border-color:#a95735;border-left-color:#ff8b48}.creator-event-card.cheer{border-color:#3675a5;border-left-color:#53bbff}.creator-event-title{color:#d8baff;font-size:.71rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.creator-event-main{margin-top:4px;color:#fff;font-weight:800}.creator-event-copy{margin-top:3px;color:#b8cce0;font-size:.82rem;overflow-wrap:anywhere}/* Die Anleitung als Fenster ueber der App: der Stream laeuft weiter, man
   liest und hoert gleichzeitig. Der Inhalt ist die vorhandene Seite, nicht
   eine zweite Fassung davon. */
.hilfe-modal-card{width:min(1080px,100%);max-height:none;height:min(88dvh,940px);display:grid;grid-template-rows:auto minmax(0,1fr);padding:0;overflow:hidden}
.hilfe-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #173852}
.hilfe-modal-head strong{color:#dcecff;font-size:1rem}
.hilfe-modal-actions{display:flex;gap:8px}
.hilfe-modal-actions .secondary{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;font-size:.85rem;text-decoration:none}
#hilfe-modal-frame{width:100%;height:100%;border:0;background:#040912}
@media(max-width:760px){
  #hilfe-modal.pro-modal{padding:0}
  #hilfe-modal .hilfe-modal-card{width:100%;height:100dvh;border-radius:0;border-width:0}
  /* Auf dem Handy ist ein zweiter Tab kein sinnvoller Weg; der Platz gehoert
     dem Titel und dem Schliessen. */
  #hilfe-modal-extern{display:none}
  .hilfe-modal-head{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top,0px))}
}
.pwa-install-hint{margin:0!important;padding:10px 12px;border:1px solid rgba(103,181,255,.28);border-radius:10px;background:#0d2439;color:#bcd2e5!important;line-height:1.45}.pwa-install-hint strong{color:#fff}
    @media(max-width:760px){.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible;padding:0}.tab-wrap,.tab-wrap .tab{width:100%;min-width:0}.tab-wrap .tab{overflow:hidden}.tab-wrap .tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
    .chat-head-actions{display:flex;align-items:center;gap:9px}.chat-collaboration-status{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid rgba(191,111,255,.62);border-radius:7px;background:#421a62;color:#f1e9ff;font-size:.74rem;font-weight:850;white-space:nowrap}.chat-collaboration-avatars{display:flex;align-items:center;padding-left:3px}.chat-collaboration-avatars img{width:20px;height:20px;margin-left:-3px;border:1px solid #301046;border-radius:50%;background:#0a1929;object-fit:cover}.chat-collaboration-status .shared-chat-label,.chat-collaboration-status .stream-together{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-collaboration-status .stream-together{color:#bce5ff}.player-toggle{padding:7px 10px;background:#0d2843;color:#b5dcff;border:1px solid #22527d;font-size:.78rem}.player-toggle.active{background:#a970ff;color:#07111f}.player-toggle:disabled{cursor:default;opacity:.72}.channel-offline-info{display:flex;align-items:center;gap:10px;margin:8px 10px 0;padding:9px 11px;border:1px solid rgba(103,181,255,.22);border-radius:10px;background:linear-gradient(110deg,rgba(13,40,67,.9),rgba(24,25,52,.82));color:#a9c1d6;font-size:.76rem;line-height:1.35}.channel-offline-info strong{color:#e7f3ff}.channel-offline-icon{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#71889c;box-shadow:0 0 0 4px rgba(113,136,156,.12)}.channel-offline-info.chat-restriction-info{border-color:rgba(255,192,102,.38);background:linear-gradient(110deg,rgba(69,53,24,.92),rgba(43,33,31,.86));color:#f1cf9b}.channel-offline-info.chat-restriction-info .channel-offline-icon{background:#ffd16b;box-shadow:0 0 0 4px rgba(255,209,107,.13)}.chat-compose>.chat-restriction-info{grid-column:1/-1;margin:0}.player-panel{padding:0;overflow:hidden}.player-panel-head{display:flex;justify-content:space-between;align-items:center;gap:7px;--kopf-gap:7px;padding:9px 13px;border-bottom:1px solid #173852;color:#8dcfff;font-size:.82rem}.player-panel-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-panel-head>strong.is-live{color:#e9f4ff}
/* Die Farbe setzt der Kanal selbst; hier steht nur, was ohne sie gilt. */
.player-title-channel{color:#e9f4ff}
.player-viewers{margin-left:calc(-1 * var(--kopf-gap,7px))}.player-viewers-sep{margin:0 .35rem;color:#7d93a8;font-weight:400}.player-panel-head>strong.is-offline{color:#91a6b9}.player-panel-actions{display:flex;flex:0 0 auto;align-items:center;gap:5px}.player-panel-head button{padding:5px 9px;background:transparent;color:#a8bfd4}.player-mount{position:relative;width:100%;height:clamp(300px,48vw,620px);overflow:hidden;background:#02060c}.player-mount iframe{display:block;width:100%!important;height:100%!important;border:0;background:#02060c}.player-mount.is-loading::before{content:"";position:absolute;z-index:3;top:calc(50% - 22px);left:calc(50% - 22px);width:36px;height:36px;border:3px solid rgba(99,200,255,.24);border-top-color:#63c8ff;border-radius:50%;animation:player-loading-spin .78s linear infinite;pointer-events:none}.player-mount.is-loading::after{content:"Twitch-Player wird vorbereitet …";position:absolute;z-index:3;top:calc(50% + 28px);right:16px;left:16px;color:#b8d8ef;font-size:.82rem;font-weight:750;text-align:center;pointer-events:none}@keyframes player-loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.player-mount.is-loading::before{animation:none;border-top-color:#63c8ff}}.player-error{display:grid;height:100%;place-items:center;padding:24px;color:#ffb1b1;text-align:center}
    .player-panel-head .player-session{border:1px solid #27577e;background:#0c2943;color:#8fd2ff;font-size:.7rem}.twitch-session-modal{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:18px;background:rgba(1,7,14,.82);backdrop-filter:blur(9px)}.twitch-session-card{position:relative;width:min(440px,100%);padding:20px;border:1px solid rgba(169,112,255,.5);border-radius:17px;background:#071727;box-shadow:0 28px 90px rgba(0,0,0,.72)}.twitch-session-card h2{margin:0 34px 7px 0;color:#f1e9ff;font-size:1.15rem}.twitch-session-dismiss{position:absolute;top:9px;right:9px;padding:5px 9px;background:transparent;color:#9db1c4}.twitch-session-dismiss:hover{background:#162b3d;color:#fff}.twitch-session-card p{margin:0 0 14px;font-size:.86rem}.twitch-session-steps{margin:0 0 16px;padding-left:20px;color:#b6cadc;font-size:.82rem;line-height:1.55}.twitch-session-actions{display:grid;gap:8px}.twitch-session-actions button{width:100%}.twitch-session-finish{background:#a970ff;color:#07111f}.twitch-session-cancel{background:transparent!important;color:#8fa8bd!important}
    .obs-bridge-fields{display:grid;gap:9px;margin:12px 0}.obs-bridge-fields label{display:grid;gap:4px;color:#9fc3df;font-size:.75rem}.obs-bridge-url{font-size:.72rem}.obs-bridge-status{display:flex;align-items:center;gap:8px;margin:8px 0;padding:8px 10px;border:1px solid #294d6b;border-radius:9px;background:#081c2d;color:#9eb7cc;font-size:.8rem}.obs-bridge-status::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#6f879c}.obs-bridge-status.pending,.obs-bridge-status.offline,.obs-bridge-status.upgrade{border-color:#8c6a24;background:#322817;color:#ffd77b}.obs-bridge-status.pending::before,.obs-bridge-status.offline::before,.obs-bridge-status.upgrade::before{width:12px;height:12px;border:2px solid rgba(255,211,105,.3);border-top-color:#ffd369;background:transparent;animation:obs-bridge-waiting .85s linear infinite}.obs-bridge-status.online{border-color:#278865;background:#11382d;color:#6ff0bc}.obs-bridge-status.online::before{background:#4de2a1;box-shadow:0 0 10px rgba(77,226,161,.72)}@keyframes obs-bridge-waiting{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.obs-bridge-status.pending::before,.obs-bridge-status.offline::before,.obs-bridge-status.upgrade::before{animation:none;border-color:#ffd369;background:#ffd369}}
    .obs-bridge-card{width:min(520px,100%);max-height:calc(100dvh - 36px);overflow-y:auto}.obs-controls{margin:12px 0;padding:11px;border:1px solid #28516f;border-radius:11px;background:#071827}.obs-control-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.obs-control-head span{color:#8eabc2;font-size:.72rem}.obs-control-head strong{color:#e5f3ff;font-size:.85rem}.obs-stream-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:8px;border-radius:8px;background:#0a2135}.obs-stream-state{min-width:0;color:#9db5ca;font-size:.78rem}.obs-stream-state.live{color:#53e6aa}.obs-control-actions{display:flex;flex:0 0 auto;gap:5px}.obs-stream-action{padding:7px 10px;font-size:.76rem}.obs-stream-action.stop{background:#652132;color:#ffd4dc;border-color:#9c3e51}.obs-stream-action.transition{background:#69409b;color:#fff;border-color:#a970ff}.obs-scene-label{display:block;margin:11px 0 6px;color:#8eabc2;font-size:.72rem}.obs-scenes,.obs-audio-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:170px;overflow-y:auto}.obs-scenes button,.obs-audio-inputs button{min-width:0;padding:8px;background:#0d2843;color:#c5e4ff;border:1px solid #22527d;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.obs-scenes button.active{background:#6f3caf;color:#fff;border-color:#bd91ff}.obs-audio-inputs button.muted{background:#4c202c;color:#ffd1d8;border-color:#8e3d50}
    .obs-security-note{display:flex;align-items:flex-start;gap:5px;margin-top:2px;color:#75ddb1;font-size:.68rem;line-height:1.35}.obs-security-note.private-url{color:#e4bd70}.obs-security-note strong{color:inherit}
    .chat-user{margin-right:.32em}.pwa-update{position:fixed;z-index:500;right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));left:16px;display:flex;align-items:center;justify-content:center;gap:12px;width:min(520px,calc(100% - 32px));margin:auto;padding:12px 14px;border:1px solid rgba(103,181,255,.48);border-radius:12px;background:#0b2842;color:#dcefff;box-shadow:0 18px 48px rgba(0,0,0,.58)}.pwa-update span{line-height:1.35}.pwa-update button{flex:0 0 auto;padding:8px 11px}@media(max-width:520px){.pwa-update{align-items:stretch;flex-direction:column}.pwa-update button{width:100%}}

    /* Gleiche Viewport-Architektur wie im bestehenden MarcelToday LiveHub:
       eine feste App-Fläche, nur Chat und Emote-Inhalt scrollen. */
    html,body{width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}.shell{width:100vw;max-width:none;height:100vh;height:100dvh;margin:0;padding:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.shell>header{margin:0;border-radius:0;border-width:0 0 1px}.shell>#signed-in{min-height:0;overflow:hidden}.dashboard{height:100%;min-height:0;margin:0;padding:14px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;overflow:hidden}.channelbar{min-height:0}.chat-stage{height:auto;min-height:0;position:relative}.chat-compose{position:static;padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}.emote-picker{display:flex;flex-direction:column}.emote-grid{flex:1 1 0;overflow-anchor:none}
    .logout-icon,.mobile-channel-modal,.mobile-options-modal{display:none}.mobile-options-button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.mobile-options-button svg{width:21px;height:21px}/* Aus dem Highlight Center heraus liegen die Einstellungen darueber, damit
   das Center offen bleibt und man danach wieder darin steht. */
.mobile-options-modal.ueber-highlight{z-index:305}
.mobile-channel-modal,.mobile-options-modal{z-index:180;inset:0;padding:16px;background:rgba(2,8,15,.82);backdrop-filter:blur(10px);place-items:center}.mobile-channel-modal:not(.hidden),.mobile-options-modal:not(.hidden){position:fixed;display:grid}.mobile-channel-card,.mobile-options-card{width:min(390px,100%);padding:16px;border:1px solid rgba(103,181,255,.32);border-radius:16px;background:#071727;box-shadow:0 24px 70px rgba(0,0,0,.62)}.mobile-options-card{position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:22px;background:linear-gradient(155deg,#0a2034,#071421 70%);scrollbar-color:#28567c transparent}.mobile-channel-card h2,.mobile-options-card h2{margin:0 0 5px;font-size:1.05rem}.mobile-options-card h2{padding-right:52px;color:#f1f7ff;font-size:1.28rem}.mobile-channel-card p,.mobile-options-card p{margin:0 0 12px;font-size:.78rem}.mobile-options-intro{max-width:390px;color:#91abc2!important;line-height:1.5}.mobile-options-close{position:absolute;top:12px;right:12px;width:48px;height:48px;padding:0;border-radius:12px;background:#102b43!important;color:#b9d7ed!important;font-size:1.25rem}.mobile-options-sections{display:grid;gap:14px;margin-top:20px}.settings-section{padding:16px;border:1px solid rgba(103,181,255,.18);border-radius:14px;background:rgba(5,18,31,.68)}.settings-section h3{margin:0;color:#dcedfa;font-size:.9rem}.settings-section>p{margin:5px 0 13px;color:#7896ae;font-size:.76rem;line-height:1.5}.mobile-channel-card form,.mobile-options-list{display:grid;gap:10px}.mobile-channel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-channel-error{min-height:1.2em;margin:0!important;color:#ff9c9c!important}.mobile-options-list button,.mobile-options-list a{display:flex;align-items:center;width:100%;min-height:48px;padding:12px 14px;text-align:left}.mobile-options-list button.creator-connected{display:inline-flex;width:auto;min-height:auto;border-color:#278865;background:#12382d;color:#6ff0bc;padding:7px 12px;border-radius:999px;font-size:.76rem;font-weight:800;opacity:1}.mobile-options-list button:disabled{cursor:default;opacity:.72}.settings-account{border-color:rgba(255,103,122,.18)}.settings-account #logout{justify-content:center;color:#ffabb8;border-color:rgba(255,103,122,.28);background:rgba(101,22,37,.2)}@media(max-width:560px){.mobile-options-modal{padding:0;place-items:stretch}.mobile-options-card{width:100%;max-height:100dvh;min-height:100dvh;padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:0}.settings-section{padding:14px}}
    @media(min-width:1000px) and (orientation:landscape){body.player-open .dashboard{grid-template-columns:minmax(0,var(--livehub-player-column,1fr)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}body.player-open .channelbar{grid-column:1/-1;grid-row:1}body.player-open .player-panel{grid-column:1;grid-row:2;display:grid;grid-template-rows:auto minmax(0,auto);justify-self:stretch;align-self:start;width:100%;max-width:none;max-height:100%;min-width:0;min-height:0;margin:0;overflow:hidden}
body.player-open .player-mount{max-height:100%;min-height:0}body.player-open .player-mount{height:auto;min-height:0;aspect-ratio:16/9}body.player-open .chat-stage{grid-column:2;grid-row:2;width:100%;height:100%;max-width:none;min-width:0;min-height:0;max-height:100%;justify-self:stretch;align-self:stretch}.emote-picker{right:12px;left:auto;width:min(520px,calc(100% - 24px));height:min(640px,calc(100% - 84px));top:auto;bottom:72px}}
    @media(max-width:999px),(orientation:portrait){body{position:relative;inset:auto}.shell{position:relative;top:auto;right:auto;bottom:auto;left:auto;width:min(100vw,560px);height:100dvh;min-height:100dvh;max-height:100dvh;margin:0 auto;transform:none}.shell>header{min-height:48px;padding:2px 8px}.shell>header .brand{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem}.shell>header .dot{width:7px;height:7px;margin-right:5px}.shell>header .topline{gap:6px}.shell>header .avatar{width:32px;height:32px}.shell>header .account-name{display:none}.shell>header .mobile-options-button{width:44px;height:44px;display:grid;place-items:center;padding:0}.shell>#signed-in{display:flex;min-height:0}.dashboard{flex:1 1 0;width:100%;padding:4px 7px 7px;display:flex;flex-direction:column;gap:5px}.channelbar{flex:0 0 auto;display:block;padding:6px 7px}.channelbar .tabs{display:grid;grid-template-columns:repeat(var(--mobile-tab-columns,2),minmax(0,1fr));gap:5px;overflow:visible;padding:0}.channelbar .tab-wrap,.channelbar .tab{width:100%;min-width:0}.channelbar .tab{min-height:44px;padding:6px 27px 6px 8px;overflow:hidden;border-radius:9px;font-size:.82rem;line-height:1.05}.channelbar .tab>strong,.channelbar .tab>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channelbar .tab>span{margin-top:3px;font-size:.64rem}.channelbar .tab-remove{right:2px;padding:5px 6px}.channelbar #tab-count{display:none}.channelbar #moderation-auth{margin:5px 2px 1px;font-size:.7rem}.mobile-channel-modal:not(.hidden),.mobile-options-modal:not(.hidden){position:absolute;display:grid}.player-panel{flex:0 0 auto;margin:0;display:grid;grid-template-rows:auto auto}.player-mount{height:auto;aspect-ratio:16/9}.chat-stage{flex:1 1 0;height:auto!important;min-height:0!important}.chat-head{padding:10px}.chat-head-actions{gap:6px}.player-toggle{padding:6px 8px}.chat-compose{flex:0 0 auto}.emote-picker{position:fixed;z-index:90;top:var(--livehub-emote-top,108px);right:16px;bottom:var(--livehub-emote-bottom,78px);left:16px;width:auto;height:auto;max-height:none;overscroll-behavior:contain}.emote-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.emote-tabs button{min-height:38px}.mention-picker{right:58px;bottom:68px;left:50px}}
    @media(max-width:999px),(orientation:portrait){.channelbar{position:relative;padding:2px 0}.channelbar>div:first-child{min-width:0}.channelbar .tabs{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 7px 2px;overscroll-behavior-x:contain}.channelbar .tabs::-webkit-scrollbar{display:none}.channelbar .tab-wrap{flex:0 0 clamp(150px,45vw,188px);width:auto;scroll-snap-align:center}.channelbar .tab-wrap:only-child{flex-basis:100%}.channelbar .tab{width:100%;min-height:44px;padding:0 44px 0 10px;font-size:.86rem}.channelbar .tab>span{display:none}.channelbar .tab-remove{right:2px;width:44px;min-height:44px;padding:0}.message-list{padding:9px 10px}.chat-message{padding:8px 5px;line-height:1.5}.chat-compose{gap:7px;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}.rich-composer{min-height:46px;padding:11px 10px}.emote-toggle,#chat-send{min-width:46px;min-height:46px;padding:8px 10px}}
    @media(max-width:999px),(orientation:portrait){.channelbar>div:first-child::before,.channelbar>div:first-child::after{content:"";position:absolute;z-index:4;top:0;width:28px;height:48px;opacity:0;pointer-events:none;transition:opacity .15s ease}.channelbar>div:first-child::before{left:0;background:linear-gradient(90deg,rgba(5,15,27,.98),transparent)}.channelbar>div:first-child::after{right:0;display:grid;align-items:center;justify-content:end;padding-right:4px;background:linear-gradient(270deg,rgba(5,15,27,.98),transparent);color:#9fd7ff;font-size:1.15rem;font-weight:900;content:"›"}.channelbar>div:first-child.channel-scroll-left::before,.channelbar>div:first-child.channel-scroll-right::after{opacity:1}}
    .livehub-version-block{display:grid;gap:6px;margin-top:12px;padding:11px 12px;border:1px solid rgba(103,181,255,.22);border-radius:10px;background:rgba(8,22,38,.6)}.livehub-version-block button{justify-self:start}.livehub-changelog-body{max-height:60vh;overflow-y:auto;text-align:left}.livehub-changelog-entry+.livehub-changelog-entry{margin-top:16px;padding-top:14px;border-top:1px solid rgba(103,181,255,.18)}.livehub-changelog-entry h3{margin:0 0 8px;font-size:.95rem;color:#dcecff}.livehub-changelog-group{margin-top:10px}.livehub-changelog-group strong{font-size:.8rem;letter-spacing:.04em}.livehub-changelog-list{margin:5px 0 0;padding-left:19px;color:#b8cce0;font-size:.87rem;line-height:1.5}
    .chat-empty{padding:24px;text-align:center}.chat-empty-inner{max-width:340px}.chat-empty-title{display:block;margin-bottom:6px;color:#dcecff;font-size:1rem}.chat-empty-copy{margin:0;color:#7891a9;font-size:.86rem}.message-list.active.is-empty{display:none}
    /* The iOS keyboard only shrinks the Visual Viewport. Keep the mounted
       Twitch iframe alive off-screen while the mobile keyboard is open, so the
       chat and its input own the complete visible height without reloading
       or interrupting the player when the keyboard closes. */
    @media(max-width:999px),(orientation:portrait){.dashboard{position:relative}body.chat-composer-focused .dashboard{gap:5px}body.chat-composer-focused .chat-stage{position:absolute!important;z-index:75;top:var(--livehub-chat-focus-top,60px);right:8px;bottom:8px;left:8px;width:auto!important;height:auto!important;min-height:0!important;background:#05101d;box-shadow:0 18px 50px rgba(0,0,0,.72)}body.chat-composer-focused .message-list{overscroll-behavior:contain}}
    @media(max-width:760px){.reply{display:-webkit-box;margin:0 0 5px 0;padding:5px 8px;border-left-color:#a970ff;border-radius:0 6px 6px 0;background:rgba(169,112,255,.09);color:#b7c9da;line-height:1.35;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
    .role-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:11px 12px;border-radius:10px;background:#0b263d}.role-summary span{color:#8ca9c0;font-size:.72rem}.role-summary strong{color:#83d2ff;font-size:.82rem;text-align:right}.active-channel-summary{display:grid;gap:3px;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(91,181,255,.22);border-radius:10px;background:rgba(8,30,49,.74)}.active-channel-summary span{color:#8ca9c0;font-size:.7rem}.active-channel-summary strong{color:#e4f3ff;font-size:.84rem}.active-channel-summary small{color:#a7c3d8;font-size:.72rem;line-height:1.4}.role-highlights{display:grid;gap:7px;margin-bottom:10px}.role-highlight{padding-left:19px;color:#d4e4f1;font-size:.76rem;line-height:1.4;position:relative}.role-highlight::before{content:'✓';position:absolute;left:2px;color:#63e2aa;font-weight:900}.permission-details{border-top:1px solid rgba(89,159,216,.16);padding-top:9px}.permission-details summary{min-height:40px;display:flex;align-items:center;color:#8fabbe;font-size:.73rem;font-weight:800;cursor:pointer}.permission-details summary::marker{color:#69bfff}.permission-list{display:grid;gap:7px;padding-top:6px}.permission-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 10px;border:1px solid rgba(89,159,216,.16);border-radius:9px;color:#cbdce9;font-size:.76rem}.permission-row b{color:#63e2aa;font-size:.7rem}.permission-row.unavailable{opacity:.62}.permission-row.unavailable b{color:#8ba0b2}
    .permission-details summary{justify-content:space-between;list-style:none}.permission-details summary::-webkit-details-marker{display:none}.permission-details summary::after{content:'⌄';margin-left:12px;color:#69bfff;font-size:1.1rem;line-height:1;transform:rotate(0deg);transition:transform .16s ease}.permission-details[open] summary::after{transform:rotate(180deg)}
    .settings-accordion>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:-8px -8px;padding:8px;color:#dcedfa;font-size:.9rem;font-weight:850;list-style:none;cursor:pointer}.settings-accordion>summary::-webkit-details-marker{display:none}.settings-accordion>summary::after{content:'⌄';margin-left:12px;color:#69bfff;font-size:1.15rem;line-height:1;transform:rotate(0deg);transition:transform .16s ease}.settings-accordion[open]>summary::after{transform:rotate(180deg)}.settings-section-body{padding-top:15px}.settings-section-body>p:first-child{margin:0 0 13px;color:#7896ae;font-size:.76rem;line-height:1.5}.settings-accordion:not([open])>summary{color:#bcd0df}.settings-accordion[open]>summary{color:#f0f8ff}
    .chat-message>.message-actions-button{display:none!important;pointer-events:none}.chat-text.replyable{cursor:pointer}.chat-text.replyable:focus-visible{outline:2px solid #a970ff;outline-offset:3px;border-radius:3px}
    .message-actions-modal{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s linear 0s}.message-actions-modal.hidden{display:grid!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}@media(prefers-reduced-motion:reduce){.message-actions-modal,.message-actions-modal.hidden{transition:none}}
    .chat-message{font-size:var(--chat-font-size,16px)}.message-meta{font-size:1em}.chat-time{font-size:.82em}.chat-user,.chat-text{font-size:1em}.chat-emote{height:1.75em}.badge-image{width:1.125em;height:1.125em}.chat-badge{font-size:.65em}.chat-font-settings{display:grid;gap:12px}.chat-font-preview{display:grid;min-height:68px;place-items:center;padding:12px;border:1px solid rgba(103,181,255,.26);border-radius:10px;background:#0b2239;color:#e8f2fb;font-size:var(--chat-font-preview-size,16px);font-weight:750;line-height:1.4}.chat-font-settings-controls{display:flex;align-items:center;justify-content:center;gap:9px}.chat-font-settings-controls button{display:grid;min-width:48px;min-height:44px;place-items:center;padding:0;background:#0d2843;color:#cce8ff;border:1px solid #22527d}.chat-font-settings-controls output{min-width:54px;color:#c4dcf0;font-size:.82rem;text-align:center;font-variant-numeric:tabular-nums}.chat-live-end{right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}.app-boot-overlay{position:fixed;z-index:700;inset:0;display:grid;place-items:center;padding:24px;background:rgba(2,8,15,.84);backdrop-filter:blur(8px);transition:opacity .2s ease,visibility .2s ease}.app-boot-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.app-boot-card{display:grid;justify-items:center;gap:9px;width:min(330px,100%);padding:22px 20px;border:1px solid rgba(103,181,255,.36);border-radius:16px;background:linear-gradient(145deg,rgba(12,31,51,.98),rgba(5,13,24,.98));box-shadow:0 22px 60px rgba(0,0,0,.5);text-align:center}.app-boot-spinner{width:34px;height:34px;border:3px solid rgba(91,181,255,.22);border-top-color:#63c8ff;border-radius:50%;animation:livehub-boot-spin .78s linear infinite}.app-boot-card strong{color:#eef8ff;font-size:.95rem}.app-boot-card span{color:#9eb4c8;font-size:.78rem;line-height:1.45}@keyframes livehub-boot-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.app-boot-spinner{animation:none;border-top-color:#63c8ff}}@media(max-width:999px),(orientation:portrait){.chat-head{justify-content:flex-end;gap:6px}.chat-head>strong{display:none}.chat-head-actions{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:5px;overflow:hidden}.chat-status{flex:0 1 auto;min-width:0;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-collaboration-status{flex:1 1 auto;min-width:0;gap:4px;overflow:hidden;padding:3px 6px}.chat-collaboration-avatars{flex:0 0 auto;padding-left:0}.chat-collaboration-avatars img:nth-child(n+4){display:none}.chat-collaboration-status .shared-chat-label{flex:1 1 auto;min-width:0}.chat-collaboration-status .stream-together{flex:0 1 auto;min-width:0}.player-toggle{white-space:nowrap}}@media(max-width:360px){.chat-collaboration-avatars img:nth-child(n+3){display:none}}
    .chat-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-context{flex:0 1 auto;min-width:0;overflow:hidden;padding:4px 7px;border:1px solid #315a7c;border-radius:999px;color:#b8dfff;font-size:.68rem;font-weight:850;line-height:1;white-space:nowrap;text-overflow:ellipsis}.channel-context.broadcaster{border-color:#986bda;background:#30214c;color:#e2caff}.channel-context.moderator{border-color:#368a6f;background:#153b32;color:#8bf0c2}.channel-context.viewer{border-color:#315a7c;background:#0d2843;color:#b8dfff}.creator-setup-status{margin:9px 2px 0!important;color:#9ab4ca!important;font-size:.76rem!important;line-height:1.45}
    :root{--livehub-safe-top:env(safe-area-inset-top,0px);--livehub-safe-right:env(safe-area-inset-right,0px);--livehub-safe-bottom:env(safe-area-inset-bottom,0px);--livehub-safe-left:env(safe-area-inset-left,0px)}@media(display-mode:standalone){html,body,.shell{height:100vh;min-height:100vh;max-height:100vh}}@media(max-width:999px),(orientation:portrait){.shell{padding-right:var(--livehub-safe-right);padding-left:var(--livehub-safe-left)}.shell>header{padding:calc(2px + var(--livehub-safe-top)) 8px 2px}.chat-compose{padding-bottom:max(10px,var(--livehub-safe-bottom))}body.chat-composer-focused .shell{position:fixed;top:var(--livehub-visual-top,0px);right:auto;bottom:auto;left:50%;height:var(--livehub-visual-height,100dvh);min-height:var(--livehub-visual-height,100dvh);max-height:var(--livehub-visual-height,100dvh);margin:0;transform:translateX(-50%)}}
    .mobile-options-close{top:calc(12px + var(--livehub-safe-top))}.alert-player{position:absolute;z-index:42;top:50%;right:14px;left:14px;display:grid;gap:4px;padding:14px 16px 12px;border:1px solid rgba(206,142,255,.55);border-left:4px solid #d477ff;border-radius:14px;background:linear-gradient(135deg,rgba(62,30,89,.97),rgba(8,25,43,.98));box-shadow:0 18px 55px rgba(0,0,0,.5);transform:translateY(-50%);pointer-events:none}.alert-player-type{color:#e8c8ff;font-size:.7rem;font-weight:900;letter-spacing:.08em}.alert-player-title{color:#fff;font-size:1.08rem;font-weight:850}.alert-player-message{color:#c6d9ec;font-size:.88rem;overflow-wrap:anywhere}.alert-player-progress{height:4px;overflow:hidden;margin-top:7px;border-radius:999px;background:rgba(255,255,255,.16)}.alert-player-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ffca5c,#d477ff,#5bc8ff)}
    .channel-context{cursor:pointer}.channel-context:hover,.channel-context:focus-visible{filter:brightness(1.15);outline:2px solid rgba(164,207,255,.65);outline-offset:2px}.creator-mode-toggle{min-height:32px;padding:5px 8px;background:#30214c!important;color:#e7d6ff!important;border:1px solid #986bda!important;font-size:.72rem}.creator-mode-panel{display:none;gap:10px;padding:12px}.creator-mode-head{display:flex;align-items:center;gap:7px;min-width:0}.creator-mode-head strong{overflow:hidden;color:#e9dcff;font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.creator-mode-head span{color:#5dbdff;font-size:.62rem;font-weight:900;letter-spacing:.12em}.creator-mode-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.creator-mode-metric{display:grid;gap:3px;min-width:0;padding:8px 9px;border:1px solid rgba(105,176,239,.18);border-radius:10px;background:rgba(13,34,55,.5)}.creator-mode-metric span{overflow:hidden;color:#7792ac;font-size:.59rem;font-weight:850;letter-spacing:.08em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.creator-mode-metric strong{overflow:hidden;color:#edf7ff;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.creator-mode-metric small{overflow:hidden;color:#8aa3b9;font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}.creator-mode-metric.ok strong{color:#5ce1ae}.creator-mode-metric.warning strong{color:#ffc65c}.creator-live-control{border:1px solid rgba(93,163,222,.45);border-radius:9px;background:rgba(7,24,39,.7)}.creator-live-control>summary{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 10px;color:#d3edff;font-size:.76rem;font-weight:800;cursor:pointer;list-style:none}.creator-live-control>summary::-webkit-details-marker{display:none}.creator-live-control>summary::after{content:'⌄';display:inline-block;color:#8fcaff;font-size:1.15rem;line-height:1;transform:translateY(-2px)}.creator-live-control[open]>summary{border-bottom:1px solid rgba(93,163,222,.26);background:rgba(17,49,75,.48)}.creator-live-control[open]>summary::after{transform:translateY(2px) rotate(180deg)}.creator-live-control .obs-controls{margin:7px}.creator-live-control-note{margin:0;padding:0 9px 8px;color:#8ea9bf;font-size:.72rem;line-height:1.35}.control-room-workspace{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}.control-room-panel{display:grid;align-content:start;gap:7px;min-width:0;padding:9px;border:1px solid rgba(99,169,232,.16);border-radius:11px;background:rgba(8,25,42,.66)}.control-room-panel-head{display:grid;gap:2px}.control-room-panel-head span{color:#56b9ff;font-size:.58rem;font-weight:900;letter-spacing:.13em}.control-room-panel-head strong{color:#e8f3ff;font-size:.76rem}.control-room-panel p{margin:0;color:#8da8c0;font-size:.68rem;line-height:1.4}.control-room-live{grid-column:1/-1}.control-room-live .creator-live-control{margin-top:1px}body.creator-view .channelbar{display:none}body.creator-view .creator-mode-panel{display:grid}@media(min-width:1000px) and (orientation:landscape){body.desktop-control-room .shell{width:100%;height:100vh;max-height:100vh;margin:0;padding:0;grid-template-rows:58px minmax(0,1fr)}body.desktop-control-room .shell>header{min-height:58px;padding:9px 16px;border-width:0 0 1px;border-radius:0;box-shadow:none;border-color:rgba(100,173,243,.2);background:rgba(4,12,21,.96)}body.desktop-control-room .dashboard{height:100%;padding:0;gap:0;grid-template-columns:minmax(0,var(--livehub-player-column,64fr)) minmax(520px,36fr);grid-template-rows:var(--livehub-player-row,minmax(310px,1.65fr)) minmax(0,1fr);background:linear-gradient(145deg,#06111e,#02060b 72%)}body.desktop-control-room .creator-mode-panel{display:grid;grid-column:1;grid-row:2;min-width:0;min-height:0;overflow:auto;border:0;border-top:1px solid rgba(92,162,224,.18);border-right:1px solid rgba(92,162,224,.18);border-radius:0;background:linear-gradient(180deg,rgba(4,16,29,.96),rgba(3,10,18,.99))}body.desktop-control-room .player-panel{display:grid;grid-column:1;grid-row:1;grid-template-rows:minmax(0,1fr);align-self:stretch;width:100%;height:100%;min-height:0;margin:0;border:0;border-right:1px solid rgba(92,162,224,.18);border-radius:0;background:#000}body.desktop-control-room .player-panel-head{position:absolute;z-index:3;top:0;right:0;left:0;padding:7px 10px;border-bottom:1px solid rgba(92,162,224,.16);background:rgba(3,11,19,.72);backdrop-filter:blur(10px)}body.desktop-control-room .player-mount{height:100%;min-height:0;aspect-ratio:auto}body.desktop-control-room .chat-stage{display:grid;grid-column:2;grid-row:1/3;align-self:stretch;width:100%;height:100%!important;min-height:0;border:0;border-radius:0;background:rgba(2,8,14,.94)}body.desktop-control-room .chat-head{min-height:54px;padding:10px 13px;background:rgba(5,16,28,.94);border-bottom-color:rgba(94,169,238,.15)}body.desktop-control-room .chat-head::before{content:'LIVE CHAT';position:absolute;top:11px;left:13px;color:#5dbdff;font-size:.58rem;font-weight:900;letter-spacing:.14em}body.desktop-control-room .chat-head>strong{align-self:end;font-size:.88rem}body.desktop-control-room .chat-head-actions{align-self:center}body.desktop-control-room .message-list{padding:10px 12px}body.desktop-control-room .chat-compose{background:rgba(5,14,24,.985);border-top-color:rgba(96,169,235,.15)}body.desktop-control-room.creator-view .channelbar{display:none}}@media(max-width:560px){.creator-mode-panel{padding:7px 8px}.creator-mode-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.creator-mode-toggle{width:40px;min-width:40px;padding:0;font-size:0}.creator-mode-toggle::before{content:'🎛';font-size:.9rem}}
    .notice-message.chat-subscription-notification{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;margin:5px 2px;padding:9px 12px 9px 10px;border:1px solid rgba(255,255,255,.1);border-left:4px solid var(--twitch-channel-color,#91ff00);border-radius:0 8px 8px 0;background:#27272d;color:#f4f6f8;font-size:calc(var(--chat-font-size,16px)*.84);line-height:1.4}.chat-subscription-notification-icon{display:grid;width:28px;height:28px;place-items:center;color:#f5f7fa}.chat-subscription-notification-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.chat-subscription-notification-copy{min-width:0;overflow-wrap:anywhere}.chat-subscription-notification-copy strong{color:#fff;font-weight:850}
    @media(min-width:1000px) and (orientation:landscape){
      body.desktop-control-room .creator-mode-panel{position:relative;z-index:31;min-height:0;overflow-x:hidden!important;overflow-y:auto!important}
      body.desktop-control-room .control-room-live{position:static}
      
      
      
      
      
    }
    .mobile-live-ops-button,.mobile-creator-button,.mobile-live-ops-modal{display:none}
    @media(max-width:999px),(orientation:portrait){
      .shell>header #account{align-items:center}.shell>header .mobile-live-ops-button,.shell>header .mobile-creator-button,.shell>header .player-toggle,.shell>header .mobile-options-button,.shell>header .discord-support{display:grid;flex:0 0 44px;align-self:center;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0!important;border-radius:0!important;background:transparent!important;color:#bde1ff;box-shadow:none!important;font-size:1.15rem;line-height:1}.shell>header .player-toggle{font-size:0}.shell>header .player-toggle .player-toggle-label{display:none}.shell>header .player-toggle .player-toggle-icon{width:20px;height:20px}
      .mobile-live-ops-modal:not(.hidden){position:fixed;z-index:220;inset:0;display:grid;align-items:end;padding:12px;background:rgba(1,7,14,.68);backdrop-filter:blur(8px)}.mobile-creator-status{display:none}body.mobile-creator-view .channelbar{display:none}body.mobile-creator-view .mobile-creator-status{display:flex;flex:0 0 auto;align-items:center;gap:7px;overflow-x:auto;min-height:32px;padding:7px 10px;border:1px solid rgba(82,165,235,.24);border-radius:8px;background:rgba(5,17,29,.96);color:#b7cee3;scrollbar-width:none;white-space:nowrap;font-size:.66rem;font-weight:850;letter-spacing:.035em;text-transform:uppercase}body.mobile-creator-view .mobile-creator-status::-webkit-scrollbar{display:none}.mobile-creator-status .live{color:#ff6474}.mobile-creator-status .ok{color:#55e7a2}.mobile-creator-status .muted{color:#8098ae}.mobile-creator-status i{color:#466179;font-style:normal}
      .mobile-live-ops-sheet{width:min(560px,100%);max-height:min(82dvh,720px);margin:0 auto;overflow:auto;padding:16px;border:1px solid rgba(82,165,235,.3);border-radius:18px;background:rgba(5,17,29,.985);box-shadow:0 24px 70px rgba(0,0,0,.58);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
      .mobile-live-ops-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:12px}.mobile-live-ops-head>div{display:grid;gap:3px;min-width:0}.mobile-live-ops-head strong{color:#f2f8ff;font-size:1.1rem}.mobile-live-ops-head span{overflow:hidden;color:#8198ae;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.mobile-live-ops-close{width:44px;height:44px;padding:0;background:transparent!important;color:#c5dced!important;font-size:1.7rem}
      .mobile-live-ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mobile-live-ops-card{display:grid;align-content:center;gap:4px;min-width:0;min-height:82px;padding:11px;border:1px solid rgba(83,153,213,.18);border-radius:12px;background:rgba(11,31,49,.74)}.mobile-live-ops-card span{color:#7892aa;font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.mobile-live-ops-card strong{overflow:hidden;color:#e7f4ff;font-size:.95rem;text-overflow:ellipsis;white-space:nowrap}.mobile-live-ops-card strong.ok{color:#51e49a}.mobile-live-ops-card strong.warning{color:#f2bf58}.mobile-live-ops-card small{overflow:hidden;color:#8ca0b4;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.mobile-live-ops-card.wide{grid-column:1/-1}
      .mobile-live-ops-action{width:100%;min-height:48px;margin-top:10px}.mobile-live-ops-note{margin:10px 2px 0;color:#8ca0b4;font-size:.72rem;line-height:1.45}
    }
    @media(min-width:1000px) and (orientation:landscape){
      body.desktop-control-room .dashboard{grid-template-rows:var(--livehub-player-row,minmax(310px,1.65fr)) minmax(0,1fr)}
      body.desktop-control-room .player-panel{position:relative}
      body.desktop-control-room .player-mount>*,body.desktop-control-room .player-mount iframe{width:100%!important;height:100%!important;min-height:0!important}
    }
    /* Einstellungen: eine klare, zusammenhängende Oberfläche auf Mobile und Desktop. */
    .mobile-options-card{width:min(1040px,calc(100vw - 48px));max-height:min(860px,calc(100dvh - 48px));padding:30px;background:linear-gradient(145deg,#0b253c,#06121f 72%);border-color:rgba(109,190,255,.36)}
    .settings-header{margin:0 58px 0 0;padding:2px 0 20px;border-bottom:1px solid rgba(112,186,244,.2)}@media(max-width:999px),(orientation:portrait){.mobile-options-card.settings-drilldown .settings-header{padding-left:68px}.mobile-options-card.settings-drilldown .settings-kicker{display:none}}
    .settings-kicker{display:block;margin-bottom:5px;color:#65c7ff;font-size:.66rem;font-weight:900;letter-spacing:.16em}
    .settings-header h2{margin:0;color:#f4f9ff;font-size:clamp(1.35rem,2.4vw,1.8rem)}
    .settings-header .mobile-options-intro{max-width:620px;margin:7px 0 0;color:#a7c0d4!important;font-size:.84rem;line-height:1.5}
    .mobile-options-sections{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;margin-top:18px}
    .settings-section{min-width:0;padding:18px;border-color:rgba(108,182,242,.22);border-radius:15px;background:linear-gradient(145deg,rgba(11,35,56,.94),rgba(5,18,31,.88));box-shadow:inset 0 1px rgba(191,230,255,.04)}
    .settings-section h3{display:flex;align-items:center;gap:8px;color:#edf7ff;font-size:.96rem}
    .settings-section h3::before{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(104,190,252,.28);border-radius:8px;background:#102e49;color:#9bdbff;font-size:.78rem}
    .settings-channels h3::before{content:'#'}.settings-creator h3::before{content:'◉';color:#c9adff;border-color:rgba(183,129,255,.34);background:#2c2148}.settings-app h3::before{content:'▶'}.settings-account h3::before{content:'◌';color:#ffb7c2;border-color:rgba(255,130,148,.28);background:#3a1c2a}.settings-access h3::before{content:'✓';color:#75edb4;border-color:rgba(91,224,165,.28);background:#153a31}.settings-display h3::before{content:'A';font-weight:900}
    .settings-section>p{min-height:2.6em;margin:7px 0 15px;color:#91abc0;font-size:.79rem;line-height:1.5}
    .settings-access{grid-column:1/-1;background:linear-gradient(120deg,rgba(9,38,61,.96),rgba(8,23,39,.92))}.settings-account{border-color:rgba(255,120,139,.22)}
    .mobile-options-list{gap:8px}.mobile-options-list button,.mobile-options-list a{min-height:50px;border-radius:10px}.mobile-options-list button.secondary{background:#0e304e;color:#d5edff}.mobile-options-list button.secondary:hover{background:#164261}
    .role-summary,.active-channel-summary{margin-bottom:9px}.role-highlights{margin-bottom:0}.permission-details{margin-top:12px}.chat-font-preview{min-height:76px}
    .tab-access-icon{display:inline-grid;place-items:center;width:1.35em;height:1.35em;margin-left:7px;border-radius:5px;background:rgba(169,112,255,.17);font-size:.78em;font-style:normal;vertical-align:.05em}.tab.active .tab-access-icon{background:rgba(49,16,92,.15)}
    .tab-remove:focus-visible{color:#ff8d9d;background:#3a1721;outline:2px solid rgba(255,141,157,.64);outline-offset:1px}@media(hover:hover) and (pointer:fine){.tab-remove:hover{color:#ff8d9d;background:#3a1721}}
    @media(max-width:999px),(orientation:portrait){.mobile-options-card{width:100%;max-width:560px;max-height:100dvh;min-height:100dvh;padding:calc(20px + var(--livehub-safe-top)) 16px calc(22px + var(--livehub-safe-bottom));border:0;border-radius:0}.settings-header{margin-right:54px;padding-bottom:16px}.settings-header .mobile-options-intro{font-size:.8rem}.mobile-options-sections{grid-template-columns:1fr;gap:10px;margin-top:14px}.settings-section{padding:15px}.settings-section>p{min-height:0;margin-bottom:12px}.settings-access{grid-column:auto}.mobile-options-close{top:calc(12px + var(--livehub-safe-top));right:10px}.tab-remove{-webkit-tap-highlight-color:transparent}.tab-remove:hover{color:#91abc2;background:transparent}}
    /* Einstellungsnavigation: Mobil kompakt, Desktop mit Seitenleiste. */
    .settings-navigation{display:none}.settings-footer{margin-top:14px;padding-top:12px;border-top:1px solid rgba(112,186,244,.2)}.settings-footer #logout{display:flex;width:100%;min-height:50px;align-items:center;justify-content:center;color:#ffbdc6;border-color:rgba(255,130,148,.34);background:rgba(104,28,44,.34)}
    .settings-section{padding:0;overflow:hidden}.settings-accordion{margin:0;border:0;background:transparent}.settings-accordion>summary{display:flex;align-items:center;min-height:58px;margin:0;padding:13px 15px;color:#eef8ff;font-size:.92rem;font-weight:850;list-style:none;cursor:pointer}.settings-accordion>summary::-webkit-details-marker{display:none}.settings-accordion>summary::before{display:grid;place-items:center;width:27px;height:27px;margin-right:9px;border:1px solid rgba(104,190,252,.28);border-radius:8px;background:#102e49;color:#9bdbff;font-size:.78rem}.settings-channels .settings-accordion>summary::before{content:'#'}.settings-creator .settings-accordion>summary::before{content:'◉';color:#c9adff;border-color:rgba(183,129,255,.34);background:#2c2148}.settings-app .settings-accordion>summary::before{content:'▶'}.settings-access .settings-accordion>summary::before{content:'✓';color:#75edb4;border-color:rgba(91,224,165,.28);background:#153a31}.settings-display .settings-accordion>summary::before{content:'A';font-weight:900}.settings-accordion>summary::after{content:'⌄';margin-left:auto;color:#75c8ff;font-size:1.25rem;line-height:1;transition:transform .16s ease}.settings-accordion[open]>summary{border-bottom:1px solid rgba(112,186,244,.15);background:rgba(15,47,74,.5)}.settings-accordion[open]>summary::after{transform:rotate(180deg)}.settings-section-body{padding:0 15px 16px}.settings-section-body>p:first-child{min-height:0;margin:0 0 13px;color:#91abc0;font-size:.79rem;line-height:1.5}
    @media(min-width:1000px) and (orientation:landscape){.mobile-options-card{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;overflow:hidden}.settings-header{grid-column:1/-1;margin:0;padding:3px 58px 22px 0}.settings-navigation{display:grid;grid-column:1;grid-row:2;align-content:start;gap:6px;padding-top:4px}.settings-navigation button{display:flex;align-items:center;gap:10px;min-height:45px;padding:9px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9eb6c9;text-align:left;font-size:.82rem}.settings-navigation button span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#102b43;color:#8fd4ff;font-weight:900}.settings-navigation button:hover{background:#102a43;color:#e8f5ff}.settings-navigation button.active{border-color:rgba(113,192,255,.34);background:#173c5e;color:#fff}.settings-navigation button.active span{background:#a970ff;color:#111126}.mobile-options-sections{display:block;grid-column:2;grid-row:2;min-height:0;max-height:none;margin:0;padding:4px 4px 4px 0;overflow-y:auto}.settings-section{display:none;min-height:100%;padding:22px}.settings-section.is-settings-active{display:block}.settings-section .settings-accordion>summary{display:flex}.settings-section .settings-section-body{padding:0}.settings-section-body>p:first-child{max-width:660px;margin-bottom:19px;font-size:.86rem}.settings-footer{grid-column:1;grid-row:3;margin:0;padding:16px 0 0;border-top:1px solid rgba(112,186,244,.18)}.settings-footer #logout{min-height:44px;font-size:.78rem}.settings-access{grid-column:auto}.role-summary,.active-channel-summary{max-width:760px}.chat-font-settings{max-width:620px}.chat-font-preview{min-height:124px}}
    @media(max-width:999px),(orientation:portrait){.mobile-options-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.settings-header{grid-row:1}.mobile-options-sections{grid-row:2;min-height:0;overflow-y:auto;align-content:start;padding:14px 0 10px}.settings-footer{grid-row:3;margin:0;padding:12px 0 calc(2px + var(--livehub-safe-bottom));background:#071421}.settings-footer #logout{min-height:54px}.settings-section-body .mobile-options-list{margin-top:4px}}
    .creator-event-feed{display:grid;gap:7px;margin-top:9px}.creator-event-feed-label{color:#78caff;font-size:.61rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.creator-event-feed .creator-event-card{margin:0;padding:8px 9px}.creator-event-feed .creator-event-title{font-size:.66rem}.creator-event-feed .creator-event-main{font-size:.78rem}.creator-event-feed .creator-event-copy{font-size:.7rem}.creator-event-feed-empty{margin:0!important;padding:9px;border:1px dashed rgba(104,176,235,.22);border-radius:8px;color:#8da8c0;font-size:.72rem;line-height:1.4}.mobile-live-ops-events{margin-top:12px}.mobile-live-ops-events .creator-event-card{padding:9px 10px}
    .chat-assets-loader{position:absolute;z-index:35;inset:51px 0 65px;display:grid;place-items:center;background:#06111e}.chat-assets-loader-card{display:grid;justify-items:center;gap:8px;color:#9eb7cc;font-size:.78rem}.chat-assets-loader .app-boot-spinner{width:28px;height:28px}.chat-assets-loader strong{color:#edf7ff;font-size:.88rem}.creator-alert-history{display:grid;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(112,186,244,.16)}.creator-alert-history-label{color:#78caff;font-size:.61rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.creator-alert-history-item{display:flex;justify-content:space-between;gap:8px;color:#9eb7cc;font-size:.7rem}.creator-alert-history-item strong{color:#e9f4ff;font-weight:750}.creator-alert-history-item small{color:#718ba3}.alert-settings-panel{display:grid;gap:8px;margin-top:10px;padding:10px;border:1px solid rgba(169,112,255,.25);border-radius:10px;background:rgba(16,30,51,.6)}.alert-settings-title{color:#e9dcff;font-size:.78rem}.alert-settings-panel>p{margin:0!important;font-size:.68rem;line-height:1.4}.alert-settings-fields{display:grid;gap:7px}.alert-settings-fields label{display:grid;gap:4px;color:#9fc3df;font-size:.68rem}.alert-settings-fields input[type=url]{width:100%;min-height:34px;padding:7px 8px}.alert-settings-check{display:flex!important;grid-template-columns:none;align-items:center;gap:6px}.alert-settings-check input{width:auto}.alert-event-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.alert-event-setting{display:flex;align-items:center;gap:5px;min-width:0;padding:6px 7px;border:1px solid rgba(103,181,255,.16);border-radius:7px;color:#b9d0e2;font-size:.65rem}.alert-event-setting span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert-event-setting input{width:auto}.alert-settings-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.alert-settings-actions button{min-height:34px;padding:6px 10px;font-size:.7rem}.alert-settings-actions span{font-size:.66rem}.alert-player-browser{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none}.alert-player.has-browser-source{background:transparent}.alert-player.has-browser-source>*:not(.alert-player-browser){visibility:hidden}
    .alert-source-settings,.alert-sound-library-panel,.alert-event-card{border:1px solid rgba(103,181,255,.18);border-radius:9px;background:rgba(5,20,35,.68)}.alert-source-settings>summary,.alert-event-card>summary{cursor:pointer;list-style:none}.alert-source-settings>summary::-webkit-details-marker,.alert-event-card>summary::-webkit-details-marker{display:none}.alert-source-settings>summary{padding:9px;color:#c9dded;font-size:.72rem;font-weight:750}.alert-source-settings[open]>summary{border-bottom:1px solid rgba(103,181,255,.14)}.alert-source-settings .alert-settings-fields{padding:9px}.alert-sound-library-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:9px;align-items:center}.alert-sound-library-panel>div:first-child{display:grid;gap:2px}.alert-sound-library-panel small{color:#89a5bb;font-size:.63rem;line-height:1.35}.alert-sound-library-panel>button{min-height:34px;padding:6px 10px}.alert-sound-quota{font-size:.65rem}.alert-sound-library{display:grid;grid-column:1/-1;gap:5px}.alert-sound-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 7px;border-radius:7px;background:rgba(61,116,157,.1);color:#bcd1e2;font-size:.66rem}.alert-sound-item>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alert-sound-actions{display:flex;gap:5px}.alert-sound-actions button{min-height:30px;padding:4px 7px;font-size:.64rem}.alert-sound-actions .danger{color:#ff9eae;border-color:rgba(255,93,119,.35)}.alert-event-settings{grid-template-columns:1fr;gap:7px}.alert-event-card>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;color:#d8e9f7;font-size:.71rem;font-weight:800}.alert-event-card>summary::before{content:'›';color:#86b9dc}.alert-event-card[open]>summary::before{transform:rotate(90deg)}.alert-event-card>summary>span:first-of-type{margin-right:auto}.alert-event-enabled{display:flex;align-items:center;gap:4px;color:#99b5ca;font-size:.65rem;font-weight:600}.alert-event-enabled input{width:auto}.alert-event-card-body{display:grid;gap:8px;padding:9px;border-top:1px solid rgba(103,181,255,.14)}.alert-event-card-body>label,.alert-event-options>label{display:grid;gap:4px;color:#9fc3df;font-size:.66rem}.alert-event-card input[type=text],.alert-event-card input[type=number],.alert-event-card select{width:100%;min-height:34px;padding:6px 7px}.alert-template-vars{font-size:.6rem}.alert-event-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.alert-event-options .alert-settings-check{align-self:end;min-height:34px}.alert-event-options input[type=range]{width:100%}.alert-event-options output{color:#a9c2d5;font-size:.62rem}.alert-sound-preview,.alert-tts-preview{align-self:end;min-height:34px;padding:6px 8px;font-size:.66rem}.alert-tts-preview{border-color:rgba(169,112,255,.42);color:#e2d2ff}@media(min-width:720px){.alert-event-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.alert-sound-library-panel{grid-template-columns:1fr}.alert-sound-library-panel>*{grid-column:1}.alert-event-options{grid-template-columns:1fr}}
    .highlight-notifications{display:grid;gap:6px;margin:8px 10px 0}.highlight-notifications.hidden{display:none}.highlight-notification{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(169,112,255,.48);border-left:4px solid #a970ff;border-radius:8px;background:rgba(25,21,47,.97);box-shadow:0 8px 22px rgba(0,0,0,.22);color:#e8dcff;font-size:.78rem}.highlight-notification button{flex:0 0 auto;min-height:32px;padding:6px 9px;border-color:rgba(181,141,255,.55);background:#382562;color:#fff;font-size:.72rem}.highlight-notification button:hover{background:#56358d}.chat-message.highlight-jump{animation:highlight-jump-pulse 1.5s ease-out}.chat-message.highlight-jump.mentioned{box-shadow:inset 3px 0 0 #a970ff,0 0 0 2px rgba(198,164,255,.38)}@keyframes highlight-jump-pulse{0%,100%{filter:brightness(1)}35%{filter:brightness(1.45)}}
.pro-modal{position:fixed;z-index:300;inset:0;display:grid;place-items:center;padding:18px;background:rgba(1,7,13,.75)}.pro-modal.hidden{display:none}#pro-modal{z-index:500}.pro-card{width:min(620px,100%);max-height:calc(100dvh - 36px);overflow:auto;padding:22px;border:1px solid rgba(169,112,255,.5);border-radius:16px;background:#091827;color:#dcecff}.pro-card h2{margin:0;color:#fff}.pro-card>p{color:#9eb7cc;line-height:1.5}.pro-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pro-plan{padding:14px;border:1px solid #244967;border-radius:11px}.pro-plan.pro{border-color:#a970ff;background:rgba(83,45,132,.22)}.pro-plan h3{margin:0 0 8px;color:#fff}.pro-plan strong{font-size:1.25rem}.pro-plan ul{padding-left:18px;color:#b9cee0;font-size:.8rem;line-height:1.7}.pro-field{display:grid;gap:7px;margin:16px 0 8px;color:#b9cee0;font-size:.84rem}.pro-field textarea{resize:vertical;min-height:72px}.pro-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}.pro-actions button{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 13px;line-height:1.25;text-align:center;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}.pro-actions button:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 7px 18px rgba(76,144,207,.2)}.pro-actions button:active:not(:disabled){transform:translateY(1px);filter:brightness(.96)}.pro-actions button:focus-visible{outline:3px solid rgba(143,214,255,.82);outline-offset:2px}.pro-actions button:disabled{cursor:not-allowed;opacity:.52}.pro-actions #pro-close{grid-column:1/-1;justify-self:end;min-width:120px}.pro-checkout-error{min-height:0;margin:3px 0 0;color:#ffabb8;font-size:.78rem;line-height:1.4}.pro-checkout-error:not(:empty){padding:9px 10px;border:1px solid rgba(255,126,144,.44);border-radius:8px;background:rgba(113,27,44,.34)}.pro-test-switch{margin-top:14px;padding-top:12px;border-top:1px solid rgba(110,171,220,.2);color:#a9c4d8;font-size:.78rem}.obs-macro-panel{display:grid;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(110,171,220,.24)}.obs-macro-panel p,.obs-macro-panel small{margin:0;color:#a9c4d8}.obs-macro-panel textarea{min-height:72px;resize:vertical}@media(max-width:520px){.pro-plans,.pro-actions{grid-template-columns:1fr}.pro-actions #pro-close{grid-column:auto;justify-self:stretch}}
body.pro-custom-theme .tab.active,body.pro-custom-theme button:not(.secondary){background:var(--livehub-pro-accent)}body.pro-custom-theme .chat-message.mentioned{border-left-color:var(--livehub-pro-accent)}
.channel-activity-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:7px 3px 0;color:#9dc2df;font-size:.76rem}.channel-activity-bar>span{padding:4px 8px;border:1px solid rgba(94,210,158,.34);border-radius:999px;background:rgba(26,96,69,.22);color:#78efb7;font-weight:850}.channel-activity-bar button{min-height:34px;padding:6px 10px;font-size:.72rem}.channel-activity-bar small{flex:1 1 220px;color:#7694ad}.tab.is-chat-active::after{content:'AKTIV';position:absolute;bottom:4px;left:10px;color:#5ee3a6;font-size:.55rem;font-weight:900;letter-spacing:.08em}.channel-manager-card{display:grid;gap:13px}.channel-manager-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:8px}.channel-manager-head p{margin:4px 0 0}.channel-manager-head h2{margin:0}.channel-manager-head #channel-manager-add{align-self:start;min-height:36px;padding:7px 10px;white-space:nowrap;font-size:.74rem}.channel-manager-head #channel-manager-close{align-self:start;min-width:36px;min-height:36px;padding:5px 9px;font-size:1.1rem;line-height:1}.channel-manager-card h3{margin:0 0 7px;color:#98d7ff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.channel-manager-list{display:grid;gap:7px}.channel-manager-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid rgba(99,169,232,.2);border-radius:10px;background:rgba(10,32,52,.65)}.channel-manager-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-manager-row>div{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.channel-manager-row button{min-height:34px;padding:6px 9px;font-size:.7rem}.channel-activate{background:#247d5b!important;color:#eafff5!important}.highlight-quick-button{position:relative;min-width:38px;min-height:34px;padding:5px 9px;font-size:.92rem}.highlight-quick-button b{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ff5b75;color:#fff;font-size:.62rem}.settings-highlights .settings-accordion>summary::before{content:'✦';color:#e2c4ff;border-color:rgba(193,140,255,.36);background:#33204f}.settings-display-pro .settings-accordion>summary::before{content:'A';font-weight:900}.settings-plan .settings-accordion>summary::before{content:'◈';color:#ffd77d;border-color:rgba(255,205,96,.32);background:#423516}@media(max-width:999px),(orientation:portrait){.channel-activity-bar{margin:5px 7px 3px}.channel-activity-bar small{display:none}.channel-activity-bar button{margin-left:auto}.channel-manager-card{width:100%;max-height:calc(100dvh - 20px);padding:18px}.channel-manager-row{align-items:flex-start;flex-direction:column}.channel-manager-row>div{width:100%;justify-content:stretch}.channel-manager-row button{flex:1}.highlight-quick-button{min-width:36px}.settings-highlights,.settings-display-pro,.settings-plan{margin-top:8px}.pro-plan{overflow-wrap:anywhere}}
.settings-section{overflow:visible}.settings-chat .settings-accordion>summary::before{content:'🔤';font-size:.9rem}.settings-highlights .settings-accordion>summary::before{content:'🔔'}.settings-creator .settings-accordion>summary::before{content:'🎛️';font-size:.9rem}.settings-display-pro .settings-accordion>summary::before{content:'🎨';font-size:.9rem}.settings-plan .settings-accordion>summary::before{content:'👤';font-size:.9rem}.settings-alerts .settings-accordion>summary::before{content:'📢';font-size:.9rem}.settings-twitch .settings-accordion>summary::before{content:'🟣';color:#a970ff;border-color:rgba(169,112,255,.34);background:#2c2148;font-size:.9rem}.pro-feature-badge{justify-self:start;margin-left:7px;padding:2px 6px;border:1px solid rgba(193,140,255,.6);border-radius:999px;background:rgba(83,45,132,.32);color:#e7d7ff;font-size:.62rem;font-weight:900;letter-spacing:.08em;vertical-align:middle}.account-plan-overview{display:grid;gap:3px;padding:13px;border:1px solid rgba(125,206,255,.28);border-radius:11px;background:linear-gradient(115deg,rgba(13,45,73,.92),rgba(37,25,70,.82))}.account-plan-overview>span{color:#8fcdf4;font-size:.66rem;font-weight:900;letter-spacing:.09em}.account-plan-overview strong{color:#fff;font-size:1.04rem}.account-plan-overview p{margin:0;color:#c5ddef;font-size:.8rem;line-height:1.35}.account-plan-overview p:last-child{color:#7aefb9;font-weight:750}.plan-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.plan-primary-actions>*{display:flex;align-items:center;justify-content:center;min-height:42px;padding:9px 11px;border:1px solid #28567c;border-radius:9px;background:#0e304e;color:#d5edff;font:inherit;font-size:.78rem;font-weight:850;text-align:center;text-decoration:none}.plan-primary-actions a:hover{background:#164261}.plan-primary-actions button{width:100%}.paypal-sandbox-note{display:block;margin:5px 2px 0;color:#d9bd78;font-size:.68rem}.subscription-details{margin-top:10px;border:1px solid rgba(103,181,255,.2);border-radius:9px;background:rgba(6,22,37,.55)}.subscription-details>summary{padding:9px 10px;color:#a9cbe2;font-size:.76rem;font-weight:800;cursor:pointer}.subscription-details dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;margin:0;padding:0 10px 10px;color:#a6bdd0;font-size:.72rem}.subscription-details dt{color:#6f91ab}.subscription-details dd{min-width:0;margin:0;color:#d7e6f1;text-align:right;overflow-wrap:anywhere}@media(max-width:999px),(orientation:portrait){.mobile-options-sections{display:none;min-height:0;overflow-x:hidden!important;overflow-y:auto!important;align-content:normal}.settings-section{display:none;min-height:0;margin:0 0 10px;overflow:visible}.settings-section.is-settings-active{display:block}.settings-accordion[open],.settings-accordion[open] .settings-section-body{height:auto;overflow:visible}.settings-section-body{position:static;min-width:0}.mobile-options-card{min-width:0}.mobile-options-list,.settings-section-body>*{min-width:0}.settings-navigation{display:grid;gap:8px}.settings-navigation button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 14px;border:1px solid rgba(103,181,255,.16);border-radius:12px;background:rgba(8,22,38,.4);color:#cfe3f2;text-align:left;font-size:.86rem;font-weight:750}.settings-navigation button span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#102b43;color:#8fd4ff;font-size:1.05rem}.settings-navigation button:active{background:rgba(22,62,94,.6)}.settings-navigation button.active{border-color:rgba(113,192,255,.4);background:#173c5e;color:#fff}.settings-navigation button.active span{background:#a970ff;color:#111126}.settings-mobile-back{display:none}.mobile-options-card.settings-drilldown .settings-navigation{display:none}.mobile-options-card.settings-drilldown .mobile-options-sections{display:block!important}.mobile-options-card.settings-drilldown .settings-mobile-back{display:inline-flex}.mobile-options-card.settings-drilldown .mobile-options-intro{display:none}}@media(max-width:390px){.plan-primary-actions{grid-template-columns:1fr}}
.settings-accordion>summary{pointer-events:none;cursor:default;justify-content:flex-start;gap:9px;min-width:0;overflow-wrap:anywhere}.settings-accordion>summary::before{flex:0 0 auto;margin-right:0}.mobile-options-card.settings-drilldown .settings-header h2{font-size:1.12rem;line-height:1.25}.settings-accordion>summary::after{display:none}.settings-section-body{display:block!important}.mobile-options-card.settings-drilldown .settings-mobile-back{display:inline-flex}.settings-mobile-back{display:none;position:absolute;top:12px;left:12px;align-items:center;gap:5px;min-height:40px;padding:8px 12px 8px 10px;border-radius:10px;background:#102b43;color:#b9d7ed;font-size:.82rem;font-weight:800}
.settings-section{border:1px solid rgba(103,181,255,.16);border-radius:12px;background:rgba(8,22,38,.4);margin-bottom:10px}.settings-section:last-child{margin-bottom:0}.settings-accordion>summary{border-radius:12px;transition:background-color .14s ease,color .14s ease}.settings-accordion>summary:hover{background:rgba(22,62,94,.6);color:#fff}.settings-accordion>summary:active{background:rgba(15,46,70,.75)}.settings-accordion>summary:focus-visible{outline:2px solid rgba(143,214,255,.85);outline-offset:-2px}.settings-accordion[open]{border-color:rgba(117,200,255,.4)}.settings-accordion[open]>summary{border-radius:12px 12px 0 0}.settings-accordion>summary::after{font-size:1.35rem;font-weight:900}.settings-section-body{margin-left:2px;padding-left:12px;border-left:2px solid rgba(105,191,255,.32)}
#mobile-channel-modal{z-index:400}.emote-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.chat-head{gap:10px}.chat-head-actions{min-width:0;overflow:visible;flex-wrap:wrap}.chat-status{flex:0 0 auto;width:10px;height:10px;min-width:10px;max-width:none;overflow:visible;border-radius:50%;background:#ef5d68;box-shadow:0 0 0 3px rgba(239,93,104,.14);font-size:0;text-overflow:clip;white-space:nowrap}.chat-status.online{background:#4de2a1;box-shadow:0 0 0 3px rgba(77,226,161,.14);animation:chat-status-pulse 2.2s ease-in-out infinite}.chat-status.connecting{background:#f5bd55;box-shadow:0 0 0 3px rgba(245,189,85,.14)}.chat-status.disconnected{background:#ef5d68;box-shadow:0 0 0 3px rgba(239,93,104,.14)}@keyframes chat-status-pulse{50%{box-shadow:0 0 0 6px rgba(77,226,161,0)}}.chat-collaboration-status{order:1;max-width:100%}.highlight-quick-button{order:2;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:6px 10px;border-radius:7px;font-size:.74rem;line-height:1.2;white-space:nowrap}.chat-collaboration-status,#player-close{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:7px;line-height:1.2}.chat-status{order:3}.chat-assets-status{display:none!important}.highlight-quick-button b{position:static;min-width:18px;height:18px}@media(max-width:999px),(orientation:portrait){.chat-collaboration-status{flex:1 1 145px;min-width:0;max-width:none}.chat-collaboration-status .shared-chat-label{overflow:visible;text-overflow:clip}.highlight-quick-button{flex:0 0 auto;min-width:0;padding-right:7px;padding-left:7px}.highlight-quick-label{display:inline}}@media(max-width:360px){.chat-collaboration-status .shared-chat-label{font-size:0}.chat-collaboration-status .shared-chat-label::after{content:'Gem. Chat';font-size:.74rem}.chat-collaboration-avatars img:nth-child(n+3){display:none}}@media(prefers-reduced-motion:reduce){.chat-status.online{animation:none}}.checkout-legal{display:grid;gap:9px;margin:16px 0;padding:13px;border:1px solid rgba(103,181,255,.25);border-radius:10px;background:#071a2b;color:#b7ccdc;font-size:.76rem;line-height:1.42}.checkout-legal strong{color:#edf7ff}.checkout-legal label{display:flex;align-items:flex-start;gap:8px}.checkout-legal input{width:auto;margin-top:3px}.checkout-legal a{color:#8ed4ff}.withdraw-action{border-color:rgba(255,188,107,.42)!important;color:#ffe0ad!important}.subscription-details dd a{color:#9dd7fb}
    /* Settings-Shell: Kategorien links, Detailseite rechts; mobil zwei Ebenen. */
    .mobile-options-card{display:flex!important;flex-direction:column!important;gap:0!important;padding:22px!important}
    .lh-set{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
    .lh-set-head{display:flex;align-items:center;gap:12px;padding:0 0 15px;border-bottom:1px solid rgba(112,186,244,.18)}
    .lh-set-title{flex:1 1 auto;min-width:0;color:#f1f7ff;font-size:1.16rem;font-weight:850;line-height:1.25;overflow-wrap:anywhere}
    .lh-set-back{display:none;align-items:center;gap:6px;flex:0 0 auto;min-height:40px;padding:8px 13px;border:1px solid rgba(113,192,255,.26);border-radius:10px;background:#102b43;color:#bcd7ec;font-size:.8rem;font-weight:850}
    .lh-set-back span{font-size:1.05rem;line-height:1}
    .lh-set-head .mobile-options-close{position:static!important;flex:0 0 auto;width:42px;height:42px;top:auto!important;right:auto!important;border-radius:11px}
    .lh-set-body{display:flex;flex:1 1 auto;min-height:0;gap:22px;padding-top:16px}
    .lh-set-nav{display:grid;flex:0 0 234px;align-content:start;gap:5px}
    .lh-set-navbtn{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:9px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#9eb6c9;font-size:.84rem;font-weight:800;text-align:left;line-height:1.25}
    .lh-set-ico{display:grid;flex:0 0 auto;place-items:center;width:28px;height:28px;border-radius:9px;background:#102b43;font-size:.92rem}
    .lh-set-lbl{flex:1 1 auto;min-width:0}
    .lh-set-chev{display:none;flex:0 0 auto;color:#7fa4c0;font-size:1.15rem;line-height:1}
    .lh-set-navbtn:hover{background:#102a43;color:#e8f5ff}
    .lh-set-navbtn:focus-visible{outline:2px solid rgba(143,214,255,.8);outline-offset:1px}
    .lh-set-navbtn.is-active{border-color:rgba(113,192,255,.34);background:#173c5e;color:#fff}
    .lh-set-navbtn.is-active .lh-set-ico{background:#a970ff}
    .lh-set-content{flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding-right:5px}
    .lh-set-panel{display:none;min-width:0}
    .lh-set-panel.is-active{display:grid;align-content:start;gap:15px}
    .lh-group{display:grid;gap:11px;min-width:0;padding:16px;border:1px solid rgba(103,181,255,.18);border-radius:13px;background:rgba(8,22,38,.5)}
    .lh-group-title{margin:0;color:#e4f1fc;font-size:.9rem;font-weight:850}
    .lh-group>p,.lh-group .muted{margin:0;color:#91abc0;font-size:.79rem;line-height:1.5}
    .lh-group .mobile-options-list{display:grid;gap:9px;margin:0}
    .lh-group .pro-plan{padding:14px;border:1px solid rgba(169,112,255,.26);border-radius:11px;background:rgba(83,45,132,.14)}
    .lh-group .pro-field{margin:0}
    .lh-group .account-plan-overview{margin:0}
    .lh-group .plan-primary-actions{margin:0}
    .lh-set-foot{margin-top:15px;padding-top:14px;border-top:1px solid rgba(112,186,244,.18)}
    .lh-set-foot #logout{display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;color:#ffbdc6;border:1px solid rgba(255,130,148,.34);border-radius:11px;background:rgba(104,28,44,.34);font-size:.82rem}
    .lh-set-stash{display:none}
    @media(min-width:1000px) and (orientation:landscape){
      .lh-set-foot{max-width:234px}
    }
    @media(max-width:999px),(orientation:portrait){
      .mobile-options-card{padding:calc(18px + var(--livehub-safe-top)) 15px calc(16px + var(--livehub-safe-bottom))!important}
      .lh-set-body{display:block;padding-top:15px}
      .lh-set-nav{display:grid;gap:9px}
      .lh-set-navbtn{min-height:58px;padding:12px 14px;border-color:rgba(103,181,255,.16);border-radius:13px;background:rgba(8,22,38,.5);color:#dbeaf7;font-size:.88rem}
      .lh-set-navbtn:active{background:#123553}
      .lh-set-ico{width:32px;height:32px;font-size:1rem}
      .lh-set-chev{display:block}
      .lh-set-content{display:none;height:100%;padding-right:0}
      .lh-drill .lh-set-nav{display:none}
      .lh-drill .lh-set-content{display:block}
      .lh-drill .lh-set-back{display:inline-flex}
      .lh-drill .lh-set-foot{display:none}
      .lh-set-body{height:100%}
      .lh-group{padding:14px}
    }
    .tts-block{display:grid;gap:8px;padding:13px;border:1px solid rgba(103,181,255,.18);border-radius:11px;background:rgba(6,20,34,.55)}
    .tts-block>strong{color:#e4f1fc;font-size:.84rem}
    .tts-hint{display:block;color:#8fa9be;font-size:.72rem;line-height:1.45}
    .tts-hint b{color:#bcd9f0}
    .tts-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
    .tts-add input{min-width:0}
    .tts-add button{min-height:38px;padding:8px 12px;font-size:.76rem;white-space:nowrap}
    .tts-list{display:flex;flex-wrap:wrap;gap:7px}
    .tts-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;border:1px solid rgba(103,181,255,.28);border-radius:999px;background:#102b43;color:#d6e9f8;font-size:.76rem;font-weight:750;overflow-wrap:anywhere}
    .tts-chip button{min-width:22px;min-height:22px;padding:0;border-radius:50%;background:rgba(255,120,139,.18);color:#ffb0bc;font-size:.85rem;line-height:1}
    .tts-list .muted{margin:0;font-size:.75rem}
    .tts-readall .alert-settings-check{gap:8px;color:#e6f2fd;font-size:.85rem;font-weight:800}
    .tts-readall .alert-settings-check.is-locked{cursor:pointer}
    .tts-readall .alert-settings-check.is-locked input{cursor:pointer}
.settings-admin .settings-accordion>summary::before{content:'📊';font-size:.9rem}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.admin-stat{display:grid;gap:3px;padding:12px;border:1px solid rgba(103,181,255,.2);border-radius:11px;background:rgba(8,22,38,.55)}
.admin-stat strong{color:#eaf4ff;font-size:1.24rem;font-variant-numeric:tabular-nums;line-height:1.1}
.admin-stat span{color:#8fa9be;font-size:.72rem;line-height:1.3}
.highlight-center-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch}
.highlight-center-row>button:first-child{min-width:0;text-align:left;white-space:pre-line}
.highlight-center-remove{flex:0 0 auto;min-width:38px;padding:6px 10px;border:1px solid rgba(255,130,148,.34);border-radius:9px;background:rgba(104,28,44,.34);color:#ffb0bc;font-size:1rem;line-height:1}
.highlight-center-remove:hover{background:rgba(140,36,58,.5);color:#fff}
.highlight-center-clear{margin-top:6px;width:100%;min-height:40px;font-size:.78rem}
.pro-plan .pro-field{margin:0 0 10px}
.pro-plan .tts-add{margin:4px 0 14px}
.hl-rules{margin-top:14px}
.hl-rules .pro-field{margin-bottom:8px}
.hl-rules>button{margin-bottom:10px}
.hl-word-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:6px}
.hl-words{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px}
.hl-words-empty{font-size:.8rem}
.hl-word{padding-right:5px;white-space:nowrap;overflow-wrap:normal;max-width:100%}
.hl-word-remove{min-width:26px;min-height:26px;padding:0;border:0;border-radius:50%;background:rgba(255,130,148,.16);color:#ffb0bc;font-size:1rem;line-height:1;cursor:pointer}
.hl-word-remove:hover{background:rgba(255,130,148,.3);color:#fff}
.hl-rule-list{display:grid;gap:7px}
.hl-rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid rgba(103,181,255,.22);border-radius:10px;background:rgba(8,22,38,.55);color:#dbeaf7;font-size:.78rem}
.hl-rule>span{min-width:0;overflow-wrap:anywhere}
.hl-rule-remove{min-width:32px;min-height:32px;padding:2px 8px;border:1px solid rgba(255,130,148,.34);border-radius:8px;background:rgba(104,28,44,.34);color:#ffb0bc;font-size:.95rem;line-height:1}
.hl-rule-remove:hover{background:rgba(140,36,58,.5);color:#fff}
.hl-rule-list .muted{margin:0;font-size:.75rem}
.pro-plan>strong{display:block;margin-bottom:10px}
.pro-plan .pro-field{display:grid;gap:6px;margin:0 0 14px}
.pro-plan .pro-field select,.pro-plan .pro-field input{min-height:38px}
.pro-plan .tts-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:0 0 16px}
.pro-plan .tts-add button{min-height:40px;white-space:normal}
.hl-rules{margin-top:6px;padding-top:14px;border-top:1px solid rgba(103,181,255,.16)}
.settings-hinweis{position:absolute;left:50%;bottom:14px;z-index:6;max-width:min(420px,calc(100% - 32px));padding:10px 14px;border:1px solid rgba(94,210,158,.4);border-radius:11px;background:rgba(13,58,44,.96);color:#8ff0c4;font-size:.8rem;font-weight:750;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.settings-hinweis.is-visible{opacity:1;transform:translate(-50%,0)}
.settings-hinweis.is-error{border-color:rgba(255,130,148,.45);background:rgba(94,24,38,.96);color:#ffc2cb}
.mobile-options-card{position:relative}
.hl-rule{grid-template-columns:minmax(0,1fr) minmax(120px,auto) auto}
.hl-rule-sound{min-height:34px;padding:5px 7px;font-size:.72rem}
@media(max-width:999px),(orientation:portrait){.hl-rule{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.hl-rule-sound{grid-column:1/-1}}
.settings-sounds .settings-accordion>summary::before{content:'🎵';font-size:.9rem}
.settings-sounds .alert-sound-library-panel{margin:0;border:0;background:transparent;padding:0}
.settings-sounds .alert-sound-library{margin-top:10px}
.tts-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.tts-key-row input{min-width:0}
.tts-key-toggle{min-height:38px;padding:7px 12px;font-size:.74rem;white-space:nowrap}
#tts-eleven-key.is-masked{-webkit-text-security:disc;text-security:disc;letter-spacing:.06em}
#obs-bridge-password.is-masked{-webkit-text-security:disc;text-security:disc;letter-spacing:.06em}
.chat-restriction-info{align-items:flex-start}
.chat-restriction-info strong{min-width:0;overflow-wrap:anywhere;white-space:normal;line-height:1.35}
@media(max-width:999px),(orientation:portrait){
  .chat-restriction-info{gap:7px;padding:7px 9px;font-size:.74rem}
  .chat-restriction-info strong{font-size:.74rem;font-weight:800}
  .chat-restriction-info .channel-offline-icon{flex:0 0 auto}
}
#highlight-center-list{display:grid;gap:8px;max-height:clamp(220px,46vh,420px);overflow-y:auto;padding:2px}
.highlight-center-note{position:sticky;top:0;z-index:1;margin:0 0 2px;padding:7px 9px;border-radius:8px;background:rgba(8,22,38,.92);color:#8fa9be;font-size:.72rem;line-height:1.35}
.highlight-notification{transition:opacity .35s ease}
/* iOS zoomt bei Feldern unter 16px automatisch hinein. */
@media(max-width:999px),(orientation:portrait){
  input,select,textarea,.rich-composer{font-size:16px!important}
  .pro-plan .pro-field select,.pro-plan .pro-field input,.tts-add input,.tts-add select,.hl-rule-sound{font-size:16px!important}
}

.highlight-center-row>button:first-child{display:grid;gap:3px;padding:9px 11px;white-space:normal;font-weight:400;line-height:1.4}
.highlight-center-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;min-width:0}
.highlight-center-user{color:#8dcfff;font-size:.78rem;font-weight:800;overflow-wrap:anywhere}
.highlight-center-context{color:#7f97ac;font-size:.7rem;font-weight:600;overflow-wrap:anywhere}
.highlight-center-text{color:#e7f3ff;font-size:.88rem;font-weight:400;overflow-wrap:anywhere}
.highlight-center-row{align-items:start}
.highlight-center-row>.highlight-center-remove{min-height:38px}

/* Highlight Center: mehr Raum - auf dem Desktop ist die Karte sonst unnoetig schmal. */
#highlight-center .pro-card{width:min(880px,100%);padding:24px 26px}
#highlight-center-list{gap:10px;max-height:min(60vh,560px);padding:4px;scrollbar-gutter:stable}
#highlight-center-list::-webkit-scrollbar{width:10px}
#highlight-center-list::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:8px;background:rgba(141,207,255,.28);background-clip:content-box}
#highlight-center-list::-webkit-scrollbar-thumb:hover{background:rgba(141,207,255,.44);background-clip:content-box}
.highlight-center-note{margin:0 0 6px;padding:9px 12px;font-size:.75rem}
.highlight-center-row{gap:10px}
.highlight-center-row>button:first-child{gap:5px;padding:12px 15px;border-radius:11px}
.highlight-center-row>.highlight-center-remove{min-width:42px;min-height:42px;border-radius:11px}
.highlight-center-user{font-size:.84rem}
.highlight-center-context{font-size:.74rem}
.highlight-center-text{font-size:.94rem;line-height:1.5}
.highlight-center-clear{margin-top:10px;min-height:44px;font-size:.82rem}
@media(max-width:720px){
  #highlight-center{padding:12px}
  #highlight-center .pro-card{padding:18px 16px}
  #highlight-center-list{max-height:min(56vh,520px);gap:9px;padding:3px}
  .highlight-center-row{gap:8px}
  .highlight-center-row>button:first-child{padding:11px 12px}
  .highlight-center-row>.highlight-center-remove{min-width:40px;min-height:40px}
  .highlight-center-text{font-size:.92rem}
}

/* Gemeinsam live */
.chat-collaboration-status{cursor:pointer}
.chat-collaboration-status:hover{border-color:rgba(211,167,255,.9)}
.player-viewers{flex:0 1 auto;margin-right:auto;min-width:0;overflow:hidden;color:#9ec5e4;font-size:.8rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.player-viewers.hidden{display:none}
.player-viewers-sep{margin:0 .35rem;color:#6d8599;font-weight:700}
.player-viewers-count{color:#ff5a5f;font-weight:800}
.player-viewers-toggle{padding:3px 7px;border:0;border-radius:7px;background:transparent;color:#9ec5e4;font-size:.8rem;font-weight:700;white-space:nowrap;cursor:pointer}
.player-viewers-toggle:hover,.player-viewers-toggle[aria-expanded="true"]{background:rgba(141,207,255,.13);color:#dcecff}
.player-panel-head{gap:9px;--kopf-gap:9px}
.player-panel-head>strong{flex:0 1 auto}
.collab-menu{position:fixed;z-index:320;display:grid;gap:7px;max-height:min(60vh,420px);overflow-y:auto;padding:10px;border:1px solid rgba(103,181,255,.34);border-radius:12px;background:#0a1c2f;box-shadow:0 18px 40px rgba(1,7,13,.6);scrollbar-gutter:stable}
.collab-menu.hidden{display:none}
.collab-menu-head{position:sticky;top:0;z-index:1;margin:0;padding:6px 8px;border-radius:8px;background:rgba(10,28,47,.96);color:#8fa9be;font-size:.72rem;font-weight:700}
.collab-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(103,181,255,.2);border-radius:10px;background:rgba(13,40,67,.5)}
.collab-row:has(>.collab-info:first-child){grid-template-columns:minmax(0,1fr) auto}
.collab-avatar{width:32px;height:32px;border-radius:50%;background:#0a1929;object-fit:cover}
.collab-info{display:grid;gap:1px;min-width:0}
.collab-name{color:#e7f3ff;font-size:.84rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collab-meta{color:#8fa9be;font-size:.74rem;font-weight:600}
.collab-meta.is-live{color:#4de2a1}
.collab-add{flex:0 0 auto;min-height:32px;padding:6px 11px;font-size:.75rem;white-space:nowrap}
.collab-add:disabled{opacity:.55;cursor:default}
@media(max-width:720px){
  .collab-menu{max-height:min(56vh,400px)}
  .collab-avatar{width:30px;height:30px}
  .collab-add{padding:6px 9px;font-size:.73rem}
}

/* Player-Schaltflaeche: Symbol und Text statt Schriftzeichen */
.player-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.player-toggle-icon{flex:0 0 auto;width:14px;height:14px}

/* Channels einklappen */
.channel-activity-bar #channel-collapse{margin-left:0}
body.channels-collapsed .channelbar .tabs,
body.channels-collapsed .channelbar #tab-count,
body.channels-collapsed .channelbar #moderation-auth,
body.channels-collapsed .channelbar .add-area{display:none}
body.channels-collapsed .channelbar{grid-template-columns:minmax(0,1fr)}
body.channels-collapsed .channelbar>div:first-child::before,
body.channels-collapsed .channelbar>div:first-child::after{display:none}
body.channels-collapsed .channel-activity-bar{margin-top:0}

/* Follows im Hinzufuegen-Dialog */
.mobile-channel-follows{display:grid;gap:5px;margin-top:9px;color:#8fa9be;font-size:.74rem;font-weight:700}
.mobile-channel-follows select{width:100%;min-height:44px;padding:9px 10px;border:1px solid rgba(103,181,255,.3);border-radius:10px;background:#0d2136;color:#dcecff;font-size:.85rem}
.mobile-channel-follows select option:disabled{color:#5f7488}

/* Hinzufuegen-Dialog weiter oben: sonst klappt die Follow-Auswahl nach oben auf,
   weil unter dem mittig stehenden Fenster kein Platz mehr ist. */

/* Hinzufuegen-Dialog: schliessen und Rueckmeldung */
.mobile-channel-card{position:relative}
.mobile-channel-card h2{padding-right:40px}
.mobile-channel-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(103,181,255,.22);border-radius:10px;background:transparent;color:#a8c4da;font-size:1.4rem;line-height:1;cursor:pointer}
.mobile-channel-close:hover{border-color:rgba(141,207,255,.6);background:rgba(18,56,92,.7);color:#fff}
.mobile-channel-hint{margin:6px 0 0;color:#78efb7;font-size:.76rem;font-weight:700;min-height:1em}
.mobile-channel-hint:empty{display:none}

/* Follow-Auswahl als eigene Liste */
.follow-picker{display:grid;gap:6px;margin-top:9px}
.follow-label{margin:0;color:#8fa9be;font-size:.74rem;font-weight:700}
.follow-toggle{width:100%;min-height:44px;padding:9px 12px;font-size:.82rem;text-align:left}
.follow-panel{display:grid;gap:7px;padding:8px;border:1px solid rgba(103,181,255,.28);border-radius:11px;background:rgba(8,22,38,.8)}
.follow-panel.hidden{display:none}
.follow-search{width:100%;min-height:40px;padding:8px 10px;border:1px solid rgba(103,181,255,.28);border-radius:9px;background:#0d2136;color:#dcecff;font-size:.85rem}
.follow-list{display:grid;gap:5px;max-height:min(44vh,320px);overflow-y:auto;padding-right:2px;scrollbar-gutter:stable}
.follow-group{position:sticky;top:0;z-index:1;margin:0;padding:5px 7px;border-radius:7px;background:rgba(8,22,38,.96);color:#8fa9be;font-size:.7rem;font-weight:800}
.follow-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 9px;border:1px solid rgba(103,181,255,.16);border-radius:9px;background:rgba(13,40,67,.45)}
.follow-row.is-saved{opacity:.6}
.follow-info{display:grid;gap:1px;min-width:0}
.follow-name{color:#e7f3ff;font-size:.82rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.follow-meta{color:#8fa9be;font-size:.72rem;font-weight:600}
.follow-meta.is-live{color:#ff5a5f}
.follow-add{flex:0 0 auto;min-height:32px;padding:6px 11px;font-size:.74rem;white-space:nowrap}
.follow-add:disabled{cursor:default}
.follow-empty{margin:0;padding:8px;color:#8fa9be;font-size:.76rem}

/* Auf dem Desktop bricht die Channelleiste um, statt seitlich zu scrollen.
   Ab etwa drei Reihen wird der Bereich scrollbar, damit er nicht die halbe
   Seite einnimmt - einklappen geht weiterhin ueber den Knopf daneben. */
@media(min-width:721px){
  .channelbar .tabs{flex-wrap:wrap;overflow-x:visible;overflow-y:auto;max-height:calc(3 * 71px + 6px);scrollbar-gutter:stable}
  .channelbar .tab-wrap{flex:0 1 auto}
  .channelbar .tab{min-width:132px}
  .channelbar>div:first-child::before,.channelbar>div:first-child::after{display:none}
}

/* Live-Punkt in der Channelverwaltung */
.channel-manager-row.is-live .channel-live-dot{display:inline-block;animation:channel-live-breathe 2.8s ease-in-out infinite}
.channel-manager-row.is-live .channel-live-dot::after{opacity:.25;transform:scale(1.25);animation:channel-live-ring 2.8s cubic-bezier(.2,.65,.35,1) infinite}

/* Kanalkacheln auf dem Desktop hervorheben, sobald die Maus darauf liegt */
@media(min-width:721px){
  .channelbar .tab{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
  .channelbar .tab:hover{border-color:#54abee;background:#123a5e;box-shadow:0 6px 16px rgba(3,14,26,.55);transform:translateY(-1px)}
  .channelbar .tab.active:hover{border-color:#e0c9ff;background:#bb8bff}
  .channelbar .tab:focus-visible{outline:2px solid rgba(143,214,255,.9);outline-offset:2px}
  .channelbar .tab-wrap:hover .tab-remove{color:#ffb0bc}
}
@media(prefers-reduced-motion:reduce){
  .channelbar .tab{transition:none}
  .channelbar .tab:hover{transform:none}
}

/* Stream-Stats im Creator-Modus */
.stream-stats{display:grid;gap:7px;margin:7px 10px 0;padding:9px 11px;border:1px solid rgba(103,181,255,.24);border-radius:11px;background:linear-gradient(110deg,rgba(13,40,67,.86),rgba(24,25,52,.76))}
.stream-stats.hidden{display:none}
.stream-stats-head{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.stream-stats-state{color:#8fa9be;font-size:.76rem;font-weight:900;letter-spacing:.04em}
.stream-stats-state.is-online{color:#4de2a1}
.stream-stats-state.is-stale{color:#ffb0bc}
.stream-stats-source{flex:1 1 auto;min-width:0;overflow:hidden;color:#7f97ac;font-size:.7rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.stream-stats-age{color:#7f97ac;font-size:.68rem}
.stream-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px}
.stream-stats-tile{display:grid;gap:1px;padding:6px 8px;border:1px solid rgba(103,181,255,.18);border-radius:8px;background:rgba(8,22,38,.6)}
.stream-stats-tile.is-warn{border-color:rgba(255,177,102,.42);background:rgba(69,53,24,.5)}
.stream-stats-label{color:#7f97ac;font-size:.64rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.stream-stats-value{color:#e7f3ff;font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums}
.stream-stats-links{display:flex;flex-wrap:wrap;gap:5px}
.stream-stats-link{padding:3px 7px;border:1px solid rgba(94,210,158,.3);border-radius:999px;background:rgba(26,96,69,.22);color:#78efb7;font-size:.68rem;font-weight:700}
.stream-stats-link.is-off{border-color:rgba(255,130,148,.3);background:rgba(104,28,44,.28);color:#ffb0bc}
.stream-stats-settings{display:grid;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(103,181,255,.16)}
.stream-stats-settings h4{margin:0;color:#e7f3ff;font-size:.86rem}
.stream-stats-actions{display:flex;flex-wrap:wrap;gap:6px}
.stream-stats-status{margin:0;font-size:.74rem}
.stream-stats-status.is-ok{color:#78efb7}
.stream-stats-hint{margin:0;font-size:.7rem}

.stream-stats-status.is-error{color:#ffb0bc}
.stream-stats-settings input[readonly]{opacity:.85;cursor:default}
.stream-stats-actions button.hidden{display:none}

/* Kompakte Stream-Stats im Chat-Kopf */
.stream-stats-mini{flex:0 0 auto;padding:3px 8px;border:1px solid rgba(103,181,255,.28);border-radius:999px;background:rgba(13,40,67,.7);color:#9ec5e4;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.stream-stats-mini.hidden{display:none}
.stream-stats-mini.is-online{border-color:rgba(94,210,158,.42);background:rgba(26,96,69,.26);color:#78efb7}
.stream-stats-mini.is-stale{border-color:rgba(255,130,148,.36);background:rgba(104,28,44,.26);color:#ffb0bc}
@media(max-width:720px){.stream-stats-mini{padding:3px 7px;font-size:.68rem}}

/* Hinweis nach dem Abmelden */
.logout-note{display:grid;gap:7px;margin-top:14px;padding:12px 14px;border:1px solid rgba(255,192,102,.34);border-radius:12px;background:rgba(69,53,24,.5);color:#f1cf9b}
.logout-note strong{color:#ffe4b5;font-size:.92rem}
.logout-note p{margin:0;font-size:.8rem;line-height:1.45}
.logout-note-link{justify-self:start;padding:8px 13px;border:1px solid rgba(255,192,102,.44);border-radius:9px;color:#ffe4b5;font-size:.8rem;font-weight:800;text-decoration:none}
.logout-note-link:hover{background:rgba(255,192,102,.16)}

/* Kontrollraum: zwei Panels weniger, Alerts bekommt den frei gewordenen Platz. */
.control-room-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1100px){.control-room-workspace{grid-template-columns:minmax(0,1fr)}}

/* Auf Mobilgeraeten die tatsaechlich sichtbare Flaeche verwenden.
   In-App-Browser (Discord, Instagram, Twitter) melden bei 100dvh die Hoehe
   ohne ihre eigene Werkzeugleiste - der Composer rutscht dann darunter.
   window.visualViewport liefert den echten Wert; die App schreibt ihn
   laufend in --livehub-visual-height. */
@media(max-width:999px),(orientation:portrait){
  .shell{
    height:var(--livehub-visual-height,100dvh);
    min-height:var(--livehub-visual-height,100dvh);
    max-height:var(--livehub-visual-height,100dvh);
  }
}

/* OBS-Steuerung scrollbar halten: der Inhalt waechst mit der Zahl der Szenen
   und Makros und war vorher nicht erreichbar. */


@media(max-width:1100px){.creator-live-control[open]{max-height:min(60vh,520px)}}

/* Test-/Livemodus */
#obs-mode-row.hidden{display:none}
#obs-mode-state{color:#f1cf9b}
#obs-mode-state.live{color:#4de2a1}

/* Die OBS-Steuerung soll so hoch sein wie ihr Inhalt, nicht bildschirmhoch.
   Die urspruengliche Regel setzte eine feste Hoehe ueber die ganze Seite. */

/* Mobil sitzt die Steuerung direkt im Live-Operations-Blatt. */
.mobile-live-ops-sheet .obs-controls{margin:10px 0 0}

/* Kein Layoutsprung mehr: die OBS-Steuerung bleibt im Fluss und waechst an
   Ort und Stelle nach unten, statt aufgeklappt zur absoluten Ueberlagerung
   ueber die volle Breite zu werden. Die Zeile spannt ohnehin ueber beide
   Spalten, die Breite aendert sich damit nie. */



/* Diese Ausnahme war fuer die frueher absolut positionierte Ueberlagerung noetig:
   sie musste aus dem Panel herausragen duerfen. Jetzt steht die Steuerung im
   Fluss - ohne Scrollen verschwindet sie unterhalb des Bildschirms. */


/* Live Operations: groessere, mit dem Daumen bedienbare Steuerung. */
.mobile-live-ops-sheet .obs-controls{margin:12px 0 0;padding:12px}
.mobile-live-ops-sheet .obs-control-head strong{font-size:1rem}
.mobile-live-ops-sheet .obs-stream-row{gap:10px;padding:10px 0}
.mobile-live-ops-sheet .obs-stream-state{font-size:.86rem}
.mobile-live-ops-sheet .obs-stream-action{min-height:44px;padding:10px 14px;font-size:.86rem}
.mobile-live-ops-sheet .obs-scene-list button,
.mobile-live-ops-sheet #obs-audio-inputs button,
.mobile-live-ops-sheet .obs-macro-panel button{min-height:46px;font-size:.88rem}
.mobile-live-ops-sheet .obs-macro-panel input,
.mobile-live-ops-sheet .obs-macro-panel textarea{font-size:16px}

/* Eigene OBS-Steuerung fuer Mobil - unabhaengig von der Desktop-Ansicht. */
.mobile-obs-group{display:grid;gap:8px;margin-top:12px;padding:11px;border:1px solid rgba(103,181,255,.22);border-radius:12px;background:rgba(8,22,38,.6)}
.mobile-obs-group-title{color:#7f97ac;font-size:.68rem;font-weight:900;letter-spacing:.08em}
.mobile-obs-scene{color:#e7f3ff;font-size:1.05rem;font-weight:800}
.mobile-obs-button{min-height:48px;padding:12px 14px;font-size:.9rem;font-weight:800}
.mobile-obs-button.is-stop{border-color:rgba(255,130,148,.44);color:#ffb0bc}
.mobile-obs-button.is-test{border-color:rgba(255,192,102,.5);color:#ffe4b5}
.mobile-obs-button.is-active{border-color:#c8a3ff;background:#a970ff;color:#07111f}
.mobile-obs-button.is-muted{border-color:rgba(255,130,148,.36);color:#ffb0bc}
.mobile-obs-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px}



/* ------------------------------------------------------------------
   Kontrollraum (nur Desktop). Die Flaeche ist zu niedrig, um Kacheln,
   Alerts und OBS-Steuerung untereinander zu zeigen. Aufgeklappt legt sich
   die Steuerung deshalb INNERHALB des Kontrollraums ueber die Alerts.

   Bewusst ohne Flex/Grid auf <details>: Browser packen dessen Inhalt in
   einen internen Container, Flex-Eigenschaften auf den eigenen Kindern
   greifen dann nicht. Stattdessen werden Kopfzeile und Inhalt absolut im
   Rahmen platziert - das ist in Firefox, Chromium und Safari eindeutig.

   Seitlicher Abstand 21 px = Panel-Polster 12 + Kachel-Polster 9, damit
   die Breite auf- und zugeklappt identisch ist.
   ------------------------------------------------------------------ */
body.desktop-control-room .creator-mode-panel{position:relative;overflow:hidden}
body.desktop-control-room .control-room-panel{min-height:0;overflow:auto;scrollbar-gutter:stable}
body.desktop-control-room .creator-live-control[open]{
  position:absolute;
  inset:12px 22px;
  z-index:12;
  display:block;
  overflow:hidden;
  background:rgba(6,20,34,.985);
  box-shadow:0 18px 48px rgba(0,0,0,.58);
}
body.desktop-control-room .creator-live-control[open]>summary{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
}
body.desktop-control-room .creator-live-control[open]>.obs-controls{
  position:absolute;
  top:0;
  right:0;
  bottom:36px;
  left:0;
  margin:0;
  max-height:none;
  overflow-y:auto;
  scrollbar-gutter:stable;
}
/* Die OBS-Zeile scrollt nie selbst (sie enthaelt zugeklappt nur die Kopfzeile),
   braucht also keinen reservierten Scrollbalken-Platz. Ohne ihn ist die
   Breite zu- und aufgeklappt identisch. */
body.desktop-control-room .control-room-live{overflow:hidden;scrollbar-gutter:auto}

/* Leerzustaende und Hinweise in den Einstellungen */
.settings-empty{display:grid;gap:8px;justify-items:start;padding:14px;border:1px dashed rgba(103,181,255,.32);border-radius:11px;background:rgba(8,22,38,.42)}
.settings-empty strong{color:#e4f1fc;font-size:.88rem}
.settings-empty p{margin:0;color:#91abc0;font-size:.79rem;line-height:1.5}
.settings-scope-hint{margin:0;color:#8fb3d1;font-size:.78rem;line-height:1.45}
/* Formularelemente duerfen eine Settings-Gruppe nie breiter als den Inhalt machen
   (lange Stimmennamen in select zogen den TTS-Bereich auf dem Handy auf 400 px). */
.lh-group>*,.lh-group .pro-field>*,.lh-group .tts-block>*{min-width:0;max-width:100%}
.lh-group select,.lh-group textarea,.lh-group input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]){width:100%;max-width:100%;min-width:0;box-sizing:border-box}

/* Media-Vorschau im Chat (Twitch-Clips, TikTok) */
.clip-cards{display:grid;gap:6px;margin-top:6px}
.clip-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center;width:100%;max-width:420px;padding:6px;border:1px solid rgba(103,181,255,.24);border-radius:10px;background:rgba(8,22,38,.7);color:#dcecff;text-align:left;cursor:pointer;font:inherit}
.clip-card.is-portrait{grid-template-columns:64px minmax(0,1fr)}
.clip-card:hover,.clip-card:focus-visible{border-color:rgba(145,214,255,.6);background:#0f2a44}
.clip-card:focus-visible{outline:2px solid rgba(143,214,255,.8);outline-offset:1px}
.clip-card.is-loading{cursor:default;opacity:.7}
.clip-card-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#04101c}
.clip-card.is-portrait .clip-card-thumb{aspect-ratio:9/16}
.clip-card-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.clip-card.no-thumb .clip-card-thumb img{display:none}
.clip-card-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.18)}
.clip-card-play::before{content:'';width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.clip-card.is-loading .clip-card-play{display:none}
.clip-card-body{display:grid;gap:2px;min-width:0}
.clip-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#f1f7ff;font-size:.86rem;line-height:1.3}
.clip-card-meta{overflow:hidden;color:#8fb3d1;font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}
.chat-text a.clip-link-ready{display:inline-block;max-width:100%;padding:1px 8px;border-radius:999px;background:rgba(145,112,255,.18);color:#dccbff;text-decoration:none;font-size:.9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Hinter dem Modal darf der Chat nicht mitscrollen. */
body.clip-modal-open{overflow:hidden}
.clip-modal{position:fixed;z-index:310;inset:0;display:grid;place-items:center;padding:16px;background:rgba(1,7,13,.82);backdrop-filter:blur(8px);overscroll-behavior:contain;touch-action:none}
.clip-modal.hidden{display:none}
.clip-modal-card{display:flex;flex-direction:column;width:min(960px,100%);max-height:calc(100dvh - 32px);overflow:hidden;border:1px solid rgba(103,181,255,.34);border-radius:16px;background:#071727;box-shadow:0 24px 70px rgba(0,0,0,.62)}
.clip-modal-card.is-portrait{width:min(460px,100%)}
.clip-modal-head{display:flex;flex:0 0 auto;align-items:center;gap:10px;padding:12px 14px}
.clip-modal-titles{display:grid;flex:1 1 auto;min-width:0;gap:2px}
#clip-modal-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#f1f7ff;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
#clip-modal-meta{overflow:hidden;color:#8fb3d1;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}
.clip-modal-link{flex:0 0 auto;padding:9px 12px;border:1px solid rgba(113,192,255,.26);border-radius:10px;background:#102b43;color:#bcd7ec;font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap}
.clip-modal-close{flex:0 0 auto;width:44px;height:44px;padding:0;font-size:1.4rem;line-height:1}
.clip-modal-frame{display:grid;flex:1 1 auto;min-height:0;place-items:center;background:#000}
.clip-modal-frame iframe{display:block;width:100%;max-height:100%;aspect-ratio:16/9;border:0;background:#000;touch-action:auto}
.clip-modal-card.is-portrait .clip-modal-frame iframe{width:auto;height:min(calc(100dvh - 140px),820px);max-width:100%;aspect-ratio:9/16}
.clip-modal-progress{flex:0 0 auto;height:3px;background:rgba(255,255,255,.08)}
.clip-modal-progress i{display:block;width:0;height:100%;background:#a970ff}
.clip-modal.is-manual .clip-modal-progress{visibility:hidden}
@media(max-width:760px),(max-height:540px){
  /* Eigenes Kompakt-Layout fuer Handys (hochkant und quer): volle Flaeche inklusive Safe Areas,
     Kopf oben, Video im Rest zentriert und per Contain-Fit eingepasst (fitClipFrame) -
     TikTok im nativen 9:16, Twitch-Clips in 16:9, jeweils ohne Verzerrung. */
  .clip-modal{padding:0;place-items:stretch}
  .clip-modal-card,.clip-modal-card.is-portrait{width:100%;height:100dvh;max-height:100dvh;padding:var(--livehub-safe-top,0px) 0 var(--livehub-safe-bottom,0px);border:0;border-radius:0}
  .clip-modal-head{padding:10px 12px}
  .clip-modal-frame iframe{width:100%;height:auto;max-height:100%;aspect-ratio:16/9}
  .clip-modal-card.is-portrait .clip-modal-frame iframe{width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:9/16}
}
@media(max-width:760px){
  .clip-card{max-width:none;grid-template-columns:96px minmax(0,1fr)}
  .clip-card.is-portrait{grid-template-columns:60px minmax(0,1fr)}
}
@media(max-height:540px){
  /* Quer gehalten: Kopfzeile schmal, damit dem Video moeglichst viel Hoehe bleibt. */
  .clip-modal-head{padding:6px 10px}
  #clip-modal-meta{display:none}
}

/* Die Channelleiste soll auf einen Blick zeigen, von welcher Plattform ein Kanal
   kommt. Dezent, damit der aktive Tab weiterhin der auffaelligste bleibt. */
.tab[data-platform="twitch"]{border-left:2px solid rgba(169,112,255,.55)}
.signed-out-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 .8rem}
.button-kick{background:#0f2d1c;border-color:#1f7a44;color:#8ef2b4}
.button-kick:hover{background:#153d26;border-color:#53fc18;color:#c6ffd9}
/* Verbindungen als Karten: Zeichen, Name, Status, Knopf in Plattformfarbe. */
.account-delete-action{padding:.6rem 1rem;border:1px solid #b4344a;border-radius:.55rem;background:#7d1f30;color:#ffe3e7;font-weight:800;cursor:pointer}
.account-delete-action:hover:not(:disabled){background:#9c2a3d}
.account-delete-action:disabled{opacity:.45;cursor:not-allowed}
.account-delete-section summary{color:#ffb4bd}
.account-delete-card{border-color:rgba(180,52,74,.55)}
.account-delete-list{margin:.4rem 0 .8rem;padding-left:1.1rem;color:#d8e4f0;font-size:.85rem;line-height:1.5}
.account-delete-billing{margin:0 0 .8rem;padding:.55rem .7rem;border:1px solid rgba(255,196,120,.4);border-radius:.5rem;background:rgba(90,60,20,.28);color:#ffd9a8;font-size:.8rem}
.account-delete-confirm{display:block;margin:0 0 .35rem;font-size:.85rem;color:#d8e4f0}
#account-delete-input{width:100%;padding:.55rem .7rem;border:1px solid #3b4c60;border-radius:.5rem;background:#0a1420;color:#eaf3ff;font-size:.95rem;letter-spacing:.06em}
.account-delete-error{margin:.5rem 0 0;color:#ff9d9d;font-size:.82rem;min-height:1em}
.follow-kick-note{display:flex;align-items:flex-start;gap:.4rem;margin:.55rem 0 0;padding:.5rem .6rem;border:1px solid rgba(83,252,24,.26);border-radius:.55rem;background:rgba(83,252,24,.06);color:#a7c8b4;font-size:.76rem;line-height:1.35}
.platform-links{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.6rem}
.platform-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85rem;padding:.85rem .95rem;border:1px solid var(--line,#2a2a33);border-radius:.75rem;background:rgba(255,255,255,.02)}
.platform-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:1.05rem;background:rgba(255,255,255,.05)}
.platform-link-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.platform-link-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.platform-link-head strong{font-size:.95rem}
.platform-link-detail{color:#93a7bb;font-size:.79rem;overflow-wrap:anywhere}
.platform-state{padding:.1rem .5rem;border:1px solid rgba(147,167,187,.35);border-radius:999px;color:#93a7bb;font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.platform-link[data-connected="true"] .platform-state{border-color:rgba(94,210,158,.5);background:rgba(26,96,69,.28);color:#8ef2b4}
.platform-link-action{flex:none;padding:.5rem .85rem;border:1px solid transparent;border-radius:.6rem;font-size:.84rem;font-weight:700;text-align:center;text-decoration:none;white-space:nowrap}
.platform-link[data-platform="twitch"]{border-color:rgba(169,112,255,.32)}
.platform-link[data-platform="twitch"] .platform-mark{background:rgba(169,112,255,.16)}
.platform-link[data-platform="twitch"] .platform-link-action{background:#6c3fd4;border-color:#8556f5;color:#f3ecff}
.platform-link[data-platform="twitch"] .platform-link-action:hover{background:#7d4ce8}
.platform-link[data-platform="kick"]{border-color:rgba(83,252,24,.28)}
.platform-link[data-platform="kick"] .platform-mark{background:rgba(83,252,24,.14)}
.platform-link[data-platform="kick"] .platform-link-action{background:#1f7a3c;border-color:#53fc18;color:#eafff0}
.platform-link[data-platform="kick"] .platform-link-action:hover{background:#28994b}
.platform-link[data-connected="true"] .platform-link-action{background:transparent;color:#b9cbdd}
.platform-link[data-connected="true"][data-platform="twitch"] .platform-link-action{border-color:rgba(169,112,255,.45)}
.platform-link[data-connected="true"][data-platform="kick"] .platform-link-action{border-color:rgba(83,252,24,.45)}
@media(max-width:560px){.platform-link{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}.platform-link-action{grid-column:1/-1}}
/* Der Weg aus dem Hinweisfenster heraus - der Knopf, den man dort sucht. */
.kick-connect-button{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.15rem;border:1px solid #53fc18;border-radius:.6rem;background:#1f7a3c;color:#eafff0;font-size:.95rem;font-weight:800;text-decoration:none}
.kick-connect-button:hover{background:#28994b;box-shadow:0 8px 22px rgba(83,252,24,.22)}
.kick-connect-button:focus-visible{outline:2px solid #8ef2b4;outline-offset:2px}
.chat-merge{display:inline-flex;gap:.15rem;padding:.15rem;border:1px solid var(--line,#2a2a33);border-radius:.5rem}
.chat-merge button{padding:.2rem .5rem;border:0;border-radius:.4rem;background:transparent;color:inherit;font-size:.78rem;cursor:pointer}
.chat-merge button.active{background:rgba(145,70,255,.3);color:#f2e9ff}
.chat-merge button[data-merge-mode="kick"].active{background:rgba(83,252,24,.26);color:#e6ffe9}
.chat-merge button[data-merge-mode="beide"].active{background:linear-gradient(90deg,rgba(145,70,255,.34) 0 50%,rgba(83,252,24,.3) 50% 100%);color:#f4fff6}
/* Die eigene Nachricht ging in beide Chats und kommt aus beiden zurueck.
   Nebeneinander gehoert sie einmal hin; einzeln betrachtet muss jede Seite
   ihre eigene behalten. */
.message-list[data-merge="beide"] .chat-message[data-echo="true"]{display:none}
.message-list[data-merge="twitch"] .chat-message[data-platform="kick"]{display:none}
.message-list[data-merge="kick"] .chat-message[data-platform="twitch"]{display:none}
.message-list[data-merge="beide"] .chat-message{border-left:2px solid transparent;padding-left:.35rem}
.message-list[data-merge="beide"] .chat-message[data-platform="kick"]{border-left-color:rgba(83,252,24,.5)}
.message-list[data-merge="beide"] .chat-message[data-platform="twitch"]{border-left-color:rgba(145,70,255,.45)}
.tab[data-platform="kick"]{border-left:4px solid rgba(83,252,24,.85)}
.tab[data-platform="kick"]{background-image:linear-gradient(90deg,rgba(83,252,24,.07),transparent 42%)}
.tab[data-platform="twitch"]{background-image:linear-gradient(90deg,rgba(169,112,255,.07),transparent 42%)}
.kick-player{display:block;width:100%;height:100%;border:0;background:#000}

.admin-members-list{display:grid;gap:6px;margin-top:8px;max-height:340px;overflow-y:auto}
.admin-member{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px;border:1px solid rgba(103,181,255,.18);border-radius:9px;background:rgba(7,22,38,.7)}
.admin-member b{color:#dbeeff;font-size:.88rem}
.admin-member-plan{align-self:center;padding:2px 8px;border:1px solid #28577f;border-radius:999px;color:#9bd6ff;font-size:.66rem;font-weight:900}
.admin-member-plan.is-pro{border-color:#a970ff;background:rgba(169,112,255,.16);color:#d9c2ff}
.admin-member-meta{grid-column:1/-1;color:#88a7be;font-size:.74rem}

/* Die Kopfzeile ueber dem Chat kostet auf Mobil 55 von 424 Pixeln, also rund 13
   Prozent der Lesflaeche - unabhaengig davon, ob Stream Together laeuft. Sie wird
   flacher und die Beschriftung kuerzer, damit mehr Chat sichtbar bleibt. */
@media(max-width:999px),(orientation:portrait){
  .chat-head{min-height:42px;padding:6px 10px;gap:8px}
  .chat-head-actions{gap:5px}
  .chat-collaboration-status,.highlight-quick-button{min-height:30px;padding:4px 8px}
  .highlight-quick-button{gap:4px}
  .highlight-quick-label{font-size:0}
  .highlight-quick-label::after{content:"Highlights";font-size:.74rem}
  .chat-collaboration-avatars img{width:18px;height:18px}
  .highlight-quick-button b{min-width:16px;height:16px;font-size:.6rem}
}
@media(max-width:360px){
  /* Ganz schmale Geraete: nur das Symbol, der Name steht weiterhin im Tooltip
     und in der Vorlesehilfe. */
  .highlight-quick-label{display:none}
}

@media(max-width:560px){
  /* Laufen gemeinsamer Chat und Stream Together gleichzeitig, passen beide
     Beschriftungen nicht nebeneinander. Die Avatare zeigen ohnehin schon, dass
     mehrere Channels beteiligt sind, deshalb reicht hier die Kurzform. */
  .chat-collaboration-status .shared-chat-label{font-size:0}
  .chat-collaboration-status .shared-chat-label::after{content:"Gem. Chat";font-size:.74rem}
}

/* Die Fehlermeldung des Players traegt jetzt einen Knopf zum erneuten Versuchen,
   damit niemand den Player schliessen und wieder oeffnen muss. */
.player-error{gap:14px;align-content:center;line-height:1.5}
.player-error button{min-height:40px;padding:9px 16px}

/* Vorschlaege beim Hinzufuegen eines Channels: denselben Namen gibt es oft auf
   beiden Plattformen, deshalb zeigt die Liste Bild, Name, Plattform und ob der
   Kanal gerade sendet. */
.channel-suggestions{display:grid;gap:5px;margin-top:7px}
.channel-suggestion{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:1px solid rgba(103,181,255,.22);border-radius:9px;background:rgba(7,22,38,.85);text-align:left;cursor:pointer}
.channel-suggestion:hover{border-color:rgba(147,205,255,.55)}
.channel-suggestion img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#0a1929}
.channel-suggestion span{display:grid;min-width:0}
.channel-suggestion b{color:#dbeeff;font-size:.86rem}
.channel-suggestion small{color:#8fabc0;font-size:.72rem}
.channel-suggestion[data-platform="twitch"]{border-left:2px solid rgba(169,112,255,.6)}
.channel-suggestion[data-platform="kick"]{border-left:2px solid rgba(83,252,24,.6)}

/* Der aktive Tab trug bisher immer Twitch-Lila, auch bei einem Kick-Kanal. Die
   Plattform gewinnt jetzt, damit auf einen Blick klar ist, wo man gerade ist.
   Nach den Regeln oben gesetzt, damit sie auch das Pro-Theme uebersteuern. */
.tab[data-platform="kick"].active{background:#0e7a1b;border-color:#53fc18;color:#eafff0}
.tab[data-platform="kick"].active span{color:#c8ffd6}
.tab[data-platform="kick"].active:hover{background:#129422;border-color:#7dff52}
.tab[data-platform="kick"].active .tab-access-icon{background:rgba(8,58,16,.28)}
.tab[data-platform="twitch"].active{background:#a970ff;border-color:#c8a3ff;color:#07111f}
.tab[data-platform="twitch"].active span{color:#31105c}
.tab[data-platform="twitch"].active:hover{background:#bb8bff;border-color:#e0c9ff}

/* Plattform-Marke im Verwalten-Fenster, damit gleichnamige Kanaele unterscheidbar
   sind, ohne dass man sie oeffnen muss. */
/* Die Plattform steht als Farbe am linken Rand der Zeile, nicht als Wort neben
   dem Namen - lesbar auf einen Blick und ohne den Namen zu verstellen. */
.channel-manager-row strong{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow:visible}
.channel-manager-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.channel-manager-row .channel-live-dot{flex:none}
.channel-manager-head-active{color:#ffa440!important;letter-spacing:.03em;animation:zaehler-text-atmen 3.4s ease-in-out infinite}
.channel-manager-head-active::before{content:"●";margin-right:.4rem;font-size:.7em;vertical-align:middle}
@keyframes zaehler-text-atmen{
  0%,100%{opacity:.62;text-shadow:none}
  50%{opacity:1;text-shadow:0 0 12px rgba(255,164,64,.75)}
}
@media(prefers-reduced-motion:reduce){
  .channel-manager-head-active{animation:none;opacity:1}
}
/* Faehrt herein und wieder hinaus: eine Meldung, die zum Klick gehoert und
   danach nicht stehen bleibt. */
/* Statt des Browserfensters: gehoert zur Seite, laesst sich gestalten und
   traegt dieselbe Handschrift wie alles andere. */
/* Ein Zustand, eine Meldung: solange sie steht, weiss man, warum nichts
   ankommt - und die einzelnen Fehlermeldungen bleiben still. */
/* Faehrt unten herein, wo der Daumen ohnehin ist. Einmal weggeschickt kommt
   er nicht wieder - das merkt sich das Geraet, nicht das Konto. */
.install-banner{position:fixed;z-index:840;right:12px;bottom:12px;left:12px;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 24px));margin:0 auto;padding:12px 14px;border:1px solid #2f5f8a;border-radius:14px;background:#0c2035;box-shadow:0 18px 48px rgba(0,0,0,.62);opacity:0;transform:translateY(14px);transition:opacity .28s ease,transform .28s ease}
.install-banner.is-shown{opacity:1;transform:translateY(0)}
.install-banner.hidden{display:none}
.install-banner-icon{flex:none;font-size:1.5rem}
.install-banner-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.install-banner-text strong{color:#eaf3ff;font-size:.92rem}
.install-banner-text span{color:#9fbcd6;font-size:.76rem}
.install-banner-go.hidden{display:none}
.install-banner-go{flex:none;padding:.55rem .95rem;border:1px solid #4aa3ff;border-radius:.6rem;background:#1d5a8f;color:#eaf6ff;font-weight:800;font-size:.85rem;cursor:pointer}
.install-banner-go:hover{background:#246ba8}
.install-banner-dismiss{flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:#8fa9c0;font-size:1.15rem;line-height:1;cursor:pointer}
.install-banner-dismiss:hover{background:rgba(255,255,255,.08);color:#dceaf7}
@media(max-width:560px){.install-banner{gap:9px;padding:10px 11px}.install-banner-text span{display:none}}
@media(prefers-reduced-motion:reduce){.install-banner{transition:none;transform:none}}
.offline-banner{position:fixed;z-index:880;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;max-width:min(560px,calc(100vw - 28px));padding:10px 18px;border:1px solid rgba(255,150,150,.6);border-radius:999px;background:#521a1a;box-shadow:0 16px 44px rgba(0,0,0,.6);color:#ffdede;font-size:.84rem;font-weight:600}
.offline-banner.hidden{display:none}
.offline-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 9px rgba(255,90,90,.9);animation:offline-atmen 1.8s ease-in-out infinite}
@keyframes offline-atmen{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.offline-dot{animation:none;opacity:1}}
.confirm-modal{position:fixed;z-index:900;inset:0;display:grid;place-items:center;padding:20px;background:rgba(1,7,13,.72);opacity:0;transition:opacity .2s ease}
.confirm-modal.is-shown{opacity:1}
.confirm-modal.hidden{display:none}
.confirm-card{width:min(430px,100%);padding:22px;border:1px solid #244765;border-radius:14px;background:#08182a;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:translateY(-10px);transition:transform .2s ease}
.confirm-modal.is-shown .confirm-card{transform:translateY(0)}
.confirm-card h2{margin:0 0 8px;font-size:1.05rem;color:#eaf3ff}
.confirm-card p{margin:0 0 18px;color:#b6cbdf;font-size:.88rem;line-height:1.45;white-space:pre-line}
.confirm-actions{display:flex;justify-content:flex-end;gap:9px}
.confirm-actions button{padding:.55rem 1.05rem;border-radius:.55rem;font-weight:700}
.confirm-danger{background:#7d1f30;border:1px solid #b4344a;color:#ffe3e7}
.confirm-danger:hover{background:#9c2a3d}
@media(prefers-reduced-motion:reduce){.confirm-modal,.confirm-card{transition:none;transform:none}}
.channel-manager-note{position:fixed;z-index:340;top:22px;left:50%;max-width:min(560px,calc(100vw - 32px));margin:0;padding:11px 20px;border:1px solid rgba(255,164,64,.55);border-radius:999px;background:#40250a;box-shadow:0 16px 44px rgba(0,0,0,.65);color:#ffd08f;font-size:.84rem;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,-14px);transition:opacity .26s ease,transform .26s ease;pointer-events:none}
.channel-manager-note.is-shown{opacity:1;transform:translate(-50%,0)}
.channel-manager-note[data-art="fehler"]{border-color:rgba(255,150,150,.7);background:#57131b;color:#ffdede}
@media(prefers-reduced-motion:reduce){.channel-manager-note{transition:none;transform:translate(-50%,0)}}
.channel-manager-limit{margin:0 0 10px;padding:8px 10px;border:1px solid rgba(255,138,138,.42);border-radius:8px;background:rgba(74,20,20,.32);color:#ffc9c9;font-size:.8rem}
.channel-manager-row{border-left:3px solid transparent;padding-left:9px;border-top-left-radius:4px;border-bottom-left-radius:4px}
.channel-manager-row[data-platform="kick"]{border-left-color:#53fc18;background:linear-gradient(90deg,rgba(83,252,24,.08),transparent 34%)}
.channel-manager-row[data-platform="twitch"]{border-left-color:#a970ff;background:linear-gradient(90deg,rgba(169,112,255,.08),transparent 34%)}

/* --- Kanalleiste auf dem Desktop --- */
@media(min-width:1000px) and (orientation:landscape){
  .channelbar{grid-template-columns:minmax(0,1fr)}
  .channelbar .add-area{grid-column:1/-1}
  #notice:empty{display:none;margin:0}
  .tabs{gap:6px;max-height:calc(3 * (var(--tab-schrift) * 3.3) + 20px)}
  /* Breite und Hoehe rechnen aus der Schriftgroesse: stellt man die Schrift
     groesser, wachsen die Knoepfe mit, statt den Text abzuschneiden. Die Breite
     fasst rund zwoelf Zeichen. */
  .channelbar{--tab-schrift:calc(var(--livehub-schrift,16px) * .85)}
  .channelbar .tab-wrap{flex:0 0 calc(var(--tab-schrift) * 12.8);min-width:0}
  .channelbar .tab{width:100%;min-width:0;height:calc(var(--tab-schrift) * 3.3);padding:5px 9px;padding-right:calc(var(--tab-schrift) * 1.9);border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:1px}
  .channelbar .tab strong{font-size:var(--tab-schrift);line-height:1.15}
  .channelbar .tab>span{font-size:calc(var(--tab-schrift) * .78);line-height:1.1}
  .tab[data-platform]{border-left-width:4px}
  .tab>span{margin-top:0}
  .tab-remove{right:2px;padding:2px 5px;font-size:.85rem}
  .channel-live-dot{margin-left:5px}
}

/* --- Chat und Player koennen auseinandergehen --- */
.chat-title-wrap{position:relative;display:flex;align-items:center;gap:.5rem;min-width:0}
#chat-title{cursor:pointer;border-radius:.4rem;padding:.1rem .35rem;margin-left:-.35rem}
/* Chatkopf, Player und die Auswahl darunter sind dieselbe Ebene - dann tragen
   sie auch dieselbe Groesse. */
#chat-title,.player-panel-head>strong,.chat-switcher-row strong{font-size:calc(var(--livehub-schrift,16px) * .95);line-height:1.25}
#chat-title::after{content:"▾";margin-left:.3rem;font-size:.75em;opacity:.6}
#chat-title:hover,#chat-title:focus-visible{background:rgba(105,188,255,.14);outline:none}
/* Schwebt oben links ueber dem Chat. In der Kopfzeile drueckte er die
   Knoepfe daneben uebereinander. Eigene Flaeche mit Verlauf und Schatten,
   damit er sich vom Chat darunter abhebt. */
.chat-back{
  position:absolute;z-index:29;top:54px;left:12px;
  display:inline-flex;align-items:center;gap:6px;
  max-width:min(80%,24ch);padding:10px 16px;
  border:1px solid rgba(140,205,255,.6);border-radius:999px;
  background:linear-gradient(180deg,rgba(24,64,102,.98),rgba(8,30,50,.98));
  box-shadow:0 10px 28px rgba(0,0,0,.55),inset 0 1px 0 rgba(180,225,255,.28);
  color:#dbeeff;font-size:.92rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.chat-back:hover{background:linear-gradient(180deg,#2a6ea8,#12405f);border-color:#8fd6ff;color:#fff}
/* Solange der Rueckweg da ist, beginnen die Highlight-Meldungen darunter. */
.chat-stage.hat-rueckweg .highlight-notifications{margin-top:46px}
.chat-back:hover{background:rgba(16,52,82,.95);border-color:rgba(105,188,255,.7)}
.chat-switcher{position:absolute;z-index:40;top:calc(100% + .35rem);left:0;display:grid;gap:.2rem;width:max(240px,100%);max-height:min(340px,50vh);overflow-y:auto;padding:.35rem;border:1px solid #244765;border-radius:.6rem;background:#06111e;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.chat-switcher-row{display:grid;gap:.1rem;padding:.45rem .55rem;border:0;border-left:3px solid transparent;border-radius:.4rem;background:transparent;color:#e6f3ff;text-align:left;cursor:pointer}
.chat-switcher-row:hover{background:rgba(105,188,255,.12)}
.chat-switcher-row.is-current{background:rgba(105,188,255,.18)}
.chat-switcher-row[data-platform="twitch"]{border-left-color:rgba(169,112,255,.55)}
.chat-switcher-row[data-platform="kick"]{border-left-color:rgba(83,252,24,.55)}
.chat-switcher-row span{color:#8fa9c0;font-size:.72rem}
.chat-switcher-empty{margin:0;padding:.5rem;color:#8fa9c0;font-size:.78rem}
/* --- Aktive Chats atmen --- */
/* Gruen ist die Farbe von Kick, nicht die Bedeutung "aktiv". Das Signal ist
   deshalb die Bewegung, nicht der Farbton: jeder Knopf atmet in der Farbe
   seiner eigenen Plattform. Wer sich nicht ruehrt, ist nicht verbunden.
   Der Innenabstand bleibt der eines gewoehnlichen Knopfes, sonst sitzt der
   Name in aktiven Knoepfen anders als in den uebrigen. */
.tab.is-chat-active::after{content:none}
.tab.is-chat-active{position:relative;overflow:hidden}
.tab.is-chat-active::before{
  content:"";position:absolute;z-index:2;right:0;bottom:0;left:0;height:3px;pointer-events:none;
  background:var(--puls-rand);
  box-shadow:0 0 10px -1px var(--puls-rand);
  animation:chat-atmen 3.4s ease-in-out infinite;
}
.tab.is-chat-active{--puls-rand:#ffa440}

.tab.is-chat-active>*{position:relative;z-index:1}
.tab-wrap:nth-child(3n+2) .tab.is-chat-active::before{animation-delay:-1.1s}
.tab-wrap:nth-child(3n+3) .tab.is-chat-active::before{animation-delay:-2.2s}
@keyframes chat-atmen{
  0%,100%{opacity:.35}
  50%{opacity:1}
}
/* Die Zahl der laufenden Chats ist der eigentliche Zustand - sie bekommt eine
   eigene Signalfarbe, die zu keiner Plattform gehoert, und atmet im selben Takt
   wie die Knoepfe. */
#channel-active-counter{
  border-color:rgba(255,164,64,.55)!important;
  background:rgba(92,52,10,.4)!important;
  color:#ffc27a!important;
  font-weight:800;letter-spacing:.02em;
  animation:zaehler-atmen 3.4s ease-in-out infinite;
}
@keyframes zaehler-atmen{
  0%,100%{box-shadow:0 0 0 0 transparent;border-color:rgba(255,164,64,.4)}
  50%{box-shadow:0 0 0 1px rgba(255,164,64,.65),0 0 14px -3px rgba(255,164,64,.8);border-color:rgba(255,178,92,.9)}
}
@media(prefers-reduced-motion:reduce){
  #channel-active-counter{animation:none}
  .tab.is-chat-active::before{animation:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .tab.is-chat-active::before{animation:none;opacity:.6}
}

/* --- Mit dem Finger bedienbar, unabhaengig von der Breite --- */
@media(hover:none),(pointer:coarse){
  .tab-remove{min-width:34px;min-height:34px}
  .chat-merge button{min-height:34px;padding:.35rem .7rem}
  .channel-manager-row button{min-height:38px}
  .platform-link-action{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
  #chat-title{padding:.3rem .5rem}
  .chat-switcher-row{padding:.6rem .65rem}
  #chat-send{min-height:42px}
  .emote-picker-head button{min-width:34px;min-height:34px}
}

/* --- Tablet im Hochformat --- */
/* Zu schmal fuer Bild und Chat nebeneinander, aber viel breiter als ein Handy:
   die Kanalleiste nutzt den Platz mit mehr Spalten statt mit breiteren Knoepfen. */
@media(min-width:700px) and (orientation:portrait) and (min-height:700px){
  .shell{width:100vw}
  .dashboard{padding:10px;gap:10px}
  .tabs{grid-template-columns:repeat(var(--mobile-tab-columns,4),minmax(0,1fr));max-height:calc(2 * 52px);overflow-y:auto}
  /* Hoechstens gut ein Drittel fuer das Bild; der Rest gehoert dem Chat. */
  body.player-open .player-panel{max-height:38vh}
  body.player-open .player-mount{max-height:calc(38vh - 42px)}
  .chat-stage{min-height:0}
}

/* --- Wenig Hoehe, viel Breite: gedrehtes Handy --- */
/* Hier zaehlt jede Zeile. Die Kanalleiste bekommt mehr Spalten und weniger
   Reihen, damit vom Chat etwas uebrig bleibt. */
@media(max-width:999px) and (max-height:560px){
  .tabs{grid-template-columns:repeat(var(--mobile-tab-columns,5),minmax(0,1fr));max-height:calc(2 * 46px)}
  .dashboard{padding:6px}
}

/* --- Wenig Hoehe: gedrehtes Handy --- */
@media(max-height:560px){
  .chat-stage{height:auto;min-height:0}
  .dashboard{gap:6px}
  .channelbar{padding:2px 0}
  .channel-activity-bar{margin-top:2px;font-size:.7rem}
  .channel-activity-bar small{display:none}
  .chat-head{padding:5px 9px}
  .chat-compose{padding:5px 8px}
  /* Der Player nimmt sonst die halbe Hoehe; im Querformat ist er zuschaltbar,
     aber nicht mehr die Hauptsache. */
  body.player-open .player-panel{max-height:46vh}
}

/* Ganz flach: dann bleibt nur noch der Chat selbst. */
@media(max-height:430px){
  .channel-activity-bar{display:none}
  .chat-head-actions .player-toggle-label{display:none}
}

/* --- Querformat: nebeneinander statt untereinander --- */
@media(min-width:700px) and (max-height:560px){
  .shell{position:relative;left:auto;width:100vw;max-width:none;margin:0;transform:none}
  .dashboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding:8px}
  .channelbar{grid-column:1/-1;grid-row:1}
  /* Eine Reihe Kanaele, waagerecht durchblaetterbar: mehr Hoehe ist hier nicht
     zu entbehren. */
  .channelbar .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;max-height:none;gap:6px;scrollbar-width:none}
  .channelbar .tabs::-webkit-scrollbar{display:none}
  .channelbar{padding:0}
  .channelbar>div:first-child{display:grid;gap:4px}
  .channel-activity-bar{display:flex;gap:6px;margin:0;font-size:.68rem}
  .channel-activity-bar small,#tab-count{display:none}
  .channelbar .tab-wrap{flex:0 0 146px;min-width:0}
  .channelbar .tab{width:100%;height:42px;display:flex;flex-direction:column;justify-content:center}
  .channelbar .tab>span{display:none}
  .chat-stage{grid-column:2;grid-row:2;height:100%;min-height:0;max-height:100%}
  .player-panel{grid-column:1;grid-row:2;height:100%;min-height:0;max-height:100%}
  /* Ohne Bild nimmt der Chat die ganze Breite. */
  body:not(.player-open) .chat-stage{grid-column:1/-1}
  body:not(.player-open) .player-panel{display:none}
  .player-mount{height:100%;min-height:0;aspect-ratio:auto}
  body.player-open .player-panel{max-height:100%;height:100%;align-self:stretch;grid-template-rows:auto minmax(0,1fr)}
  body.player-open .player-mount{max-height:100%;aspect-ratio:auto}
  .player-panel-head,.chat-head{flex-wrap:nowrap;gap:6px;padding:5px 9px;min-height:42px;height:42px;box-sizing:border-box;align-items:center}
  .player-panel-head>strong{font-size:.84rem}
  /* Der Rahmen des Bildes fuellt seine Reihe aus. */
  .player-mount>iframe,.player-mount>div{width:100%;height:100%}
}

/* --- Nebeneinander heisst auch: auf einer Linie --- */
@media(min-width:1000px) and (orientation:landscape){
  .player-panel-head,.chat-head{min-height:46px;height:46px;box-sizing:border-box;align-items:center}
}

/* --- Flache Fenster: die Leiste nimmt weniger --- */
@media(max-height:1050px){
  .tabs{max-height:calc(2 * (var(--tab-schrift, 13px) * 3.3) + 14px)}
  .channel-activity-bar{margin-top:4px}
}
@media(max-height:1050px){
  #tab-count{display:none}
  .channelbar{padding:8px 10px}
  .channel-activity-bar{margin-top:2px}
}
@media(max-height:620px){
  .tabs{max-height:calc(1 * (var(--tab-schrift, 13px) * 3.3) + 8px)}
}
/* Ganz flach: dann bleibt wirklich nur der Chat. Steht bewusst hinter dem
   Querformat-Block, sonst gewinnt dessen Anzeige der Zeile. */
@media(max-height:430px){
  .channel-activity-bar{display:none}
  .channelbar>div:first-child{gap:0}
}

/* Kanalwerkzeuge in der Kopfzeile: nur im Desktop-Querformat, mobil bleibt
   die Leiste unter den Channels. */
.header-channel-tools{display:flex;align-items:center;min-width:0;margin-left:9px}
/* Abgemeldet gibt es keine Channels. Zaehler, Verwalten und Einklappen haben
   auf der Anmeldeansicht deshalb nichts im Kopf zu suchen. */
body:has(#signed-in.hidden) .header-channel-tools{display:none}
@media(min-width:1000px) and (orientation:landscape){
.header-channel-tools{display:flex;align-items:center;gap:8px;min-width:0;margin-left:36px;margin-right:auto}
.header-channel-tools #channel-active-counter{padding:4px 9px;border:1px solid rgba(94,210,158,.34);border-radius:999px;background:rgba(26,96,69,.22);color:#78efb7;font-size:.74rem;font-weight:850;white-space:nowrap}
.header-channel-tools button{flex:0 0 auto;min-height:32px;margin:0;padding:5px 11px;font-size:.72rem;white-space:nowrap}
body.kopf-kanalwerkzeuge .channel-activity-bar{display:none}
body.channels-collapsed.kopf-kanalwerkzeuge .channelbar{display:none}
body.channels-collapsed.kopf-kanalwerkzeuge .channelbar:has(#moderation-auth:not(.hidden)){display:grid}
body.channels-collapsed.kopf-kanalwerkzeuge:not(.desktop-control-room) .dashboard{grid-template-rows:minmax(0,1fr)}
body.kopf-kanalwerkzeuge .chat-head{height:auto;min-height:46px}
body.kopf-kanalwerkzeuge .chat-head .player-toggle{flex:0 0 auto;justify-content:center;width:34px;min-width:34px;height:32px;padding:0;font-size:0}
body.kopf-kanalwerkzeuge .chat-head .player-toggle .player-toggle-label{display:none}
body.kopf-kanalwerkzeuge .chat-head .player-toggle .player-toggle-icon{width:18px;height:18px}
.player-panel-head #chat-collaboration-status{flex:0 0 auto;max-width:40%}
body.channels-collapsed.kopf-kanalwerkzeuge:not(.desktop-control-room) .dashboard>#player-panel,body.channels-collapsed.kopf-kanalwerkzeuge:not(.desktop-control-room) .dashboard>#chat-stage{grid-row:1}
}

/* Chat-Hype: wie weit ein Chat gerade ueber seiner eigenen Normallast liegt.
   Rot, Orange und Gruen sind am Reiter schon vergeben (live, verbunden,
   aktiv), deshalb zeigt der Hype keine eigene Farbe, sondern eine Menge. */
.tab{position:relative;--hype:0}
.tab>.tab-hype{position:absolute;top:0;right:0;left:0;height:2px;overflow:hidden;border-radius:9px 9px 0 0;background:rgba(120,170,220,.12);opacity:0;transition:opacity .5s ease}
.tab.ist-hype>.tab-hype{opacity:1}
.tab>.tab-hype i{display:block;width:calc(var(--hype,0) * 100%);height:100%;background:linear-gradient(90deg,#ffbd54,#ee3fa9,#b54eff);transition:width .7s ease}
.channelbar .tab-wrap{position:relative}
.channelbar .tabs{padding-top:13px;padding-right:12px;margin-top:-13px;margin-right:-12px}
.tab-wrap>.tab-hype-marke{position:absolute;top:-8px;right:-6px;z-index:4;box-shadow:0 3px 10px rgba(2,7,14,.7);display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 5px;border:1px solid rgba(255,189,84,.34);border-radius:6px;background:rgba(8,20,34,.92);color:#ffd6a0;font-size:.6rem;font-weight:900;line-height:1}
.tab-wrap>.tab-hype-marke img{width:15px;height:15px;object-fit:contain}
.tab-wrap:has(.tab.active)>.tab-hype-marke{border-color:rgba(255,189,84,.6)}
.tab-wrap>.tab-hype-marke[hidden],.hype-spitze[hidden]{display:none}
/* Geht in einem Chat wirklich die Post ab, brennt der Knopf. Wichtig ist,
   WAS sich bewegt: Helligkeit, die auf und ab geht, liest das Auge als
   Blinken, egal wie weich der Verlauf ist. Hier zieht deshalb alles in eine
   Richtung durch, der Verlauf, der Streifen und die Flammen, und der Schein
   nach aussen steht die ganze Zeit gleich. Wie schnell, haengt am Faktor;
   --glut setzt das Skript. */
.hype-spitze{--glut:0;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:5px 12px;overflow:hidden;border-radius:8px;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,226,170,.95)!important;background-color:#4d0e01!important;background-image:linear-gradient(100deg,#4d0e01,#ff5a12 11%,#ffd15c 20%,#ff3d7f 33%,#5e1202 47%,#ff5a12 60%,#ffe9a8 70%,#b13cff 84%,#4d0e01)!important;background-size:340% 100%!important;background-repeat:repeat!important;color:#fff!important;font-size:.74rem;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 12px rgba(255,205,140,.8);box-shadow:0 0 16px rgba(255,140,50,.8),0 0 38px rgba(255,80,30,.5),0 0 72px rgba(224,64,155,.38)!important;animation:hype-fluss calc(3.4s - var(--glut,0) * 2.3s) linear infinite,hype-farben calc(9s - var(--glut,0) * 5.5s) linear infinite,hype-auf .45s ease-out 1}
/* Der Streifen laeuft ohne Pause durch. Eine Pause waere wieder ein Blinken. */
.hype-spitze::after{content:'';position:absolute;z-index:-1;top:-40%;bottom:-40%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 42%,rgba(255,246,220,.78) 55%,transparent);mix-blend-mode:screen;transform:translateX(-150%);animation:hype-streifen calc(2.8s - var(--glut,0) * 1.8s) linear infinite}
/* Die Flammen wandern seitlich, nicht auf und ab: auch das ist Zug, kein Puls. */
.hype-spitze::before{content:'';position:absolute;z-index:-2;top:-30%;right:-6%;bottom:-6%;left:-6%;background-repeat:repeat-x,repeat-x,no-repeat,no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 q15 -11 30 0 t30 0 t30 0 t30 0 V40 H0 Z' fill='%23ffffff' fill-opacity='.24'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 q15 9 30 0 t30 0 t30 0 t30 0 V40 H0 Z' fill='%23ffe6b0' fill-opacity='.17'/%3E%3C/svg%3E"),radial-gradient(closest-side at 50% 100%,rgba(255,198,96,.5),rgba(255,198,96,0) 74%),radial-gradient(closest-side at 50% 100%,rgba(255,120,38,.44),rgba(255,120,38,0) 74%);background-size:118px 168%,92px 150%,44% 140%,36% 122%;mix-blend-mode:screen;animation:hype-welle calc(3.6s - var(--glut,0) * 2.5s) linear infinite}
/* Kein filter beim Schweben: der laege auf derselben Eigenschaft wie das
   Farbwandern und wuerde es anhalten. */
.hype-spitze:hover,.hype-spitze:focus-visible{border-color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 16px rgba(255,232,190,1)}
/* Am Anschlag zieht alles rund doppelt so schnell und der Schein traegt weiter. */
.hype-spitze.lodert{box-shadow:0 0 20px rgba(255,170,70,.95),0 0 48px rgba(255,80,30,.65),0 0 92px rgba(224,64,155,.5),0 0 130px rgba(139,63,240,.32)!important;animation:hype-fluss calc(3.4s - var(--glut,0) * 2.3s) linear infinite,hype-farben calc(9s - var(--glut,0) * 5.5s) linear infinite,hype-schlag calc(1.5s - var(--glut,0) * .55s) ease-in-out infinite,hype-auf .45s ease-out 1}
.tab-wrap>.tab-hype-marke.lodert{border-color:rgba(255,226,170,.95);background:linear-gradient(100deg,#4d0e01,#ff5a12 18%,#ffd15c 30%,#ff3d7f 48%,#b13cff 72%,#4d0e01);background-size:300% 100%;color:#fff;box-shadow:0 0 10px rgba(255,140,50,.85),0 0 24px rgba(224,64,155,.5),0 3px 10px rgba(2,7,14,.7);animation:hype-fluss 1.6s linear infinite}
@keyframes hype-fluss{from{background-position:0 50%}to{background-position:340% 50%}}
@keyframes hype-streifen{from{transform:translateX(-150%)}to{transform:translateX(440%)}}
@keyframes hype-welle{from{background-position:0 66%,0 84%,6% 102%,58% 108%}to{background-position:118px 66%,-92px 84%,38% 96%,90% 100%}}
/* Einmal aufglühen beim Erscheinen, danach nie wieder: das ist der Auftritt. */
@keyframes hype-auf{from{opacity:0;transform:translateY(-5px) scale(.9)}to{opacity:1;transform:none}}
@keyframes hype-farben{0%{filter:hue-rotate(-15deg) saturate(1.1)}50%{filter:hue-rotate(17deg) saturate(1.1)}100%{filter:hue-rotate(-15deg) saturate(1.1)}}
@keyframes hype-schlag{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.tab>.tab-hype,.tab>.tab-hype i{transition:none}
  /* Wer Bewegung abgestellt hat, bekommt das Leuchten trotzdem, nur still. */
  /* Wer Bewegung abgestellt hat, bekommt dieselbe Glut, nur ohne Zug. */
  .hype-spitze,.hype-spitze.lodert,.hype-spitze::before,.tab-wrap>.tab-hype-marke.lodert{animation:none;background-position:38% 50%,0 66%,0 84%,22% 100%,74% 100%}
  .hype-spitze::after,.hype-spitze.lodert::after{animation:none;opacity:0}}

@media(max-width:999px),(orientation:portrait){
.hype-spitze{min-height:28px;padding:4px 8px;font-size:.68rem}
.header-channel-tools{margin-left:7px}
}

/* Womit bezahlt wird, gehoert neben die Schaltflaeche, nicht ins Impressum. */
.pro-zahlweg{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;margin:0 0 14px;padding:11px 14px;border:1px solid rgba(103,181,255,.22);border-radius:11px;background:rgba(5,16,28,.7);color:#b7ccdc;font-size:.8rem;line-height:1.5}
.pro-zahlweg b{padding:5px 10px;border-radius:8px;background:rgba(0,112,186,.22);color:#8ed4ff;font-size:.76rem;font-weight:900;white-space:nowrap}

/* Lesbarer Chat: der Zaehler an einer gebuendelten Zeile und die Schalter. */
.chat-message>.chat-wieder{display:inline-block;margin-left:7px;padding:1px 7px;border:0;border-radius:999px;background:rgba(113,199,255,.16);color:#8ed4ff;font-family:inherit;font-size:.72em;font-weight:900;line-height:1.5;vertical-align:middle;cursor:pointer}
.chat-message>.chat-wieder:hover{background:rgba(113,199,255,.3);color:#d5edff}
.lesbar-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;margin-top:12px;cursor:pointer}
.lesbar-zeile input{width:auto;margin-top:3px}
.lesbar-zeile span{color:#8ba4bd;font-size:.79rem;line-height:1.5}
.lesbar-zeile b{display:block;color:#dcedfa;font-size:.84rem}
#message-action-mute{white-space:nowrap}
.lesbar-stumm{margin-top:16px;padding-top:14px;border-top:1px solid rgba(103,181,255,.16)}
.lesbar-stumm strong{display:block;margin-bottom:8px;color:#dcedfa;font-size:.84rem}

/* Vom Moderator entfernte Nachrichten bleiben stehen, nur unlesbar. Die Zeile
   behaelt ihre Hoehe, dadurch verschiebt sich der sichtbare Chat nicht. */
.chat-message.chat-entfernt .chat-text{filter:blur(6px);opacity:.45;user-select:none;pointer-events:none}
.chat-message.chat-entfernt{position:relative}
.chat-message.chat-entfernt::after{content:'vom Moderator entfernt';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:2px 9px;border-radius:999px;background:rgba(8,20,34,.92);color:#9dc2df;font-size:.68rem;font-weight:800;white-space:nowrap;pointer-events:none}

/* Wer hat die gestapelte Zeile geschrieben: steht an der Marke, nicht oben am
   Fensterrand, wo man es nicht sucht. */
.chat-message.hat-wieder-info{position:relative;z-index:5}
.chat-message>.wieder-info{position:absolute;right:0;bottom:100%;z-index:6;display:grid;gap:3px;width:max-content;max-width:min(280px,84%);margin-bottom:3px;padding:9px 12px;border:1px solid rgba(113,199,255,.34);border-radius:11px;background:rgba(6,17,29,.97);color:#c9dcee;font-size:.76rem;line-height:1.45;box-shadow:0 12px 34px rgba(2,7,14,.7)}
.wieder-info span:first-child{color:#f1f7ff;font-weight:800}

/* Kanalname und Zuschauerzahl im Playerkopf stehen nebeneinander und gehoeren
   deshalb in dieselbe Schriftgroesse. Die Zahl war kleiner. */
.player-panel-head>.player-viewers{font-size:calc(var(--livehub-schrift,16px) * .95)}