.profile-main .profile-handle { display:block; width:auto; margin:3px 0 0; padding:0; border:0; border-radius:0; background:transparent; color:#c5b3d9; font-size:11px; font-weight:500; letter-spacing:0; }
.profile-identity-note { display:none!important; }
.profile-bio-image-link { display:inline-block; width:auto; max-width:100%; overflow:visible; border:0; border-radius:0; background:transparent!important; background-image:none!important; }
.profile-bio-image-token.has-outline .profile-bio-image-link { border:0; box-shadow:none; }
.profile-bio-image { display:block; width:100%; max-width:100%; height:auto; max-height:440px; object-fit:contain; border:1px solid rgba(181,130,255,.36); border-radius:7px; }
.profile-bio-image-token.has-outline .profile-bio-image { outline:2px solid #c29af3; outline-offset:1px; }
.bio-image-setting-preview { background:transparent!important; background-image:none!important; }
.bio-image-setting-preview img { border:1px solid rgba(181,130,255,.36); border-radius:3px; }
.profile-menu .profile-menu-feature { min-height:40px; display:flex; grid-template-columns:none; gap:0; padding:0 10px; border-color:transparent; background:transparent; }
.profile-menu .profile-menu-feature:hover { border-color:#b989ee25; background:#ffffff08; }
.profile-menu-feature > i:first-child { width:17px!important; height:auto; border-radius:0; background:transparent; color:#c7a4f2!important; font-size:13px!important; }
.profile-menu-feature > span { min-width:0; display:block; flex:1; margin-left:0; color:#e4d9ef; font-size:9px; }

/* Browser-version HTML provides its own download/loading screen. Keep Stelah's duplicate status card out of the way, but retain actionable failures. */
.miwibits-game-player.is-browser-version:not(.is-error) .miwibits-player-status { opacity:0!important; visibility:hidden!important; pointer-events:none!important; }

/* The friend profile button belongs in the same centered six-action group. */
.friend-activity-footer { justify-content:center!important; }
.friend-activity-actions { flex:0 0 auto!important; justify-content:center!important; gap:4px!important; }
.friend-activity-actions > .friend-activity-profile { width:42px!important; min-width:42px!important; height:42px!important; min-height:42px!important; flex:0 0 42px!important; }
@media(max-width:700px) {
  .friend-activity-footer { justify-content:center!important; }
  .friend-activity-actions { flex:0 0 auto!important; justify-content:center!important; }
}
@media(max-width:420px) {
  .friend-activity-actions { gap:3px!important; }
  .friend-activity-actions > .friend-activity-profile { width:38px!important; min-width:38px!important; height:38px!important; min-height:38px!important; flex-basis:38px!important; }
}

/* Global voice has a compact, collapsible roster panel like a one-to-one call. */
.global-voice-panel { position:fixed; z-index:2147482999; right:20px; bottom:20px; width:min(340px,calc(100vw - 24px)); max-height:min(68dvh,520px); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:9px; overflow:hidden; padding:13px; border:1px solid #b989ee70; border-radius:18px; background:linear-gradient(145deg,rgba(38,27,51,.98),rgba(18,16,24,.98)); color:#f3eaff; box-shadow:0 20px 65px #0009; backdrop-filter:blur(16px); }
.global-voice-panel[hidden] { display:none!important; }
.global-voice-panel header,.global-voice-panel footer { display:flex; align-items:center; gap:8px; }
.global-voice-panel header > span { min-width:0; flex:1; display:grid; gap:3px; }
.global-voice-panel header strong { font-size:13px; }
.global-voice-panel header small { color:#bca9d2; font-size:9px; }
.global-voice-panel button { min-height:34px; padding:6px 10px; border:1px solid #b989ee55; border-radius:10px; background:#291e38; color:#f3eaff; font:inherit; font-size:10px; cursor:pointer; }
.global-voice-panel header button { width:34px; min-width:34px; height:34px; padding:0; font-size:15px; }
.global-voice-panel p { margin:0; color:#cdbce0; font-size:9px; line-height:1.4; }
.global-voice-roster { min-height:0; display:grid; gap:6px; overflow:auto; }
.global-voice-member { min-width:0; display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid #ffffff10; border-radius:12px; background:#ffffff06; }
.global-voice-member.is-self { border-color:#b989ee40; background:#b989ee10; }
.global-voice-member-avatar { width:34px; height:34px; flex:none; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#503d67; color:#f5eaff; font-size:12px; font-weight:800; }
.global-voice-member-avatar img { width:100%; height:100%; object-fit:cover; }
.global-voice-member-identity { min-width:0; flex:1; display:grid; gap:3px; }
.global-voice-member-identity strong { overflow:hidden; color:#f3eaff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.global-voice-member-identity small { overflow:hidden; color:#b9a7cb; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.global-voice-member-live { width:8px; height:8px; flex:none; border-radius:50%; background:#58df9e; box-shadow:0 0 9px #58df9e55; }
.global-voice-roster-empty { padding:8px; color:#b9a7cb; font-size:9px; }
.global-voice-panel footer button { flex:1; }
.global-voice-panel footer [data-global-panel-leave] { border-color:#db719777; background:#672b53; }
.global-voice-panel.is-minimized { width:min(240px,calc(100vw - 24px)); max-height:none; grid-template-rows:auto; gap:0; padding:9px; }
.global-voice-panel.is-minimized > p,.global-voice-panel.is-minimized .global-voice-roster,.global-voice-panel.is-minimized footer { display:none; }
@media(max-width:600px) { .global-voice-panel { right:12px; bottom:12px; width:min(320px,calc(100vw - 24px)); max-height:min(58dvh,440px); } }

/* Mallowbub's original chat formatting: headings, lists, inline/fenced code, emphasis, and MathML. */
.mallowbub-message-content > p { margin:0 0 .72em; }
.mallowbub-message-content > p:last-child { margin-bottom:0; }
.mallowbub-message-content h2,.mallowbub-message-content h3,.mallowbub-message-content h4,.mallowbub-message-content h5 { margin:.9em 0 .42em; color:#f6edff; line-height:1.3; }
.mallowbub-message-content h2 { font-size:1.22em; }.mallowbub-message-content h3 { font-size:1.12em; }.mallowbub-message-content h4,.mallowbub-message-content h5 { font-size:1.04em; }
.mallowbub-message-content ul,.mallowbub-message-content ol { margin:.4em 0 .8em; padding-left:1.6em; }
.mallowbub-message-content li { margin:.22em 0; padding-left:.12em; }
.mallowbub-message-content blockquote { margin:.65em 0; padding:.35em .8em; border-left:3px solid #b582ff; color:#cbb9dc; background:#b582ff0c; }
.mallowbub-message-content code { padding:.12em .34em; border:1px solid #ffffff14; border-radius:5px; background:#08070c80; color:#f0d9ff; font-family:Consolas,"Cascadia Code",monospace; font-size:.92em; }
.mallowbub-code-block { min-width:0; margin:.65em 0; overflow:hidden; border:1px solid #b582ff30; border-radius:11px; background:#100d16; }
.mallowbub-code-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 9px; border-bottom:1px solid #ffffff12; color:#bca8d3; font-size:9px; }
.mallowbub-code-head button { min-height:26px; padding:4px 8px; border:1px solid #b582ff3d; border-radius:7px; background:#b582ff12; color:#ead9ff; font:inherit; font-size:9px; cursor:pointer; }
.mallowbub-code-block pre { max-width:100%; margin:0; overflow:auto; padding:10px; color:#eee5f7; font:10px/1.55 Consolas,"Cascadia Code",monospace; white-space:pre; }
.mallowbub-code-block pre code { padding:0; border:0; background:transparent; color:inherit; font:inherit; }
.mallowbub-math { display:inline-flex; max-width:100%; vertical-align:middle; color:#f1e8fc; font-size:1.03em; line-height:1.35; }
.mallowbub-math math { max-width:100%; font-family:"Cambria Math","STIX Two Math",serif; }
.mallowbub-math-display { display:block; width:100%; overflow:auto; margin:.55em 0 .8em; padding:7px 1px; font-size:1.15em; }
.mallowbub-math-display math { width:max-content; min-width:0; margin:0 auto; }
.profile-menu-feature strong { color:inherit; font-size:inherit; font-weight:inherit; }
.profile-menu-feature small { display:none; }
.profile-menu .profile-menu-feature > i:last-child { color:#9381a3!important; font-size:13px!important; }
.chat-attachment { display:inline-block; width:fit-content; max-width:min(260px,78vw); overflow:visible; border:0; border-radius:0; background:transparent!important; background-image:none!important; }
.chat-attachment:not(.is-pending) { width:fit-content; max-width:min(260px,78vw); }
.chat-attachment img { display:block; width:auto; max-width:100%; height:auto; max-height:180px; object-fit:contain; border:1px solid rgba(205,177,255,.42); border-radius:10px; background:transparent; }
.chat-attachment.is-gif { background:transparent!important; }
.chat-attachment.is-pending { grid-column:1/-1; width:min(210px,100%); max-width:210px; height:auto; min-height:0; max-height:none; padding:0; margin:0; border:0; border-radius:0; background:transparent!important; }
.chat-attachment.is-pending img { width:auto; max-width:100%; height:auto; max-height:120px; object-fit:contain; }
.chat-attachment.is-pending button { left:6px; right:auto; top:6px; width:25px; height:25px; display:grid; place-items:center; border:1px solid #b989ee55; border-radius:8px; background:#21172ddd; }
.friends-page .friends-layout { grid-template-columns:minmax(300px,340px) minmax(0,1fr); height:calc(100dvh - var(--topbar-h) - 24px); min-height:420px; }
.social-call-panel,.social-call-dock { z-index:2147483000!important; pointer-events:auto; touch-action:none; }
.social-call-panel { width:min(360px,calc(100vw - 20px)); max-height:min(78dvh,760px); overflow:auto; padding:12px; border-radius:18px; border-color:#b989ee70; background:rgba(25,18,34,.96); backdrop-filter:blur(18px); contain:none; transform:none; }
.social-call-panel header { min-height:38px; cursor:grab; touch-action:none; user-select:none; }
.social-call-panel header:active { cursor:grabbing; }
.social-call-panel header strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.social-call-panel button { min-height:36px; border-radius:10px; padding:7px 10px; cursor:pointer; }
.social-call-panel p { margin:7px 0; color:#cfbedf; font-size:10px; line-height:1.45; }
.social-call-panel .call-pictures { overflow:hidden; min-height:0; border:1px solid #b989ee30; border-radius:12px; background:#0e0a13; }
.social-call-panel .call-pictures > video[data-remote],.social-call-panel .call-pictures > img { display:block; max-height:220px; }
.social-call-panel footer { gap:6px; margin-top:9px; }
.social-call-panel footer button { min-height:34px; flex:1 1 calc(50% - 6px); font-size:10px; }
.social-call-panel .call-peer-card { display:grid; justify-items:center; gap:8px; padding:12px 8px 14px; text-align:center; }
.social-call-panel .call-peer-avatar { position:relative; width:82px; height:82px; display:grid; place-items:center; overflow:hidden; border:2px solid #bb8cf2; border-radius:50%; background:radial-gradient(circle at 35% 25%,#69488a,#291b37 68%); box-shadow:0 0 0 5px #b582ff18,0 9px 26px #0005; color:#f1e6ff; font-size:25px; font-weight:750; }
.social-call-panel .call-peer-avatar img { width:100%; height:100%; object-fit:cover; }
.social-call-panel .call-peer-avatar [hidden] { display:none!important; }
.social-call-panel .call-peer-card > strong { color:#f3eafa; font-size:14px; }
.social-call-panel .call-voice-meter { height:18px; display:flex; align-items:center; justify-content:center; gap:4px; }
.social-call-panel .call-voice-meter i { width:4px; height:14px; display:block; border-radius:5px; background:#b989ee; transform:scaleY(var(--voice-dot-scale,.16)); transform-origin:center; transition:transform 90ms linear,background-color 120ms ease,box-shadow 120ms ease; }
.social-call-panel .call-voice-meter.is-speaking i { background:#d7b7ff; box-shadow:0 0 8px #c496ff88; }
.social-call-panel .call-control-circle { width:42px; height:42px; min-width:42px; min-height:42px; flex:none; display:grid; place-items:center; padding:0; border-radius:50%; font-size:15px; }
.social-call-panel .call-control-circle.is-end-call { border-color:#db719777; background:#812e57; color:#fff0f6; }
.social-call-panel .call-control-circle[aria-pressed="true"] { border-color:#da8da6a6; background:#64253e; }
.social-call-panel footer [data-accept] { min-width:0; }
.social-call-panel.is-dragging,.social-call-dock.is-dragging { user-select:none; cursor:grabbing; }
.social-call-dock { right:16px; bottom:16px; gap:6px; width:max-content; padding:6px; border-radius:15px; background:rgba(25,18,34,.96); backdrop-filter:blur(16px); cursor:grab; }
.social-call-dock button { width:36px; height:36px; border-radius:10px; padding:0; cursor:pointer; }
.social-call-dock [data-dock-warning] { width:8px; height:8px; flex:none; border-radius:50%; background:#ffb84d; box-shadow:0 0 9px #ffb84d99; }
.social-call-dock [data-dock-warning][hidden] { display:none!important; }
.social-call-dock.is-player-call-dock { left:16px; right:auto; top:50%; bottom:auto; flex-direction:column; transform:none; }
.call-dock-peer,.call-dock-voice { display:none; }
.social-call-dock.is-player-call-dock .call-dock-peer { width:36px; height:36px; display:grid; place-items:center; overflow:hidden; border:1px solid #ba8def; border-radius:50%; background:#322140; color:#f3e8ff; font-size:12px; font-weight:800; }
.call-dock-peer img { width:100%; height:100%; object-fit:cover; }
.call-dock-peer [hidden] { display:none!important; }
.social-call-dock.is-player-call-dock .call-dock-voice { height:14px; display:flex; align-items:center; justify-content:center; gap:2px; }
.call-dock-voice i { width:3px; height:11px; border-radius:4px; background:#bc91ef; transform:scaleY(var(--voice-dot-scale,.16)); transform-origin:center; transition:transform 90ms linear; }
.social-call-panel.is-player-call-panel { width:min(340px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); }
.social-call-panel.is-player-call-panel .call-peer-card { padding-block:9px 10px; }
.social-call-panel.is-player-call-panel .call-peer-avatar { width:72px; height:72px; }
.stream-stage.has-social-call-left.edge-left .stream-edge-zone { left:auto; right:0; justify-content:flex-end; }
.stream-stage.has-social-call-left.edge-left .stream-edge-handle { left:auto; right:0; border-radius:8px 0 0 8px; }
.stream-stage.has-social-call-left.edge-left .stream-edge-actions { left:auto; right:12px; transform:translate(18px,-50%); }
.stream-stage.has-social-call-left.edge-left.hud-hidden .stream-edge-zone:hover .stream-edge-actions,.stream-stage.has-social-call-left.edge-left.hud-hidden .stream-edge-zone:focus-within .stream-edge-actions,.stream-stage.has-social-call-left.edge-left.hud-hidden .stream-edge-zone.edge-peek .stream-edge-actions { transform:translate(0,-50%); }
.player-social-panel header [data-mini-call] { width:34px; height:34px; min-width:34px; display:grid; place-items:center; padding:0; border:1px solid #ffffff30; border-radius:10px; background:#ffffff10; color:#fff; }
.player-social-panel header [data-mini-call] i { font-size:14px; }
.player-social-panel header [data-mini-call]:hover { border-color:#c6a1f2; background:#b782ef24; color:#e4d2ff; }
.player-social-panel form .direct-gif-button,.player-social-panel form .mini-image-menu > button { width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px; display:grid; place-items:center; padding:0; border:1px solid #d9bdff55; border-radius:14px; background:linear-gradient(135deg,#bd8aff,#a66ee8); color:#241536; box-shadow:0 5px 16px #0002,inset 0 1px #ffffff55; }
.player-social-panel form .direct-gif-button span { color:inherit; font-size:12px; }
.player-social-panel form .direct-gif-button:hover,.player-social-panel form .mini-image-menu > button:hover { border-color:#e2cdff; background:linear-gradient(135deg,#c99fff,#ad7bef); color:#1d112c; }
.bio-image-settings { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); align-items:start; gap:12px; }
.bio-image-setting { grid-template-columns:minmax(0,1fr); align-content:start; gap:8px; padding:12px; }
.bio-image-setting-title { gap:4px; }
.bio-image-setting-title strong { color:#e7d2ff; font-size:16px; letter-spacing:.2px; }
.bio-image-setting-title small { color:#aa9bb8; font-size:10px; }
.bio-image-setting-preview { min-height:190px; max-height:290px; display:flex; justify-content:flex-start; align-items:center; overflow:hidden; border:0; border-radius:9px; background:transparent!important; background-image:none!important; }
.bio-image-setting-preview img { display:block; width:var(--bio-image-width,100%); max-width:100%; max-height:280px; margin:0; border:0!important; border-radius:5px; outline:2px solid #c29af3; outline-offset:1px; object-fit:contain; }
.bio-image-size-control { display:grid; gap:6px; color:#c5b5d4; font-size:10px; }
.bio-image-size-control > span { display:flex; justify-content:space-between; gap:8px; }
.bio-image-size-control b { color:#e6d5ff; }
.bio-image-size-control input { width:100%; accent-color:#b582ff; }
.bio-image-setting-status { min-height:12px; color:#a99bb9; font-size:9px; }
.profile-bio-image-token { display:inline-block; width:min(var(--bio-image-width,100%),100%); max-width:100%; margin:4px 14px 10px 0; float:left; clear:left; vertical-align:top; }
.profile-bio-image-token .profile-bio-image-link { display:inline-block; width:100%; max-width:560px; overflow:visible; border:0!important; border-radius:0; background:none!important; box-shadow:none!important; }
.profile-bio-image-token.has-outline .profile-bio-image-link { border:0!important; box-shadow:none!important; }
.profile-bio-image-token .profile-bio-image { display:block; width:100%; max-width:100%; height:auto; max-height:440px; border:0!important; border-radius:5px; outline:2px solid #c29af3; outline-offset:1px; object-fit:contain; }
.game-modal:has(#chat-gift-amount) { width:min(390px,100%); border-radius:20px; }
.chat-action-dialog:has(#chat-gift-amount) { gap:11px; padding:20px; }
.chat-action-dialog:has(#chat-gift-amount) h2 { font-size:20px; }
.chat-action-dialog:has(#chat-gift-amount) p { font-size:10px; line-height:1.5; }
.chat-action-dialog:has(#chat-gift-amount) .chat-dialog-field input { height:40px; }
.game-modal:has(.chat-invite-choice-list):not(:has(.party-room)):not(:has(.party-composer)) { width:min(440px,100%); border-radius:20px; }
.chat-action-dialog:has(.chat-invite-choice-list):not(:has(.party-room)):not(:has(.party-composer)) { gap:10px; padding:20px; }
.chat-action-dialog:has(.chat-invite-choice-list):not(:has(.party-room)):not(:has(.party-composer)) h2 { font-size:20px; }
.chat-action-dialog:has(.chat-invite-choice-list):not(:has(.party-room)):not(:has(.party-composer)) > p { font-size:10px; }
.chat-invite-choice-list { display:grid; gap:7px; }
.chat-invite-choice-list .chat-invite-choice { min-height:58px; gap:10px; padding:9px 10px; border-radius:12px; }
.chat-invite-choice-list .chat-invite-choice > i { font-size:16px; }
.chat-invite-choice-list .chat-invite-choice strong { font-size:10px; }
.chat-invite-choice-list .chat-invite-choice small { font-size:8px; }
@media(max-width:700px) {
  .friends-page .friends-layout { grid-template-columns:minmax(min(260px,100%),min(38vw,340px)) minmax(0,1fr); height:calc(100dvh - var(--topbar-h) - 24px); min-height:420px; }
  .social-call-panel { max-height:calc(100dvh - 16px); }
  .social-call-dock.is-player-call-dock { left:8px; }
  .stream-stage.has-social-call-left.edge-left .stream-edge-actions { right:8px; }
  .chat-attachment:not(.is-pending) { width:fit-content; max-width:min(260px,78vw); }
  .game-modal:has(#chat-gift-amount),.game-modal:has(.chat-invite-choice-list):not(:has(.party-room)):not(:has(.party-composer)) { width:min(440px,calc(100vw - 20px)); }
}

.public-profile-page,.public-profile-page > *, .profile-public-grid,.profile-public-grid > .panel { min-width:0; max-width:100%; box-sizing:border-box; }
.public-profile-page { width:min(1080px,100%); }
.public-profile-bio { display:flow-root; min-width:0; overflow:visible; }
.profile-bio-content { display:block; min-width:0; max-width:100%; overflow-wrap:anywhere; }
.profile-bio-image-token { display:block; float:none!important; clear:none!important; width:min(var(--bio-image-width,100%),100%); max-width:100%; margin:8px 0 12px; vertical-align:initial; }
.public-profile-bio .profile-bio-image-link { display:table; width:auto; max-width:100%; overflow:visible; border:0!important; border-radius:0; background:transparent!important; background-image:none!important; box-shadow:none!important; }
.public-profile-bio .profile-bio-image { display:block; width:auto; max-width:100%; height:auto; max-height:440px; border:0!important; border-radius:2px; outline:0; outline-offset:1px; object-fit:contain; }
.public-profile-bio .profile-bio-image.is-image-ready { outline:2px solid #c29af3; }
.public-profile-bio .profile-bio-image-token:not(.has-outline) .profile-bio-image.is-image-ready { outline:0; }
.profile-bio-image-token .profile-bio-image-link { max-width:100%; }
.profile-bio-image-token .profile-bio-image { max-width:100%; }
.public-profile-hero > .profile-main { flex:1 1 auto; min-width:0; max-width:calc(100% - 250px); align-items:center; gap:20px; }
.public-profile-hero .profile-avatar-large { width:104px; height:104px; flex-basis:104px; font-size:30px; }
.public-profile-hero .profile-main > div { min-width:0; display:grid; align-content:center; gap:1px; }
.public-profile-hero .profile-name-line { gap:9px; }
.public-profile-hero .profile-name-line h1 { margin:0; font-size:clamp(30px,4vw,44px); line-height:1.04; letter-spacing:-1.2px; }
.public-profile-hero .profile-handle { width:max-content; margin:2px 0 0!important; padding:0; border:0; border-radius:0; background:transparent; color:#d4b9f4; font-size:13px; font-weight:650; letter-spacing:0; }
.profile-bio-image-button { grid-column:1/-1; justify-self:start; display:inline-flex; width:max-content; max-width:100%; align-items:center; justify-content:center; gap:8px; min-height:42px; margin:2px 0 4px; padding:0 15px; border:1px solid #c29af366; border-radius:13px; background:linear-gradient(135deg,#4b3064,#2b1c3b); box-shadow:0 7px 20px #09050f55,inset 0 1px 0 #fff2; color:#f0e3ff; font-size:10px; font-weight:750; }
.profile-bio-image-button i { color:#d5b4ff; font-size:14px; }
.profile-bio-image-references { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); align-items:stretch; gap:10px; margin:8px 0 14px; }
.profile-bio-image-reference { position:relative; isolation:isolate; overflow:hidden; width:auto; min-width:0; min-height:106px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px 12px; padding:13px 14px 12px; border:1px solid hsl(var(--bio-card-hue) 76% 74% / .36); border-radius:17px; background:linear-gradient(135deg,hsl(var(--bio-card-hue) 47% 31% / .76),rgba(24,18,34,.92)); box-shadow:0 10px 26px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08); }
.profile-bio-image-reference::before,.profile-bio-image-reference::after { position:absolute; z-index:-1; content:""; border-radius:50%; background:hsl(var(--bio-card-hue) 85% 80% / .13); pointer-events:none; }
.profile-bio-image-reference::before { width:106px; height:106px; top:-54px; right:-23px; }
.profile-bio-image-reference::after { width:62px; height:62px; right:38px; bottom:-40px; background:hsl(calc(var(--bio-card-hue) + 45) 90% 83% / .12); }
.profile-bio-image-reference strong { position:relative; grid-column:1/-1; display:flex; align-items:center; gap:8px; color:#f4eaff; font-size:15px; font-weight:850; line-height:1.15; }
.profile-bio-image-reference strong i { color:hsl(var(--bio-card-hue) 88% 82%); font-size:14px; }
.profile-bio-image-reference strong span { padding:4px 8px; border:1px solid hsl(var(--bio-card-hue) 80% 76% / .55); border-radius:999px; background:hsl(var(--bio-card-hue) 56% 55% / .2); color:hsl(var(--bio-card-hue) 95% 89%); }
.profile-bio-image-reference input { position:relative; grid-column:1; width:100%; min-width:0; margin:0; accent-color:hsl(var(--bio-card-hue) 82% 76%); }
.profile-bio-image-reference output { position:relative; grid-column:2; min-width:34px; color:#f1e4ff; font-size:10px; font-weight:750; text-align:right; }
.profile-bio-image-edit { position:relative; grid-column:1/-1; justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 9px; border:1px solid hsl(var(--bio-card-hue) 80% 76% / .38); border-radius:9px; background:hsl(var(--bio-card-hue) 56% 55% / .19); color:#f2e6ff; font:inherit; font-size:9px; font-weight:750; cursor:pointer; }
.profile-bio-image-edit:hover { background:hsl(var(--bio-card-hue) 56% 55% / .32); }
.bio-image-editor-overlay { position:fixed; inset:0; z-index:2147483001; display:grid; place-items:center; padding:18px; background:rgba(10,7,15,.76); backdrop-filter:blur(10px); }
.bio-image-editor { width:min(560px,100%); max-height:calc(100dvh - 36px); overflow:auto; display:grid; gap:14px; padding:20px; border:1px solid #c498f366; border-radius:20px; background:linear-gradient(155deg,#251a31,#15101e); color:#f5edff; box-shadow:0 25px 80px #000a,inset 0 1px #ffffff12; }
.bio-image-editor > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bio-image-editor > header small { color:#c49aec; font-size:9px; font-weight:850; letter-spacing:1.1px; }
.bio-image-editor > header h2 { margin:4px 0 0; font-size:18px; }
.bio-image-editor > header button { width:34px; height:34px; display:grid; place-items:center; border:1px solid #ffffff1c; border-radius:50%; background:#ffffff0a; color:inherit; font-size:18px; cursor:pointer; }
.bio-image-editor-preview { min-height:190px; max-height:390px; display:grid; place-items:center; overflow:auto; padding:12px; border:1px solid #ffffff18; border-radius:15px; background:#100b17; }
.bio-image-editor-preview img { display:block; width:var(--bio-editor-image-width,100%); max-width:100%; max-height:350px; border-radius:4px; outline:0; outline-offset:2px; object-fit:contain; transition:width .12s ease; }
.bio-image-editor-preview img.has-outline.is-image-ready { outline:2px solid #c29af3; }
.bio-image-editor-size { display:grid; gap:7px; color:#d4c4e5; font-size:11px; }
.bio-image-editor-size > span { display:flex; justify-content:space-between; gap:10px; }
.bio-image-editor-size output { color:#f2e5ff; font-weight:800; }
.bio-image-editor-size input { width:100%; accent-color:#bd8bf4; }
.bio-image-editor-outline { min-width:0; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid #ffffff18; border-radius:13px; background:#ffffff08; cursor:pointer; }
.bio-image-editor-outline input { width:18px; height:18px; flex:none; accent-color:#b582ff; }
.bio-image-editor-outline span { display:grid; gap:3px; }
.bio-image-editor-outline strong { font-size:11px; }
.bio-image-editor-outline small { color:#b9a9ca; font-size:9px; }
.bio-image-editor-status { min-height:16px; margin:0; color:#cbb5e3; font-size:10px; }
.bio-image-editor > footer { display:flex; justify-content:flex-end; gap:8px; }
.bio-image-editor > footer button { min-height:38px; }
.bio-image-editor > footer [data-editor-save] { min-width:145px; }
.profile-public-grid { width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.profile-public-grid > .panel,.profile-session-list,.profile-session-row,.profile-session-row span { min-width:0; }
.profile-session-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-bio-image-references[hidden] { display:none!important; }
.friend-activity-profile,.friend-activity-profile:hover,.friend-activity-profile:focus-visible { padding:0!important; border:0!important; border-radius:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; }
.friend-activity-profile { min-width:0; flex:1 1 auto; gap:7px; }
.friend-activity-profile:hover { opacity:.86; }
.friend-activity-profile:focus-visible .friend-activity-avatar { outline:2px solid #c19aff; outline-offset:3px; }
.friend-activity-profile > span:nth-child(2) { min-width:0; }
.friend-activity-profile > i { display:none; }
.friend-activity-avatar { width:38px; height:38px; flex-basis:38px; }
.friend-activity-actions { flex:0 0 auto; justify-content:flex-end; gap:5px; }
.friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:42px; min-width:42px; height:42px; min-height:42px; }
.activity-watch-menu > button,.activity-action-menu > button { width:42px; min-width:42px; }
.friend-activity-actions > button i,.activity-watch-menu > button i,.activity-action-menu > button i { font-size:17px; }
.chat-attachment { position:relative; }
.chat-attachment.is-gif > .klipy-attribution-icon { position:absolute; z-index:2; left:5px; bottom:5px; display:block; width:18px; height:8px; max-width:none; max-height:none; padding:0; border:0; border-radius:0; outline:0; background:transparent; object-fit:contain; opacity:.88; pointer-events:none; }
.social-call-panel .call-pictures { position:relative; }
.social-call-panel .call-pictures.is-connecting > [data-remote],.social-call-panel .call-pictures.is-connecting > [data-jpeg],.social-call-panel .call-pictures.is-self-preview > [data-remote],.social-call-panel .call-pictures.is-self-preview > [data-jpeg] { display:none!important; }
.social-call-panel .call-pictures.is-connecting > video[data-local],.social-call-panel .call-pictures.is-self-preview > video[data-local] { position:relative; inset:auto; display:block; width:100%; max-height:240px; border-radius:11px; transform:scaleX(-1); }
.social-call-panel .call-video-connecting { position:absolute; inset:auto 8px 8px; z-index:2; display:flex; align-items:center; justify-content:center; gap:7px; min-height:32px; padding:6px 9px; border:1px solid #ffffff28; border-radius:9px; background:#110d19dd; color:#eee4fa; font-size:10px; text-align:center; backdrop-filter:blur(8px); }
.social-call-panel .call-video-connecting[hidden] { display:none!important; }
.social-call-panel .call-video-connecting > i { color:#d0aaff; animation:call-connect-spin 1.1s linear infinite; }
.social-call-panel .call-video-connecting strong { color:#fff; }
.social-call-panel .call-peer-card > [data-peer-handle] { color:#bba8cf; font-size:10px; }
.social-call-panel.is-unavailable .call-peer-card { padding-block:18px 12px; }
@media(max-width:780px) {
  .public-profile-hero > .profile-main { width:100%; max-width:100%; }
  .public-profile-hero .profile-avatar-large { width:88px; height:88px; flex-basis:88px; }
}
.social-call-panel.is-unavailable footer { justify-content:center; }
.social-call-panel.is-unavailable footer [data-end] { flex:none; width:42px; height:42px; }
@keyframes call-connect-spin { to { transform:rotate(360deg); } }
@media(max-width:700px) {
  .profile-public-grid { grid-template-columns:minmax(0,1fr); }
  .friend-activity-footer { flex-wrap:nowrap; }
  .friend-activity-profile { flex:1 1 auto; min-width:0; }
  .friend-activity-actions { flex:0 0 auto; justify-content:flex-end; gap:4px; }
  .friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:40px; min-width:40px; height:40px; min-height:40px; }
  .activity-watch-menu > button,.activity-action-menu > button { width:40px; min-width:40px; }
}
@media(max-width:420px) {
  .friend-activity-profile > span:nth-child(2) { display:none; }
  .friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:36px; min-width:36px; height:36px; min-height:36px; }
  .activity-watch-menu > button,.activity-action-menu > button { width:36px; min-width:36px; }
}

.friend-activity { width:100%; box-sizing:border-box; }
.friend-activity-footer { width:100%; min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:5px; flex-wrap:nowrap; }
.friend-activity-profile,.friend-activity-profile:hover,.friend-activity-profile:focus-visible { width:42px; min-width:42px; height:42px; min-height:42px; flex:0 0 42px; display:grid; place-items:center; padding:0!important; border:0!important; border-radius:50%!important; background:transparent!important; box-shadow:none!important; }
.friend-activity-profile > span:nth-child(2) { display:none!important; }
.friend-activity-avatar { width:40px; height:40px; flex-basis:40px; }
.friend-activity-actions { min-width:0; flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:38px; min-width:38px; height:38px; min-height:38px; flex:0 0 38px; }
.activity-watch-menu > button,.activity-action-menu > button { width:38px; min-width:38px; }
.chat-attachment.is-gif > .klipy-attribution-icon { width:28px; height:10px; }
.profile-form .profile-private-toggle { grid-column:auto; min-width:0; }
.profile-form .primary-btn { grid-column:1/-1; }
@media(max-width:780px) { .profile-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .profile-form { grid-template-columns:minmax(0,1fr); } }
@media(max-width:420px) {
  .friend-activity { padding:6px; }
  .friend-activity-footer { gap:4px; }
  .friend-activity-profile,.friend-activity-profile:hover,.friend-activity-profile:focus-visible { width:34px; min-width:34px; height:34px; min-height:34px; flex-basis:34px; }
  .friend-activity-avatar { width:32px; height:32px; flex-basis:32px; }
  .friend-activity-actions { gap:2px; }
  .friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:31px; min-width:31px; height:31px; min-height:31px; flex-basis:31px; }
  .activity-watch-menu > button,.activity-action-menu > button { width:31px; min-width:31px; }
}

.friend-activity { min-height:90px; padding-block:18px; }
.friend-activity-footer { min-height:48px; }
.friend-activity-profile,.friend-activity-profile:hover,.friend-activity-profile:focus-visible { width:46px; min-width:46px; height:46px; min-height:46px; flex-basis:46px; }
.friend-activity-avatar { width:44px; height:44px; flex-basis:44px; }
.friend-activity-actions { gap:4px; }
.friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:42px; min-width:42px; height:42px; min-height:42px; flex-basis:42px; }
.activity-watch-menu > button,.activity-action-menu > button { width:42px; min-width:42px; }
.friend-activity-actions > button i,.activity-watch-menu > button i,.activity-action-menu > button i { font-size:16px; }
@media(max-width:420px) {
  .friend-activity { min-height:88px; padding:16px 8px; }
  .friend-activity-footer { min-height:46px; gap:4px; }
  .friend-activity-profile,.friend-activity-profile:hover,.friend-activity-profile:focus-visible { width:42px; min-width:42px; height:42px; min-height:42px; flex-basis:42px; }
  .friend-activity-avatar { width:40px; height:40px; flex-basis:40px; }
  .friend-activity-actions { gap:3px; }
  .friend-activity-actions > button,.activity-watch-menu,.activity-action-menu,.activity-watch-menu > button,.activity-action-menu > button { width:38px; min-width:38px; height:38px; min-height:38px; flex-basis:38px; }
  .activity-watch-menu > button,.activity-action-menu > button { width:38px; min-width:38px; }
}

.profile-bio-image-size { grid-column:1/-1; display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px!important; color:#f1e4ff!important; font-size:10px!important; }
.profile-bio-image-size > span { grid-column:1; color:#f1e4ff; font-size:10px; font-weight:750; }
.profile-bio-image-size > output { grid-column:2; grid-row:1; min-width:38px; color:#f5eaff; font-size:10px; font-weight:850; text-align:right; }
.profile-bio-image-size > input { grid-column:1/-1; grid-row:2; width:100%; min-width:0; margin:0; accent-color:hsl(var(--bio-card-hue) 82% 76%); }
.profile-bio-image-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.profile-bio-image-actions button { min-height:32px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 9px; border:1px solid hsl(var(--bio-card-hue) 80% 76% / .4); border-radius:10px; background:hsl(var(--bio-card-hue) 56% 55% / .18); color:#f2e6ff; font:inherit; font-size:9px; font-weight:750; cursor:pointer; }
.profile-bio-image-actions button:hover { background:hsl(var(--bio-card-hue) 56% 55% / .34); }
.profile-bio-image-actions button i { color:hsl(var(--bio-card-hue) 92% 86%); font-size:12px; }
.profile-bio-image-outline.is-enabled { border-color:hsl(var(--bio-card-hue) 88% 78% / .76); background:hsl(var(--bio-card-hue) 60% 57% / .35); }
.profile-bio-image-outline.is-enabled i { color:hsl(var(--bio-card-hue) 100% 94%); }
.profile-bio-image-outline:disabled { opacity:.6; cursor:wait; }
.profile-bio-image-token.has-crop { aspect-ratio:var(--bio-crop-aspect); overflow:visible; }
.public-profile-bio .profile-bio-image-token.has-crop .profile-bio-image-link { position:relative; width:100%; height:100%; overflow:hidden; }
.public-profile-bio .profile-bio-image-token.has-crop .profile-bio-image { position:absolute; left:var(--bio-crop-left); top:var(--bio-crop-top); width:var(--bio-crop-image-width); max-width:none; max-height:none; height:auto; border:0; }
.public-profile-bio .profile-bio-image-token.has-crop.has-outline .profile-bio-image-link:has(.profile-bio-image.is-image-ready) { outline:2px solid #c29af3; outline-offset:1px; }
.bio-image-crop-stage-wrap { width:100%; min-height:190px; max-height:390px; display:grid; place-items:center; overflow:auto; padding:12px; border:1px solid #ffffff18; border-radius:15px; background:#100b17; }
.bio-image-crop-stage { position:relative; flex:none; max-width:100%; background:#1c1524; touch-action:none; user-select:none; }
.bio-image-crop-stage > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
.bio-image-crop-selection { position:absolute; z-index:1; min-width:5%; min-height:5%; border:1px solid #fff; background-image:linear-gradient(90deg,transparent calc(33.333% - .5px),#ffffff80 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff80 66.666%,transparent calc(66.666% + .5px)),linear-gradient(0deg,transparent calc(33.333% - .5px),#ffffff80 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff80 66.666%,transparent calc(66.666% + .5px)); box-shadow:0 0 0 1200px #08050b99; cursor:move; touch-action:none; }
.bio-crop-handle { position:absolute; z-index:2; width:10px; height:10px; border:1px solid #9b73c9; border-radius:3px; background:#fff; touch-action:none; }
.bio-crop-handle.nw { left:-5px; top:-5px; cursor:nwse-resize; }.bio-crop-handle.ne { right:-5px; top:-5px; cursor:nesw-resize; }.bio-crop-handle.sw { left:-5px; bottom:-5px; cursor:nesw-resize; }.bio-crop-handle.se { right:-5px; bottom:-5px; cursor:nwse-resize; }
.bio-crop-handle.n { left:calc(50% - 5px); top:-5px; cursor:ns-resize; }.bio-crop-handle.s { left:calc(50% - 5px); bottom:-5px; cursor:ns-resize; }.bio-crop-handle.e { right:-5px; top:calc(50% - 5px); cursor:ew-resize; }.bio-crop-handle.w { left:-5px; top:calc(50% - 5px); cursor:ew-resize; }
.bio-image-editor-hint { margin:0; color:#c9b9d8; font-size:10px; line-height:1.5; }
.bio-image-crop-actions { display:flex; justify-content:flex-start; }
.bio-image-crop-actions button { min-height:34px; display:inline-flex; align-items:center; gap:7px; }
.bio-image-viewer { position:fixed; z-index:2147483002; top:18px; right:18px; width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 36px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; overflow:hidden; padding:12px; border:1px solid #c498f366; border-radius:18px; background:linear-gradient(155deg,#251a31f5,#15101ef5); color:#f5edff; box-shadow:0 24px 80px #000b,inset 0 1px #ffffff12; backdrop-filter:blur(18px); }
.bio-image-viewer.is-dragging { user-select:none; }
.bio-image-viewer-header { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:grab; touch-action:none; user-select:none; }
.bio-image-viewer-header:active { cursor:grabbing; }
.bio-image-viewer-header > span { min-width:0; display:flex; align-items:center; gap:8px; font-size:11px; font-weight:850; }
.bio-image-viewer-header > span i { color:#c5a2f5; font-size:14px; }
.bio-image-viewer-header button { width:32px; height:32px; display:grid; place-items:center; border:1px solid #ffffff20; border-radius:50%; background:#ffffff0a; color:inherit; cursor:pointer; }
.bio-image-viewer-viewport { min-height:120px; max-height:calc(100dvh - 100px); display:grid; place-items:center; overflow:auto; border-radius:10px; }
.bio-image-viewer-viewport img { display:block; max-width:100%; max-height:calc(100dvh - 110px); width:auto; height:auto; border-radius:2px; object-fit:contain; }
.bio-image-viewer-viewport.has-crop { position:relative; width:100%; aspect-ratio:var(--bio-crop-aspect); display:block; overflow:hidden; }
.bio-image-viewer-viewport.has-crop img { position:absolute; left:var(--bio-crop-left); top:var(--bio-crop-top); width:var(--bio-crop-image-width); max-width:none; max-height:none; height:auto; }
.bio-image-viewer-viewport.has-outline img { outline:2px solid #c29af3; outline-offset:2px; }
.bio-image-viewer-viewport.has-crop.has-outline { outline:2px solid #c29af3; outline-offset:2px; }

.chat-action-popover { position:fixed; z-index:2147483003; width:min(var(--chat-popover-width,420px),calc(100vw - 20px)); max-height:min(72dvh,640px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; overflow:hidden; padding:12px; border:1px solid #b989ee70; border-radius:17px; background:linear-gradient(150deg,#251a31f8,#15101ef8); color:#f5edff; box-shadow:0 20px 65px #000b,inset 0 1px #ffffff12; backdrop-filter:blur(18px); }
.chat-popover-header { min-height:30px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-popover-header > span { min-width:0; display:flex; align-items:center; gap:8px; color:#f6edff; font-size:11px; font-weight:850; }
.chat-popover-header > span > i { color:#caa3f9; font-size:14px; }
.chat-popover-header > span > b { padding:3px 6px; border:1px solid #c69af655; border-radius:6px; background:#9c64d629; color:#d8baff; font-size:9px; }
.chat-popover-header > button { width:28px; height:28px; display:grid; place-items:center; border:1px solid #ffffff1c; border-radius:50%; background:#ffffff08; color:#f4eaff; cursor:pointer; }
.chat-gift-popover { grid-template-rows:auto auto; }
.chat-gift-form { display:grid; gap:10px; }
.chat-gift-form label { display:grid; gap:7px; color:#dac9eb; font-size:10px; }
.chat-gift-form label > div { display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #b989ee55; border-radius:11px; background:#110c18; }
.chat-gift-form input { min-width:0; flex:1; height:40px; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-size:13px; }
.chat-gift-form label small { color:#b89acb; font-size:9px; }
.chat-gift-form p { margin:0; color:#c9b9d8; font-size:9px; line-height:1.45; }
.chat-gift-form .primary-btn { min-height:38px; justify-content:center; }
.chat-action-popover { box-sizing:border-box; }
.chat-gift-amount-control { width:100%; min-width:0; box-sizing:border-box; gap:6px!important; }
.chat-gift-amount-input { width:0; min-width:0!important; flex:1 1 0!important; appearance:textfield; -moz-appearance:textfield; }
.chat-gift-amount-input::-webkit-inner-spin-button,.chat-gift-amount-input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.chat-gift-unit { flex:none; white-space:nowrap; }
.chat-gift-stepper { display:grid; grid-template-rows:1fr 1fr; gap:2px; flex:none; }
.chat-gift-stepper button { width:22px; min-height:16px; display:grid; place-items:center; padding:0; border:1px solid #b989ee55; border-radius:5px; background:#342448; color:#e5d2ff; cursor:pointer; }
.chat-gift-stepper button:hover { background:#4a3264; border-color:#caa3f9; }
.chat-gift-stepper button i { font-size:13px; line-height:1; }

/* Match the embedded Miwi HUD after the mobile cloud-player rules have loaded. */
.miwibits-player-volume { box-sizing:border-box; flex:none; }
.miwibits-player-volume button,.miwibits-player-volume input { pointer-events:none; }
.miwibits-player-hud-fullscreen { pointer-events:auto; }
.miwi-route-confirm { width:min(440px,calc(100vw - 30px)); margin:auto; padding:28px; border:1px solid #d8dfe64d; border-radius:24px; background:linear-gradient(145deg,#31303b,#1d1d28); color:#f8f6fb; box-shadow:0 24px 90px rgba(0,0,0,.65),inset 0 1px #ffffff1c; text-align:center; }
.miwi-route-confirm::backdrop { background:rgba(6,5,9,.74); backdrop-filter:blur(8px); }
.miwi-route-confirm-icon { width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center; border:1px solid #cca7fa77; border-radius:15px; background:#c49bec24; color:#e2c5ff; font-size:19px; }
.miwi-route-confirm h2 { margin:0; font-size:18px; }
.miwi-route-confirm p { margin:10px 0 22px; color:#cbc4d0; font-size:12px; line-height:1.55; }
.miwi-route-confirm footer { display:flex; justify-content:center; gap:8px; }
.miwi-route-confirm footer button { min-height:43px; padding-inline:17px; border-radius:12px; }
.miwi-route-confirm footer .soft-btn { border:1px solid #d8dfe64d; background:#ffffff0d; color:#f4edf9; }
.miwi-route-confirm footer .primary-btn { border:1px solid #e3c6ff88; background:linear-gradient(105deg,#d9a7ff,#a773ed); color:#24152e; }
.library-grid > .game-card,.home-game-grid > .game-card { content-visibility:auto; contain-intrinsic-size:auto 300px; }
.library-grid.is-list > .game-card { contain-intrinsic-size:auto 102px; }
.game-card-media-wrap img,.continue-art img { content-visibility:auto; }
.miwibits-player-topbar #miwibits-player-hide-topbar { color:#ddd0ed; }
.miwibits-player-hud .stream-hud-actions > .miwibits-player-proxy-action { white-space:nowrap; }
.miwibits-player-hud .stream-hud-actions > #miwibits-player-close,
.miwibits-player-hud .stream-hud-actions > #miwibits-player-chat { display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); color:#f1e9fa; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud #miwibits-player-fullscreen { display:none; }
@media(max-width:680px) {
  .miwibits-player-hud { gap:5px; padding:5px 6px; }
  .miwibits-player-volume { height:36px; gap:3px; padding:0 4px; }
  .miwibits-player-volume button { width:19px; }
  .miwibits-player-volume input { width:58px; min-width:32px; }
  .miwibits-player-volume small { display:none; }
  .miwibits-player-hud-fullscreen { width:37px; height:37px; flex-basis:37px; }
}

/* The itch catalog is an infinite feed inside All Games, not another library section. */
.itch-library-feed { display:contents; }
.itch-library-status { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; }

/* Player device menus stay inside the viewport instead of being clipped by the call card. */
.social-call-panel footer { align-items:center; }
.call-volume-control { min-width:152px; min-height:38px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid rgba(183,137,235,.28); border-radius:12px; background:rgba(10,9,15,.3); color:#d8c3f2; }
.call-volume-control > i { flex:none; color:#c597ff; font-size:14px; }
.call-volume-control input { width:86px; min-width:40px; accent-color:#b582ff; cursor:pointer; }
.call-volume-control span { min-width:36px; color:#e7daf7; font-size:9px; font-variant-numeric:tabular-nums; text-align:right; }
.call-device-settings { position:static; }
.call-device-settings > summary { min-height:38px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid rgba(183,137,235,.28); border-radius:12px; background:rgba(10,9,15,.3); color:#e6d7f7; font-size:10px; cursor:pointer; list-style:none; }
.call-device-settings > summary::-webkit-details-marker { display:none; }
.call-device-menu { z-index:26010; display:grid; gap:10px; overflow:auto; padding:13px; border:1px solid rgba(183,137,235,.4); border-radius:16px; background:linear-gradient(145deg,#241b30,#14121a); box-shadow:0 18px 52px rgba(0,0,0,.62); }
.call-device-menu[hidden] { display:none!important; }
.call-device-menu > label { min-width:0; display:grid; gap:5px; color:#b9a9c9; font-size:10px; }
.call-device-picker { position:relative; min-width:0; }
.call-device-picker > button { width:100%; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; overflow:hidden; padding:0 10px; border:1px solid rgba(183,137,235,.25); border-radius:10px; background:#1a1721; color:#f3eafa; font-size:10px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.call-device-picker > button::after { content:"⌄"; flex:none; color:#caa7f7; }
.call-device-picker > button:disabled { opacity:.55; cursor:not-allowed; }
.call-device-options { position:absolute; z-index:2; top:calc(100% + 5px); left:0; right:0; max-height:170px; display:grid; gap:2px; overflow:auto; padding:5px; border:1px solid rgba(183,137,235,.35); border-radius:11px; background:#17141e; box-shadow:0 12px 32px rgba(0,0,0,.55); }
.call-device-options[hidden] { display:none!important; }
.call-device-options button { min-width:0; min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:7px; overflow:hidden; padding:5px 8px; border:0; border-radius:7px; background:transparent; color:#d7c9e3; font-size:9px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.call-device-options button:hover,.call-device-options button[aria-selected="true"] { background:rgba(181,130,255,.16); color:#fff; }
.call-device-options button > i { flex:none; color:#c69aff; opacity:0; }
.call-device-options button[aria-selected="true"] > i { opacity:1; }
.call-device-menu [data-device-status] { color:#c8b6d7; font-size:9px; line-height:1.45; }

/* Hide either Miwi player bar independently; when both are hidden the controls tuck into a side rail. */
.miwibits-game-player.topbar-hidden .miwibits-player-topbar { display:none!important; }
.miwibits-player-hud .miwibits-player-actions { display:contents; }
.miwibits-player-hud .miwibits-player-actions .miwibits-player-source-chip { display:none; }
.miwibits-player-hud .stream-hud-actions > .stream-top-icon,
.miwibits-player-hud .stream-hud-actions > .stream-top-back,
.miwibits-player-hud .stream-hud-actions > .miwibits-player-proxy-action { min-width:40px; min-height:40px; height:40px; border-radius:12px; }
.miwibits-player-hud .stream-hud-actions > .miwibits-player-proxy-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(181,130,255,.3); background:rgba(181,130,255,.12); color:#eadcff; font-size:10px; }
.miwibits-game-player.chrome-rail-mode.hud-hidden .miwibits-player-hud,
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud { top:50%; bottom:auto; left:max(8px,env(safe-area-inset-left)); right:auto; width:auto; min-height:0; max-height:calc(100dvh - 24px); flex-direction:column; gap:5px; padding:7px; transform:translateY(-50%); overflow:visible; border-radius:18px; opacity:1; visibility:visible; pointer-events:auto; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud-game,
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud > .hud-divider { display:none; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .stream-hud-actions { max-height:calc(100dvh - 36px); flex-direction:column; gap:5px; overflow:auto; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .stream-hud-actions > button { width:40px; min-width:40px; height:40px; min-height:40px; flex:0 0 40px; padding:0; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .miwibits-player-proxy-action span,
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .miwibits-player-save-toggle span { display:none; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .miwibits-player-actions { display:contents; }
.miwibits-game-player.chrome-rail-mode .miwibits-player-hud .miwibits-player-fullscreen { display:none; }
@media(max-width:680px) {
  .call-volume-control { min-width:120px; }
  .call-volume-control input { width:58px; }
  .social-call-panel footer { gap:6px; }
  .miwibits-player-hud .stream-hud-actions > .miwibits-player-proxy-action span { display:none; }
}
@media(max-width:390px) {
  .miwibits-player-hud-copy small { display:none; }
  .miwibits-player-volume input { width:42px; }
  .miwibits-player-game-icon { width:32px; height:32px; }
}
.chat-gift-form label { min-width:0; }
.chat-gift-form label > div { min-width:0; }
.chat-game-popover { grid-template-rows:auto auto minmax(0,1fr); }
.chat-game-search { width:100%; height:36px; padding:0 10px; border:1px solid #b58adf55; border-radius:10px; outline:0; background:#100b17; color:#f3eaff; font:inherit; font-size:10px; }
.chat-game-choice-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:min(42dvh,340px); overflow:auto; padding:2px; }
.chat-game-choice { min-width:0; min-height:46px; grid-template-columns:34px minmax(0,1fr); gap:8px; padding:6px; border-radius:10px; }
.chat-game-choice img,.chat-game-choice i { width:34px; height:38px; }
.chat-game-choice span { font-size:9px; }
.chat-game-choice[hidden] { display:none!important; }
.chat-popover-empty { grid-column:1/-1; margin:0; padding:18px 8px; color:#baabc9; font-size:10px; text-align:center; }
.klipy-gif-popover { grid-template-rows:auto minmax(0,1fr); }
.klipy-gif-picker { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:9px; }
.klipy-gif-search { display:flex; gap:7px; }
.klipy-gif-search input { min-width:0; flex:1; height:36px; padding:0 10px; border:1px solid #b58adf55; border-radius:10px; outline:0; background:#100b17; color:#f3eaff; font:inherit; font-size:10px; }
.klipy-gif-search .primary-btn { min-height:36px; padding:0 11px; font-size:9px; }
.klipy-gif-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:96px; align-content:start; gap:7px; min-height:120px; max-height:min(43dvh,360px); overflow-x:hidden; overflow-y:auto; }
.klipy-gif-option { height:96px; border-radius:10px; }
.klipy-gif-option span { font-size:8px; }
.klipy-gif-status { min-height:100px; font-size:10px; }
.klipy-gif-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.klipy-gif-footer .klipy-gif-credit { text-align:left; }
.klipy-gif-footer .primary-btn { min-height:34px; padding:0 12px; font-size:9px; }
.klipy-gif-footer .primary-btn:disabled { opacity:.45; cursor:not-allowed; }
.direct-composer-menu { position:relative; flex:none; }
.direct-composer-menu-popover { position:absolute; right:0; bottom:calc(100% + 9px); z-index:80; width:240px; display:none; gap:5px; padding:7px; border:1px solid #b989ee66; border-radius:13px; background:#1b1424f5; box-shadow:0 16px 42px #000a; backdrop-filter:blur(15px); }
.direct-composer-menu:hover .direct-composer-menu-popover,.direct-composer-menu:focus-within .direct-composer-menu-popover,.direct-composer-menu.open .direct-composer-menu-popover { display:grid; }
.direct-composer-menu-popover > button { min-height:48px; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; padding:6px 8px; border:1px solid transparent; border-radius:10px; background:transparent; color:#f2e8ff; text-align:left; cursor:pointer; }
.direct-composer-menu-popover > button:hover,.direct-composer-menu-popover > button:focus-visible { border-color:#bb91ea4a; background:#ffffff0b; }
.direct-composer-menu-popover > button > i { color:#caa2f5; font-size:14px; }
.direct-composer-menu-popover > button > span { min-width:0; display:grid; gap:3px; }
.direct-composer-menu-popover strong { font-size:9px; }.direct-composer-menu-popover small { color:#b8a8c8; font-size:8px; }
.direct-message-form:has(.chat-attachment.is-pending) #direct-game-menu { grid-column:3; grid-row:3; }
.direct-message-form:has(.chat-attachment.is-pending) #direct-game-button { grid-column:auto; grid-row:auto; }
@media(max-width:540px) {
  .bio-image-editor { padding:15px; }
  .bio-image-crop-stage-wrap { min-height:150px; max-height:300px; padding:8px; }
  .bio-image-viewer { top:8px; right:8px; width:calc(100vw - 16px); }
  .chat-action-popover { max-height:74dvh; padding:10px; }
  .klipy-gif-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:98px; max-height:min(45dvh,360px); }
  .klipy-gif-option { height:98px; }
  .chat-game-choice-list { grid-template-columns:1fr; }
}

/* Public profile game shelves reuse the library cards in a single animated row. */
.profile-public-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
.profile-game-shelf { min-width:0; overflow:hidden; padding:18px; }
.profile-game-shelf > .eyebrow { display:block; margin-bottom:2px; }
.profile-game-marquee { position:relative; isolation:isolate; width:100%; min-width:0; overflow:hidden; margin-top:12px; }
.profile-game-marquee::before,.profile-game-marquee::after { content:""; position:absolute; z-index:10; top:0; bottom:0; width:58px; pointer-events:none; opacity:1; -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none; }
.profile-game-marquee::before { left:0; }
.profile-game-marquee::after { right:0; }
.profile-game-marquee-track { display:flex; width:max-content; will-change:transform; animation-duration:var(--profile-game-marquee-duration,48s); animation-timing-function:linear; animation-iteration-count:infinite; }
.profile-game-marquee-set { display:flex; width:max-content; align-items:stretch; gap:14px; padding-right:14px; }
.profile-game-marquee-right .profile-game-marquee-track { animation-name:profile-game-marquee-right; }
.profile-game-marquee-left .profile-game-marquee-track { animation-name:profile-game-marquee-left; }
.profile-game-card { width:clamp(270px,24vw,300px); flex:0 0 clamp(270px,24vw,300px); }
.profile-game-card .game-card-body { display:flex; flex-direction:column; min-height:112px; }
.profile-game-card .game-tag-row { min-height:20px; }
.profile-game-card .game-card-foot { margin-top:auto; padding-top:8px; }
.profile-game-card > .card-favorite { display:grid; place-items:center; padding:0; line-height:1; top:11px; right:11px; }
.profile-game-card > .card-favorite i { display:block; line-height:1; font-size:15px; }
.profile-game-empty { margin:14px 0 2px; font-size:10px; }
.profile-game-marquee::before { background:linear-gradient(90deg,var(--profile-shelf-edge,#17121e) 0%,color-mix(in srgb,var(--profile-shelf-edge,#17121e) 72%,transparent) 36%,transparent 100%); }
.profile-game-marquee::after { background:linear-gradient(270deg,var(--profile-shelf-edge,#17121e) 0%,color-mix(in srgb,var(--profile-shelf-edge,#17121e) 72%,transparent) 36%,transparent 100%); }
@keyframes profile-game-marquee-left { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes profile-game-marquee-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media(max-width:700px) {
  .profile-public-grid { grid-template-columns:minmax(0,1fr); }
  .profile-game-shelf { padding:14px; }
  .profile-game-card { width:min(300px,calc(100vw - 58px)); flex-basis:min(300px,calc(100vw - 58px)); }
}
@media(prefers-reduced-motion:reduce) {
  .profile-game-marquee-track { animation-play-state:paused; }
}

/* The older shared span chip rule must not turn editor labels into blue tokens. */
.profile-bio-image-size > span { display:block; padding:0; border:0; border-radius:0; background:transparent; color:hsl(var(--bio-card-hue) 95% 89%)!important; }
.profile-bio-image-size > output { color:hsl(var(--bio-card-hue) 95% 89%); }
.profile-bio-image-outline > span { display:inline; padding:0; border:0; border-radius:0; background:transparent; color:hsl(var(--bio-card-hue) 95% 89%)!important; font-size:inherit; }

/* Preserve each group's summary height when the host has many processes; the list itself scrolls. */
.task-manager-list { display:flex; flex-direction:column; align-items:stretch; align-content:stretch; }
.task-app-group { flex:0 0 auto; }

/* Profile shelf fades taper in and out, avoiding the hard rectangular blur edges. */
@media(max-width:700px) {
  .profile-game-marquee::before,.profile-game-marquee::after { width:44px; }
}

/* A custom profile image, or the banner as a fallback, supplies the page backdrop. */
.public-profile-page { position:relative; isolation:isolate; background:transparent; }
.public-profile-page.has-profile-backdrop::before { content:""; position:fixed; z-index:-1; inset:calc(var(--topbar-h,72px) + 4px) 0 0; pointer-events:none; background-image:var(--profile-backdrop-image); background-position:center; background-size:cover; filter:blur(var(--profile-backdrop-blur,34px)); opacity:1; transform:scale(1.1); }
.profile-hero-shade.is-disabled { display:none; }
.profile-form .profile-backdrop-blur-control { grid-column:1/-1; gap:7px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(181,130,255,.055); }
.profile-backdrop-blur-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text); font-size:10px; }
.profile-backdrop-blur-heading strong { font-size:10px; }
.profile-backdrop-blur-heading output { color:#D7B8FF; font-size:10px; font-weight:900; }
.profile-backdrop-blur-control small { color:var(--muted); font-size:9px; font-weight:500; }
.profile-form .profile-backdrop-blur-control input[type="range"] { width:100%; height:18px; margin:2px 0 0; padding:0; border:0; border-radius:0; background:transparent; accent-color:#B582FF; box-shadow:none; cursor:pointer; }
.profile-form .profile-backdrop-blur-control input[type="range"]:focus { box-shadow:none; }
.profile-image-editor { grid-template-columns:repeat(3,minmax(0,1fr)); }
.profile-background-reset { width:max-content; }
@media(max-width:780px) { .profile-image-editor { grid-template-columns:1fr; } }
.site-footer { position:relative; z-index:2; color:#c2b6cd; }
.site-footer-links section > strong { color:#f0e8fb; }
.site-footer-links button,.site-footer-links a { color:#c2b6cd; opacity:1; visibility:visible; text-shadow:0 1px 3px rgba(0,0,0,.72); }
.site-footer-bottom { color:#a99ab9; }
.profile-image-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.profile-image-actions button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }

/* Stable edge fades for the moving profile shelves: no backdrop-filter compositing on hover. */
.profile-game-marquee::before { left:0; }
.profile-game-marquee::after { right:0; }
.profile-game-marquee:hover .profile-game-marquee-track,.profile-game-marquee:focus-within .profile-game-marquee-track { animation-play-state:running; }
.profile-themeable { --profile-shelf-edge:color-mix(in srgb,var(--profile-card-accent,#B582FF) 14%,#17121e); border-color:color-mix(in srgb,var(--profile-card-accent,#B582FF) 24%,var(--line)); transition:border-color .2s ease; }
.profile-theme-solid .profile-themeable,.profile-theme-solid .profile-sparklies-card { background:color-mix(in srgb,var(--profile-card-color,#B582FF) 17%,#17121e); border-color:color-mix(in srgb,var(--profile-card-color,#B582FF) 40%,var(--line)); }
.profile-theme-gradient .profile-themeable,.profile-theme-gradient .profile-sparklies-card { background:linear-gradient(var(--profile-card-angle,135deg),color-mix(in srgb,var(--profile-card-gradient-start,#56327A) 34%,#17121e) 0%,color-mix(in srgb,var(--profile-card-gradient-end,#211629) 36%,#17121e) 100%); border-color:color-mix(in srgb,var(--profile-card-gradient-start,#56327A) 42%,var(--line)); }
.profile-theme-solid .profile-sparklies-card .nana-progress-fill { background:linear-gradient(90deg,var(--profile-card-color,#B582FF),color-mix(in srgb,var(--profile-card-color,#B582FF) 55%,#fff)); }
.profile-theme-gradient .profile-sparklies-card .nana-progress-fill { background:linear-gradient(var(--profile-card-angle,135deg),var(--profile-card-gradient-start,#56327A),var(--profile-card-gradient-end,#211629)); }
.profile-theme-solid .profile-sparklies-card img,.profile-theme-gradient .profile-sparklies-card img { filter:hue-rotate(var(--profile-card-hue-shift,0deg)) saturate(1.28) drop-shadow(0 4px 10px color-mix(in srgb,var(--profile-card-accent,#B582FF) 28%,transparent)); }
.profile-theme-solid .profile-themeable > .eyebrow,.profile-theme-gradient .profile-themeable > .eyebrow { color:color-mix(in srgb,var(--profile-card-accent,#B582FF) 70%,#f2eaff); }

/* Hand-built color selector keeps the controls branded instead of opening the browser's default color dialog. */
.profile-card-theme-editor { grid-column:1/-1; min-width:0; display:grid; gap:14px; padding:16px; border:1px solid var(--line-strong); border-radius:17px; background:linear-gradient(145deg,rgba(181,130,255,.085),rgba(24,17,32,.8)); }
.profile-card-theme-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.profile-card-theme-heading > div:first-child { display:grid; gap:4px; }
.profile-card-theme-heading strong { color:var(--text); font-size:12px; }
.profile-card-theme-heading small { color:var(--muted); font-size:9px; font-weight:500; line-height:1.45; }
.profile-theme-preview { width:min(220px,40%); min-height:52px; display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid color-mix(in srgb,var(--profile-preview-a) 46%,transparent); border-radius:13px; background:linear-gradient(var(--profile-preview-angle),color-mix(in srgb,var(--profile-preview-a) 42%,#17121e),color-mix(in srgb,var(--profile-preview-b) 42%,#17121e)); color:#f8f2ff; font-size:9px; font-weight:800; box-shadow:inset 0 1px #ffffff12; }
.profile-theme-preview[data-mode="solid"] { border-color:color-mix(in srgb,var(--profile-preview-solid) 46%,transparent); background:color-mix(in srgb,var(--profile-preview-solid) 26%,#17121e); }
.profile-theme-preview i { color:color-mix(in srgb,var(--profile-preview-a) 60%,#fff); font-size:15px; }
.profile-theme-mode { width:max-content; max-width:100%; display:flex; gap:5px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#100b17; }
.profile-theme-mode button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:9px; font-weight:800; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.profile-theme-mode button[aria-pressed="true"] { border-color:#c49af344; background:linear-gradient(135deg,#4a3061,#2a1d39); color:#f5eaff; }
.profile-theme-mode button i { font-size:12px; }
.profile-theme-controls[hidden] { display:none!important; }
.profile-theme-controls { min-width:0; }
.profile-theme-color-control { min-width:0; display:grid; gap:9px; padding:12px; border:1px solid #ffffff16; border-radius:14px; background:rgba(12,8,18,.46); }
.profile-theme-color-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.profile-theme-color-heading label { color:#e9ddf7; font-size:9px; font-weight:800; }
.profile-theme-color-heading output { color:#c7b1e4; font-size:9px; font-weight:800; font-variant-numeric:tabular-nums; }
.profile-theme-hex-row { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; }
.profile-form .profile-theme-hex-row input { min-width:0; height:34px; padding:0 10px; border-color:#ffffff20; background:#0e0a14; color:#f5efff; font:700 10px/1 ui-monospace,Consolas,monospace; letter-spacing:.04em; }
.profile-form .profile-theme-hex-row input:focus { border-color:#b582ff; box-shadow:0 0 0 3px rgba(181,130,255,.14); }
.profile-form .profile-theme-hex-row input.is-invalid { border-color:#e16c78; box-shadow:0 0 0 3px rgba(225,108,120,.12); }
.profile-theme-color-chip { width:34px; height:34px; display:block; border:1px solid #ffffff55; border-radius:10px; background:var(--chip,#B582FF); box-shadow:inset 0 1px #ffffff44,0 3px 10px #0005; }
.profile-form .profile-theme-hue-label { display:grid; gap:5px; color:#a99ab9; font-size:8px; font-weight:750; }
.profile-form .profile-theme-hue-label input[type="range"],.profile-form .profile-theme-angle input[type="range"] { width:100%; height:18px; margin:0; padding:0; border:0; border-radius:999px; appearance:none; -webkit-appearance:none; background:transparent; box-shadow:none; accent-color:#b582ff; cursor:pointer; }
.profile-form .profile-theme-hue-label input[type="range"]::-webkit-slider-runnable-track { height:8px; border:1px solid #ffffff35; border-radius:999px; background:linear-gradient(90deg,#f34b4b,#efc345,#58c96e,#45cbd0,#4b76ef,#ba52df,#f34b4b); }
.profile-form .profile-theme-hue-label input[type="range"]::-moz-range-track { height:8px; border:1px solid #ffffff35; border-radius:999px; background:linear-gradient(90deg,#f34b4b,#efc345,#58c96e,#45cbd0,#4b76ef,#ba52df,#f34b4b); }
.profile-form .profile-theme-angle input[type="range"]::-webkit-slider-runnable-track { height:8px; border:1px solid #ffffff35; border-radius:999px; background:linear-gradient(90deg,#533176,#b582ff,#311866); }
.profile-form .profile-theme-angle input[type="range"]::-moz-range-track { height:8px; border:1px solid #ffffff35; border-radius:999px; background:linear-gradient(90deg,#533176,#b582ff,#311866); }
.profile-form .profile-theme-hue-label input[type="range"]:focus,.profile-form .profile-theme-angle input[type="range"]:focus { box-shadow:none; }
.profile-form .profile-theme-hue-label input[type="range"]::-webkit-slider-thumb,.profile-form .profile-theme-angle input[type="range"]::-webkit-slider-thumb { width:16px; height:16px; border:2px solid #fff; border-radius:50%; appearance:none; background:#281b36; box-shadow:0 2px 7px #0009; }
.profile-form .profile-theme-hue-label input[type="range"]::-moz-range-thumb,.profile-form .profile-theme-angle input[type="range"]::-moz-range-thumb { width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#281b36; box-shadow:0 2px 7px #0009; }
.profile-theme-swatches { display:flex; flex-wrap:wrap; gap:7px; }
.profile-theme-swatch-option { width:21px; height:21px; padding:0; border:1px solid #ffffff62; border-radius:50%; background:var(--swatch); box-shadow:0 2px 7px #0005; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.profile-theme-swatch-option:hover,.profile-theme-swatch-option:focus-visible { transform:scale(1.14); box-shadow:0 0 0 3px rgba(255,255,255,.14); }
.profile-theme-gradient-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-theme-angle { display:grid; gap:6px; margin-top:11px; }
.profile-theme-angle > span { display:flex; justify-content:space-between; color:#c7b1e4; font-size:9px; font-weight:800; }
.profile-theme-angle output { color:#f5eaff; }
.profile-theme-error { min-height:0; margin:0; color:#ff9da7; font-size:9px; }
.profile-theme-error:empty { display:none; }
@media(max-width:600px) { .profile-card-theme-heading { align-items:flex-start; flex-direction:column; }.profile-theme-preview { width:100%; }.profile-theme-gradient-colors { grid-template-columns:1fr; }.profile-theme-mode { width:100%; }.profile-theme-mode button { flex:1; padding-inline:7px; } }

/* Bring the Miwi player onto the same topbar and control-rail system as the cloud player. */
.miwibits-player-body { background:#08060d; color:#f7f2ff; }
.miwibits-game-player { background:#08060d; }
.miwibits-game-stage { background:#08060d; transition:width .2s ease,height .2s ease,transform .2s ease; }
.miwibits-game-player.display-fit .miwibits-game-stage { inset:auto; top:50%; left:50%; width:min(100vw,177.78dvh); height:min(100dvh,56.25vw); transform:translate(-50%,-50%); aspect-ratio:16/9; }
.miwibits-game-player.display-fit-portrait .miwibits-game-stage { width:min(100vw,56.25dvh); height:min(100dvh,177.78vw); aspect-ratio:9/16; }
.miwibits-player-topbar { top:max(18px,env(safe-area-inset-top)); left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); }
.miwibits-player-top-left,.miwibits-player-actions { min-width:0; display:flex; align-items:center; gap:9px; }
.miwibits-player-topbar .stream-top-back,.miwibits-player-topbar .stream-top-icon { border-color:rgba(255,255,255,.1); background:rgba(15,11,21,.78); color:#f6f0ff; box-shadow:0 10px 34px rgba(0,0,0,.25); }
.miwibits-player-topbar .stream-top-back:hover,.miwibits-player-topbar .stream-top-icon:hover { border-color:rgba(181,130,255,.45); background:rgba(32,22,45,.94); }
.miwibits-player-save-toggle { display:inline-flex; align-items:center; gap:8px; width:auto; min-width:44px; padding-inline:12px; color:#eadbff!important; border-color:rgba(181,130,255,.24)!important; background:rgba(49,32,69,.84)!important; }
.miwibits-player-save-toggle span { font-size:10px; font-weight:750; }
.miwibits-player-save-toggle[hidden] { display:none!important; }
.miwi-save-return-prompt,.miwi-save-panel { position:fixed; z-index:25; color:#f6efff; border:1px solid rgba(181,130,255,.38); background:linear-gradient(130deg,rgba(33,23,46,.97),rgba(14,13,19,.97)); box-shadow:0 22px 70px rgba(0,0,0,.48),0 0 30px rgba(147,90,215,.12); backdrop-filter:blur(18px); }
.miwi-save-return-prompt[hidden],.miwi-save-panel[hidden] { display:none!important; }
.miwi-save-return-prompt { top:calc(max(18px,env(safe-area-inset-top)) + 58px); left:50%; width:min(500px,calc(100vw - 28px)); transform:translateX(-50%); display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px; border-radius:18px; }
.miwi-save-return-prompt > img { width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(255,148,44,.38)); }
.miwi-save-return-copy { display:grid; gap:4px; min-width:0; }
.miwi-save-return-copy strong { font-size:12px; }
.miwi-save-return-copy > span { color:#c7b7d7; font-size:10px; line-height:1.4; }
.miwi-save-return-copy label { display:flex; align-items:center; gap:6px; color:#bbaaca; font-size:9px; }
.miwi-save-return-copy input { accent-color:#b582ff; }
.miwi-save-return-actions { display:flex; flex-direction:column; gap:6px; }
.miwi-save-return-actions button { min-height:32px; padding:0 10px; border-radius:10px; font-size:9px; white-space:nowrap; }
.miwi-save-panel { top:calc(max(18px,env(safe-area-inset-top)) + 56px); right:max(18px,env(safe-area-inset-right)); display:flex; flex-direction:column; width:min(420px,calc(100vw - 28px)); max-height:min(690px,calc(100dvh - 108px)); overflow:hidden; border-radius:20px; }
.miwi-save-panel > header { display:flex; align-items:center; gap:11px; padding:14px 15px; border-bottom:1px solid rgba(255,255,255,.08); }
.miwi-save-panel-icon { display:grid; width:38px; height:38px; flex:none; place-items:center; border:1px solid rgba(181,130,255,.25); border-radius:12px; background:rgba(181,130,255,.12); color:#d7b8ff; font-size:16px; }
.miwi-save-panel > header > div { display:grid; gap:3px; min-width:0; flex:1; }
.miwi-save-panel > header strong { font-size:13px; }
.miwi-save-panel > header span:not(.miwi-save-panel-icon) { overflow:hidden; color:#bdafca; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.miwi-save-panel > header > button { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:#211b29; color:#e8def2; cursor:pointer; }
.miwi-save-panel-preferences { display:grid; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); }
.miwi-save-panel-preferences[hidden],.miwi-save-slots[hidden] { display:none!important; }
.miwi-save-unsupported { margin:12px 14px 0; padding:11px 12px; border:1px solid rgba(255,183,107,.2); border-radius:12px; background:rgba(255,183,107,.06); color:#d8c8e4; font-size:10px; line-height:1.55; }
.miwi-save-unsupported[hidden] { display:none!important; }
.miwi-save-preference { display:flex; align-items:center; gap:12px; min-height:44px; padding:9px 11px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); }
.miwi-save-preference > span { display:grid; gap:3px; flex:1; }
.miwi-save-preference strong { font-size:10px; }
.miwi-save-preference small { color:#a99bb7; font-size:8px; line-height:1.35; }
.miwi-save-preference button { flex:none; }
.miwi-save-slots { display:grid; gap:7px; padding:11px 14px; overflow-y:auto; }
.miwi-save-slot { display:flex; align-items:center; gap:9px; min-height:52px; padding:8px 9px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); }
.miwi-save-slot-icon { display:grid; width:32px; height:32px; flex:none; place-items:center; border:1px solid rgba(181,130,255,.16); border-radius:10px; background:rgba(181,130,255,.08); color:#c7a5ef; }
.miwi-save-slot-copy { display:grid; gap:3px; min-width:0; flex:1; }
.miwi-save-slot-copy strong { font-size:10px; }
.miwi-save-slot-copy small { overflow:hidden; color:#aa9ab8; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.miwi-save-slot-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex:none; }
.miwi-save-slot-actions button { min-height:29px; padding:0 9px; border:1px solid rgba(181,130,255,.2); border-radius:9px; background:rgba(181,130,255,.11); color:#e6d2ff; font-size:8px; font-weight:750; cursor:pointer; }
.miwi-save-slot-actions button:hover:not(:disabled) { border-color:rgba(181,130,255,.5); background:rgba(181,130,255,.2); }
.miwi-save-slot-actions button:disabled { opacity:.45; cursor:wait; }
.miwi-save-slot-actions button[hidden] { display:none!important; }
.miwi-save-panel > footer { display:grid; gap:5px; padding:10px 15px 13px; border-top:1px solid rgba(255,255,255,.07); color:#cbb6e3; font-size:9px; }
.miwi-save-panel > footer small { color:#9889a6; font-size:8px; line-height:1.4; }
.miwibits-game-player.hud-hidden .miwi-save-panel,.miwibits-game-player.hud-hidden .miwi-save-return-prompt { display:none!important; }
.miwibits-player-session { background:rgba(17,12,25,.82); border-color:rgba(255,255,255,.1); }
.miwibits-player-session .stream-live-dot { background:#62dc9b; box-shadow:0 0 0 4px rgba(98,220,155,.1),0 0 14px rgba(98,220,155,.45); }
.miwibits-player-session .stream-session-copy strong { max-width:min(34vw,420px); }
.miwibits-player-session .stream-session-copy span { color:#bdacd0; }
.miwibits-game-player.is-running .miwibits-player-session .stream-session-copy span { color:#e6dbef; }
.miwibits-player-running { visibility:hidden; }
.miwibits-game-player.is-running .miwibits-player-running { visibility:visible; }
.miwibits-player-source-chip { flex:none; color:#e2d5f2; background:rgba(17,12,25,.82); border-color:rgba(255,255,255,.1); }
.miwibits-player-source-chip img { width:23px; height:23px; object-fit:contain; filter:drop-shadow(0 0 7px rgba(255,148,44,.34)); }
.miwibits-player-hud { width:min(1740px,87vw,calc(100% - 40px)); min-height:70px; gap:10px; padding:8px 11px; border-color:rgba(255,255,255,.1); border-radius:21px; background:rgba(13,11,18,.84); box-shadow:0 18px 60px rgba(0,0,0,.36); }
.miwibits-player-hud-game { min-width:0; flex:1; display:flex; align-items:center; gap:10px; }
.miwibits-player-game-icon { width:44px; height:44px; border-color:rgba(255,255,255,.12); border-radius:14px; background:#21182d; }
.miwibits-player-hud-copy { min-width:0; flex:1; }
.miwibits-player-hud-copy strong { font-size:10px; }
.miwibits-player-hud .hud-divider { margin-inline:3px; }
.miwibits-player-hud .stream-hud-actions { gap:4px; }
.miwibits-player-hud .hud-btn { width:44px; height:44px; border-radius:14px; }
.miwibits-player-hud .hud-btn.primary-control { background:var(--yellow); color:#20122f; }
.miwibits-player-hud .hud-btn.primary-control:hover { background:#d8beff; }
.miwibits-player-hud .hud-btn.miwibits-player-stop { border:1px solid rgba(255,108,122,.24); background:rgba(188,47,65,.15); color:#ff8996; }
.miwibits-player-hud .hud-btn.miwibits-player-stop:hover { border-color:rgba(255,108,122,.58); background:#c83d50; color:#fff; box-shadow:0 0 20px rgba(218,55,75,.2); }
.miwibits-game-player.hud-hidden .miwibits-player-hud { opacity:0; visibility:hidden; transform:translate(-50%,14px); pointer-events:none; }
.miwibits-player-settings[hidden],.miwibits-player-controls-toggle[hidden],.miwibits-player-controls-help[hidden] { display:none!important; }
.miwibits-player-settings.player-settings-drawer { --player-panel-surface:#18151e; --player-panel-raised:#211b2a; --player-panel-line:rgba(255,255,255,.08); }
.miwibits-player-settings .player-settings-nav { background:#17141d; }
.miwibits-player-settings .player-settings-nav-capsule { background:#231d2b; }
.miwibits-player-settings .player-touch-settings-head { border-bottom-color:rgba(255,255,255,.08); }
.miwibits-player-settings .player-touch-settings-head .home-kicker { color:#c5a8ed; }
.miwibits-player-settings .player-touch-settings-field { color:#cfc3db; }
.miwibits-player-settings .player-touch-settings-field select,.miwibits-player-settings .player-touch-settings-field select option { border-color:rgba(181,130,255,.22); background:#21182d; }
.miwibits-player-settings .player-touch-setting-row { border-color:rgba(255,255,255,.07); }
.miwibits-player-settings .player-touch-setting-row strong { color:#f1eafd; }
.miwibits-player-settings .player-touch-setting-row span { color:#aca0b8; }
.miwibits-player-settings-note { display:flex; align-items:center; gap:9px; margin-top:10px; padding:11px 12px; border:1px solid rgba(181,130,255,.13); border-radius:12px; background:rgba(181,130,255,.06); color:#bdb0cb; font-size:9px; line-height:1.5; }
.miwibits-player-settings-note i { flex:none; color:#c9a8ff; font-size:13px; }
.miwibits-player-settings-controls { display:grid; gap:7px; margin-top:12px; padding:11px 12px; border:1px solid rgba(181,130,255,.16); border-radius:12px; background:rgba(181,130,255,.055); }
.miwibits-player-settings-controls .home-kicker { color:#c5a8ed; }
.miwibits-player-settings-controls p { margin:0; color:#ddd2e9; font-size:10px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.miwibits-game-player.needs-account > :not(.miwibits-player-auth-gate) { visibility:hidden; }
.miwibits-player-error { z-index:16; }
.miwibits-player-status { background:linear-gradient(110deg,rgba(45,27,65,.94),rgba(12,13,18,.91)); }
.miwibits-player-proxy-action { min-height:36px; padding:0 11px; border-color:rgba(181,130,255,.42); color:#e6caff; background:rgba(181,130,255,.12); white-space:nowrap; }
.miwibits-player-proxy-action:hover:not(:disabled) { border-color:rgba(181,130,255,.72); background:rgba(181,130,255,.2); }
.miwibits-player-proxy-action[hidden] { display:none!important; }
@media(max-width:680px) {
  .miwibits-player-topbar { top:max(9px,env(safe-area-inset-top)); left:max(9px,env(safe-area-inset-left)); right:max(9px,env(safe-area-inset-right)); gap:6px; }
  .miwibits-player-top-left,.miwibits-player-actions { gap:5px; }
  .miwibits-player-topbar .stream-top-back,.miwibits-player-topbar .stream-top-icon { width:42px; height:42px; flex-basis:42px; border-radius:14px; }
  .miwibits-player-save-toggle { padding-inline:9px; }
  .miwibits-player-save-toggle span { display:none; }
  .miwi-save-return-prompt { top:calc(max(9px,env(safe-area-inset-top)) + 54px); grid-template-columns:34px minmax(0,1fr); gap:9px; padding:10px; }
  .miwi-save-return-prompt > img { width:34px; height:34px; }
  .miwi-save-return-actions { grid-column:1/-1; flex-direction:row; justify-content:flex-end; }
  .miwi-save-panel { top:calc(max(9px,env(safe-area-inset-top)) + 54px); right:8px; width:calc(100vw - 16px); max-height:calc(100dvh - 82px); }
  .miwi-save-panel-preferences,.miwi-save-slots { padding-inline:10px; }
  .miwibits-player-session { max-width:calc(100vw - 260px); padding-inline:9px; gap:8px; }
  .miwibits-player-session .stream-session-copy strong { max-width:calc(100vw - 320px); font-size:9px; }
  .miwibits-source-chip { height:42px; gap:5px; padding-inline:8px; }
  .miwibits-source-chip img { width:21px; height:21px; }
  .miwibits-player-hud { left:8px; bottom:max(8px,env(safe-area-inset-bottom)); width:calc(100% - 16px); min-height:56px; gap:6px; padding:6px 7px; border-radius:17px; transform:none; }
  .miwibits-player-hud { transition:opacity .18s ease,visibility .18s ease; }
  .miwibits-player-game-icon { width:36px; height:36px; }
  .miwibits-player-hud .stream-hud-actions { gap:2px; }
  .miwibits-player-hud .hud-btn { width:38px; height:38px; border-radius:12px; }
  .miwibits-player-social { top:58px; left:8px; width:min(370px,calc(100% - 16px)); }
  .miwibits-game-player:not(.hud-hidden) .miwibits-player-hud { transform:none!important; }
  .miwibits-game-player.hud-hidden .miwibits-player-hud { transform:none!important; }
}
@media(max-width:480px) {
  .miwibits-source-chip > span { display:none; }
  .miwibits-player-source-chip { width:42px; justify-content:center; padding:0; }
  .miwibits-player-session { max-width:calc(100vw - 260px); }
  .miwibits-player-session .stream-session-copy strong { max-width:calc(100vw - 320px); }
  #miwibits-player-controls-toggle { display:none!important; }
  .miwibits-player-hud { gap:4px; }
  .miwibits-player-game-icon { width:32px; height:32px; }
  .miwibits-player-hud-copy strong { font-size:9px; }
  .miwibits-player-hud .hud-btn { width:34px; height:34px; }
  .miwibits-player-hud .stream-hud-actions { gap:0; }
}
.miwibits-game-player.reduce-motion .miwibits-player-status,
.miwibits-game-player.reduce-motion .miwibits-player-hud,
.miwibits-game-player.reduce-motion .miwibits-player-topbar,
.miwibits-game-player.reduce-motion .miwibits-player-icon,
.miwibits-game-player.reduce-motion .player-settings-drawer,
.miwibits-game-player.reduce-motion .player-settings-backdrop { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.miwibits-game-player.is-ended .miwibits-player-status { opacity:1; visibility:visible; }
.miwibits-game-player.is-booting > :not(.miwibits-player-boot):not(.miwibits-player-auth-gate):not(dialog) { visibility:hidden!important; }
.miwibits-player-boot { position:fixed; inset:0; z-index:120; padding:0; background:radial-gradient(circle at 50% 35%,#3c265c,#100d19 48%,#08070d); }
.miwibits-player-boot[hidden] { display:none!important; }
.miwibits-player-boot .stream-standard-launch-image[hidden] { display:none; }
.miwibits-player-boot .stream-standard-launch-shade { background:linear-gradient(180deg,rgba(39,23,62,.33),rgba(16,10,30,.08) 42%,rgba(8,6,14,.85)); }
.miwibits-player-boot .stream-standard-launch-notice { background:linear-gradient(180deg,rgba(190,139,249,.95),rgba(118,72,168,.76) 48%,transparent); }
.miwibits-player-boot .stream-top-notice-card { color:#1a1026; text-shadow:0 1px 0 rgba(255,255,255,.3); }
.miwibits-player-boot .stream-top-notice-icon { background:rgba(35,18,53,.2); }
.miwibits-player-boot .stream-standard-launch-progress { background:rgba(220,194,255,.25); }
.miwibits-player-boot small { position:absolute; z-index:3; left:50%; top:155px; max-width:min(88vw,600px); color:#ffd5db; font-size:10px; line-height:1.5; overflow-wrap:anywhere; transform:translateX(-50%); }
.miwibits-game-player:not(.is-error):not(.is-ended) .miwibits-player-status { opacity:0!important; visibility:hidden!important; pointer-events:none!important; }
.cloud-game-detail .game-page-play.is-insufficient-sparklies,
.cloud-game-detail .game-page-play.is-insufficient-sparklies:hover {
  border:1px solid rgba(255,178,190,.28); background:linear-gradient(120deg,rgba(82,48,65,.9),rgba(56,38,59,.94));
  color:#d7c6d4; box-shadow:none; cursor:not-allowed; filter:none; opacity:.78; transform:none;
}
.home-v4 .featured-primary.is-insufficient-sparklies,
.home-v4 .featured-primary.is-insufficient-sparklies:hover { border:1px solid rgba(255,178,190,.26); background:rgba(90,55,73,.72); color:#d7c6d4; box-shadow:none; cursor:not-allowed; filter:none; opacity:.78; transform:none; }
.game-play-balance-warning { display:flex; align-items:center; gap:7px; margin:4px 16px 12px; padding:10px 12px; border:1px solid rgba(255,177,191,.19); border-radius:12px; background:rgba(119,46,74,.13); color:#f1c9d2; font-size:9px; line-height:1.55; }
.game-play-balance-warning span { flex:1 1 180px; }
.game-play-balance-warning button { flex:none; padding:6px 9px; border:1px solid rgba(218,181,255,.24); border-radius:9px; background:rgba(179,122,240,.12); color:#e4c9ff; font:inherit; font-weight:800; cursor:pointer; }
.game-play-balance-warning button:hover { background:rgba(179,122,240,.22); }
.game-play-balance-warning::before { content:"!"; width:17px; height:17px; flex:none; display:grid; place-items:center; border:1px solid rgba(255,177,191,.28); border-radius:50%; color:#ffb1c0; font-weight:900; }
.sparklies-depleted-dialog { width:min(440px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:visible; border:1px solid rgba(220,190,255,.24); border-radius:24px; background:transparent; color:#f8f3fc; }
.sparklies-depleted-dialog::backdrop { background:rgba(6,4,10,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sparklies-depleted-card { position:relative; display:grid; justify-items:center; gap:11px; padding:34px 30px 28px; border-radius:inherit; background:radial-gradient(ellipse at 50% 0%,rgba(177,111,255,.18),transparent 56%),linear-gradient(145deg,#1d1627,#100d16); box-shadow:0 28px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08); text-align:center; }
.sparklies-depleted-close { position:absolute; top:12px; right:12px; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.11); border-radius:11px; background:rgba(255,255,255,.045); color:#d8cbe5; cursor:pointer; }
.sparklies-depleted-close:hover { border-color:rgba(210,171,255,.46); background:rgba(174,118,238,.14); color:#fff; }
.sparklies-depleted-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:3px; border:1px solid rgba(213,173,255,.22); border-radius:18px; background:rgba(177,111,255,.11); box-shadow:0 8px 26px rgba(141,81,210,.15); }
.sparklies-depleted-icon img { width:34px; height:34px; object-fit:contain; }
.sparklies-depleted-card .home-kicker { color:#c8a0f3; font-size:9px; letter-spacing:.16em; }
.sparklies-depleted-card h2 { margin:0; font-size:clamp(22px,5vw,30px); letter-spacing:-.045em; }
.sparklies-depleted-card p { max-width:340px; margin:0; color:#bdb0ca; font-size:11px; line-height:1.7; }
.sparklies-depleted-shop { min-height:42px; margin-top:7px; padding:0 22px; border:0; border-radius:13px; background:linear-gradient(110deg,#dfa0ff,#aa70f3); color:#241333; font-weight:850; cursor:pointer; }
.sparklies-depleted-shop:hover { filter:brightness(1.08); transform:translateY(-1px); }
.sparklies-depleted-close:focus-visible,.sparklies-depleted-shop:focus-visible { outline:2px solid #ead4ff; outline-offset:3px; }
.miwi-route-chooser {
  inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0;
  padding:clamp(12px,3vw,36px); box-sizing:border-box; overflow:hidden;
  border:0; border-radius:0; background:#13121b; color:#f7f5fa;
  font-family:inherit; isolation:isolate; place-items:center;
}
.miwi-route-chooser[open] { display:grid; }
.miwi-route-chooser:not([open]) { display:none; }
.miwi-route-chooser::backdrop { background:#08080dcc; }
.miwi-route-art,.miwi-route-scrim { position:absolute; inset:0; pointer-events:none; }
.miwi-route-art { overflow:hidden; }
.miwi-route-art img { display:block; width:100%; height:100%; object-fit:cover; filter:blur(26px) brightness(.48); transform:scale(1.08); }
.miwi-route-scrim { background:linear-gradient(115deg,#12121be6,#17151fc9 52%,#111018db); }
.miwi-route-shell {
  position:relative; z-index:1; width:min(100%,940px); max-height:calc(100dvh - 24px);
  padding:clamp(19px,3vw,34px); box-sizing:border-box; overflow:auto;
  border:1px solid #d8dfe63b; border-radius:28px;
  background:linear-gradient(145deg,#292832ed,#191a23f2);
  box-shadow:0 28px 90px #0009,inset 0 1px #ffffff20;
  backdrop-filter:blur(18px);
}
.miwi-route-heading { margin-bottom:23px; }
.miwi-route-brand { display:inline-flex; align-items:center; gap:9px; color:#e4d1ff; font-size:10px; font-weight:800; letter-spacing:.13em; }
.miwi-route-brand img { width:30px; height:30px; object-fit:contain; }
.miwi-route-eyebrow { display:block; margin-top:24px; color:#cfa5ff; font-size:10px; font-weight:800; letter-spacing:.16em; }
.miwi-route-heading h1 { margin:6px 0 5px; font-size:clamp(25px,3.4vw,39px); line-height:1.1; letter-spacing:-.04em; }
.miwi-route-game-name { margin:0; overflow:hidden; color:#cbc5d1; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.miwi-route-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.miwi-route-option { min-width:0; display:flex; flex-direction:column; padding:22px; border:1px solid #d8dfe62d; border-radius:22px; background:linear-gradient(155deg,#35333e9e,#24242dba); }
.miwi-route-option.is-dynamic { border-color:#be96ee70; background:linear-gradient(155deg,#43374fbd,#28232fdd); }
.miwi-route-option-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid #d8dfe639; border-radius:15px; background:#ffffff10; color:#f6f1fc; font-size:22px; }
.miwi-route-option.is-dynamic .miwi-route-option-icon { border-color:#cca7fa77; color:#d9b8ff; }
.miwi-route-option-kicker { margin-top:20px; color:#c7becf; font-size:9px; font-weight:800; letter-spacing:.13em; }
.miwi-route-option h2 { margin:4px 0 0; font-size:25px; letter-spacing:-.03em; }
.miwi-route-option p { min-height:38px; margin:9px 0 12px; color:#d0cbd4; font-size:12px; line-height:1.5; }
.miwi-route-option ul { flex:1; margin:0 0 20px; padding-left:18px; color:#d0cbd4; font-size:11px; line-height:1.8; }
.miwi-route-option button { width:100%; min-height:49px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; border:1px solid #d8dfe64c; border-radius:14px; background:#ffffff12; color:#fff; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.miwi-route-option.is-dynamic button { border-color:#e3c6ff88; background:linear-gradient(105deg,#d9a7ff,#a773ed); color:#24152e; }
.miwi-route-option button:hover:not(:disabled) { filter:brightness(1.12); }
.miwi-route-option button:disabled { opacity:.45; cursor:not-allowed; }
.miwi-route-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 20px; }
.miwi-route-features > span { min-width:0; display:grid; grid-template-columns:25px minmax(0,1fr); column-gap:6px; align-items:center; padding:10px; border:1px solid #d5b4f057; border-radius:12px; background:#c49bec17; }
.miwi-route-features i { grid-row:1/3; color:#d8b1ff; font-size:17px; }
.miwi-route-features strong { font-size:11px; }
.miwi-route-features small { color:#c7bad0; font-size:9px; line-height:1.25; }
.miwi-route-unavailable { margin-top:10px; color:#bcb5c3; font-size:10px; line-height:1.4; }
.miwi-route-chooser footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; color:#bbb5c2; font-size:11px; }
.miwi-route-chooser footer span { display:flex; align-items:center; gap:7px; }
.miwi-route-chooser footer button { flex:none; min-height:39px; padding:0 14px; border:1px solid #d8dfe63b; border-radius:12px; background:#ffffff0d; color:#f4edf9; font:inherit; font-size:11px; cursor:pointer; }
.miwi-route-chooser button:focus-visible { outline:2px solid #dcc3ff; outline-offset:3px; }
@media(max-width:620px) {
  .miwi-route-shell { max-height:calc(100dvh - 20px); padding:18px; border-radius:20px; }
  .miwi-route-eyebrow { margin-top:14px; }
  .miwi-route-options { grid-template-columns:1fr; gap:10px; }
  .miwi-route-option { padding:16px; }
  .miwi-route-option p { min-height:0; }
  .miwi-route-option ul { margin-bottom:12px; }
  .miwi-route-option-kicker { margin-top:10px; }
  .miwi-route-chooser footer { align-items:stretch; flex-direction:column; }
}

/* Keep the direct-chat composer on one stable control row, with attachment previews above it. */
.direct-message-form {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) repeat(4,40px) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}
.direct-message-form #direct-message-input { width:100%; min-width:0; grid-column:1; }
.direct-message-form #direct-image-button { grid-column:2; }
.direct-message-form #direct-gif-button { grid-column:3; }
.direct-message-form #direct-game-menu { grid-column:4; min-width:0; }
.direct-message-form #direct-game-button { width:40px; height:40px; }
.direct-message-form #direct-gift-button { grid-column:5; }
.direct-message-form > .primary-btn { grid-column:6; min-width:70px; white-space:nowrap; }
.direct-message-form > .chat-attachment.is-pending,
.direct-message-form > .chat-game-invite.is-pending,
.direct-message-form > .chat-reply-preview { grid-column:1/-1!important; width:100%; min-width:0; box-sizing:border-box; }
.direct-message-form > .chat-attachment.is-pending .chat-attachment-image { max-height:104px; object-fit:contain; }
.direct-message-form:has(.chat-attachment.is-pending) #direct-game-menu { grid-column:4!important; grid-row:auto!important; }
.direct-message-form:has(.chat-attachment.is-pending) #direct-game-button { grid-column:auto!important; grid-row:auto!important; }
.chat-reply-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #b989ee35; border-left:3px solid #b582ff; border-radius:10px; background:#1a1323; }
.chat-reply-preview > span { min-width:0; display:grid; gap:3px; }
.chat-reply-preview strong,.chat-reply-preview small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-reply-preview strong { color:#e6d5fb; font-size:9px; }
.chat-reply-preview small { color:#b9a9ca; font-size:8px; }
.chat-reply-preview button { flex:none; width:26px; height:26px; border:1px solid #b989ee35; border-radius:8px; background:#ffffff08; color:#eee0ff; cursor:pointer; }
.direct-message { position:relative; min-width:0; overflow-wrap:anywhere; }
.direct-message-tools { display:flex; justify-content:flex-end; gap:4px; margin-top:1px; opacity:0; transition:opacity .12s ease; }
.direct-message:hover .direct-message-tools,.direct-message:focus-within .direct-message-tools { opacity:1; }
.direct-message-tools button { width:25px; height:23px; display:grid; place-items:center; padding:0; border:1px solid #ffffff1c; border-radius:7px; background:#100c19aa; color:#e4d3f7; cursor:pointer; }
.direct-message-tools button:hover { border-color:#c69aff88; background:#8f60c12a; }
.chat-message-reply { min-width:0; margin:0 0 4px; padding:6px 8px; border-left:2px solid #d2aeff; border-radius:0 7px 7px 0; background:#120d1b55; color:#dfc8ff; font-size:9px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-call-invite { min-width:0; max-width:100%; box-sizing:border-box; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px; }
.chat-call-invite > span { min-width:0; }
.chat-call-invite > span strong,.chat-call-invite > span small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-call-invite > button { min-width:64px; max-width:100%; padding:7px 9px; white-space:normal; overflow-wrap:anywhere; }
.mini-chat-error { overflow-wrap:anywhere; }
.miwibits-chat-compose { display:grid!important; grid-template-columns:minmax(0,1fr) 40px 40px 44px; align-items:center; gap:7px; min-width:0; }
.miwibits-chat-compose > input[data-chat-input] { width:100%; min-width:0; grid-column:1; }
.miwibits-chat-compose > [data-chat-image],.miwibits-chat-compose > [data-chat-gif] { width:40px; height:40px; }
.miwibits-chat-compose > [type=submit] { width:44px; min-width:44px; height:44px; padding:0; }
.miwibits-chat-compose > .mini-chat-preview { grid-column:1/-1; }
.miwibits-player-social .chat-call-invite { grid-template-columns:26px minmax(0,1fr) auto; gap:6px; padding:7px; }
.miwibits-player-social .chat-call-invite > button { min-width:56px; padding:6px 7px; font-size:9px; }

/* Compact notifications no longer cover the game/chat or clip their own text. */
#detailed-notifications { top:12px; right:12px; width:min(318px,calc(100vw - 24px)); gap:7px; }
.detailed-notification { grid-template-columns:30px minmax(0,1fr) 22px; gap:8px; padding:10px 11px; border-radius:14px; }
.detailed-notification strong { display:block; font-size:11px; line-height:1.3; }
.detailed-notification p { margin:4px 0 6px; font-size:10px; line-height:1.4; }
.detailed-notification-icon { font-size:19px; }
.detailed-notification button { padding:5px 8px; font-size:9px; }

/* The activity card and spectator menu stay full-width and readable in the narrow sidebar. */
.friend-activity { width:100%; min-width:0; box-sizing:border-box; margin:10px 0 0; overflow:visible; }
.friend-activity-feed,.friend-activity-list { width:100%; min-width:0; grid-template-columns:minmax(0,1fr); }
.friend-activity-card { width:100%; min-width:0; box-sizing:border-box; }
.friend-activity-actions,.activity-watch-menu { overflow:visible; }
.activity-watch-menu > div { width:max-content; min-width:230px; max-width:min(320px,calc(100vw - 24px)); box-sizing:border-box; }
.activity-watch-menu > div button { width:100%!important; min-width:0!important; min-height:34px; display:flex; align-items:center; white-space:normal; overflow-wrap:anywhere; line-height:1.3; }

.player-incoming-call-banner { position:fixed; z-index:28000; top:max(14px,env(safe-area-inset-top)); left:50%; width:min(660px,calc(100vw - 28px)); min-height:74px; box-sizing:border-box; transform:translateX(-50%); display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 13px; border:1px solid #c39aff88; border-radius:18px; background:linear-gradient(110deg,#241a31f5,#110d19f5); color:#f7f0ff; box-shadow:0 14px 48px #0009,0 0 30px #a76bff22; backdrop-filter:blur(20px); }
.player-incoming-call-avatar { width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border:2px solid #c59aff; border-radius:50%; background:#38254c; color:#f0deff; font-weight:800; }
.player-incoming-call-avatar img { width:100%; height:100%; object-fit:cover; }
.player-incoming-call-avatar img[hidden] { display:none; }
.player-incoming-call-avatar img:not([hidden]) + b { display:none; }
.player-incoming-call-copy { min-width:0; display:grid; gap:3px; }
.player-incoming-call-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-incoming-call-copy small { color:#c8b9d8; font-size:10px; }
.player-incoming-call-actions { display:flex; gap:7px; }
.player-incoming-call-actions button { min-height:38px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border:1px solid #ffffff1c; border-radius:11px; background:#2c2138; color:#eee2ff; font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.player-incoming-call-actions [data-banner-answer] { border-color:#8de2b879; background:#175641; color:#e6fff4; }
.player-incoming-call-actions [data-banner-decline] { border-color:#ff92a644; background:#51243a; color:#ffe5ec; }
.player-incoming-call-actions button:disabled { opacity:.55; cursor:wait; }
.social-call-panel:has(.call-device-settings[open]) { contain:initial; }
.call-device-settings { position:relative; flex:none; }
.call-device-settings summary { min-height:38px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 9px; border:1px solid #b789ee55; border-radius:11px; background:#21182d; color:#ddc8f4; cursor:pointer; list-style:none; font-size:9px; }
.call-device-settings summary::-webkit-details-marker { display:none; }
.call-device-menu { position:absolute; z-index:5; right:0; bottom:calc(100% + 8px); width:min(260px,calc(100vw - 54px)); display:grid; gap:9px; padding:12px; border:1px solid #b789ee66; border-radius:14px; background:#1a1423f5; box-shadow:0 12px 38px #0009; }
.call-device-menu label { min-width:0; display:grid; gap:4px; color:#cbbbdc; font-size:9px; }
.call-device-menu select { width:100%; min-width:0; height:34px; padding:0 8px; border:1px solid #b789ee44; border-radius:8px; background:#100c17; color:#f3eaff; font:inherit; font-size:9px; }
.call-device-menu select:disabled { opacity:.55; }
.call-device-menu small { color:#c9aaff; font-size:8px; }
@media(max-width:560px) {
  .direct-message-form { grid-template-columns:minmax(0,1fr) repeat(4,34px) auto; gap:5px; padding:9px; }
  .direct-message-form #direct-image-button,.direct-message-form #direct-gif-button,.direct-message-form #direct-gift-button,.direct-message-form #direct-game-button { width:34px; height:36px; }
  .direct-message-form > .primary-btn { min-width:52px; padding-inline:8px; font-size:9px; }
  .player-incoming-call-banner { grid-template-columns:42px minmax(0,1fr); gap:8px; padding:9px; }
  .player-incoming-call-avatar { width:40px; height:40px; }
  .player-incoming-call-actions { grid-column:1/-1; justify-content:flex-end; }
  .player-incoming-call-actions button { flex:1; }
}

.global-chat-entry { width:100%; margin:0 0 10px; border-color:#b687ed55; background:linear-gradient(110deg,#291d37,#1b1721); }
.global-chat-entry-icon,.global-chat-mark { width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid #c19aff55; border-radius:12px; background:#a977ff20; color:#d5baff; }
.global-chat-head { min-width:0; }
.global-chat-head > div:nth-child(2) { min-width:0; flex:1; }
.global-chat-head h2 { margin:0; }
.global-chat-head p { margin:4px 0 0; color:var(--muted-text,#aaa0b5); font-size:10px; }
.global-chat-list { display:flex; flex-direction:column; gap:0; padding:12px 16px; }
.global-chat-message { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:10px; padding:10px 4px; border-bottom:1px solid #ffffff0b; }
.global-chat-message:last-child { border-bottom:0; }
.global-chat-message > .profile-avatar { width:34px; height:34px; }
.global-chat-message > div { min-width:0; }
.global-chat-message header { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; }
.global-chat-message header strong { color:#f3eaff; font-size:12px; }
.global-chat-message header small { color:#998da9; font-size:9px; }
.global-chat-message p { margin:3px 0 0; color:#ded5e9; font-size:12px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
.global-chat-message .direct-message-timestamp { display:block; margin-top:5px; }
.global-chat-form { display:grid; grid-template-columns:minmax(0,1fr) 42px auto; align-items:center; gap:9px; padding:12px 16px; border-top:1px solid #ffffff12; transition:background .15s,border-color .15s; }
.global-chat-form.is-dropping-image { border-top-color:#bd91ff; background:#b27cff0a; }
.global-chat-form > .chat-attachment.is-pending { grid-column:1/-1; }
.global-chat-form input { min-width:0; height:42px; padding:0 13px; border:1px solid #a27ac144; border-radius:12px; background:#100d16; color:#f5efff; font:inherit; }
.global-chat-form #global-chat-image-button { width:42px; height:42px; }
.global-chat-form .primary-btn { min-width:82px; }
.global-chat-head [data-global-call-join] { display:inline-flex; align-items:center; gap:6px; }
.global-chat-head [data-global-call-join].is-joined { border-color:#ff9aa766; color:#ffc1c6; }
.global-chat-head [data-global-call-mute] { display:inline-grid; place-items:center; min-width:34px; min-height:34px; }
.global-chat-head [data-global-call-mute][hidden] { display:none; }
.global-chat-head [data-global-call-mute].is-muted { border-color:#ff9aa766; color:#ffc1c6; }
.miwi-external-link-dialog { width:min(480px,calc(100vw - 28px)); max-width:calc(100vw - 28px); padding:24px; border:1px solid #bc91f477; border-radius:22px; background:linear-gradient(145deg,#21182b,#120f18); color:#f5efff; box-shadow:0 22px 80px #000b; }
.miwi-external-link-dialog::backdrop { background:#050408b8; backdrop-filter:blur(8px); }
.miwi-external-link-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid #bf96ff55; border-radius:14px; background:#a676ff1d; color:#d2b1ff; font-size:18px; }
.miwi-external-link-dialog .miwi-player-eyebrow { margin:15px 0 5px; color:#c9a8ff; font-size:9px; font-weight:800; letter-spacing:.16em; }
.miwi-external-link-dialog h2 { margin:0; font-size:20px; }
.miwi-external-link-address { margin:10px 0 0; padding:9px 11px; overflow-wrap:anywhere; border:1px solid #ffffff17; border-radius:10px; background:#08070b77; color:#d6c3ed; font-size:10px; }
.miwi-external-link-copy { color:#b9adca; font-size:11px; line-height:1.5; }
.miwi-external-link-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:18px; }
.miwi-external-link-actions button { min-height:38px; padding:0 12px; border:1px solid #ffffff22; border-radius:11px; background:#ffffff0a; color:#e9def5; font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.miwi-external-link-actions .primary-btn { border-color:#bd8aff; background:#b27cff; color:#160f20; }
.miwi-external-link-actions button:focus-visible { outline:2px solid #dcc3ff; outline-offset:3px; }
@media(max-width:700px) {
  .global-chat-head { align-items:flex-start; flex-wrap:wrap; }
  .global-chat-head .direct-chat-actions { width:100%; justify-content:flex-end; }
  .global-chat-form { grid-template-columns:minmax(0,1fr) 38px 42px; gap:6px; padding:10px; }
  .global-chat-form #global-chat-image-button { width:38px; height:38px; }
  .global-chat-form .primary-btn { min-width:42px; padding-inline:10px; font-size:0; }
  .global-chat-form .primary-btn i { font-size:15px; }
}
@media(max-width:480px) {
  .miwi-external-link-dialog { padding:18px; }
  .miwi-external-link-actions { display:grid; grid-template-columns:1fr; }
  .miwi-external-link-actions button { width:100%; }
}

/* Keep chat controls out of the message's normal flow so short messages do not
   reserve a blank toolbar row or stretch across the conversation. */
.direct-message { align-self:flex-start; overflow:visible; }
.direct-message.mine { align-self:flex-end; }
.direct-message-tools { position:absolute; z-index:3; top:-10px; right:5px; display:flex; gap:4px; margin:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease,visibility .12s ease; }
.direct-message:hover .direct-message-tools,.direct-message:focus-within .direct-message-tools { opacity:1; visibility:visible; pointer-events:auto; }
.direct-message-tools button { flex:none; box-shadow:0 3px 10px #0008; }
.chat-forward-choice { width:100%; min-height:48px; display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:9px; padding:6px 9px; border:1px solid #ffffff12; border-radius:11px; background:#21152e; color:#f5edff; text-align:left; cursor:pointer; }
.chat-forward-choice:hover,.chat-forward-choice:focus-visible { border-color:#c69aff88; background:#302040; }
.chat-forward-choice:disabled { opacity:.55; cursor:wait; }
.chat-forward-choice .profile-avatar { width:32px; height:32px; font-size:11px; }
.chat-forward-choice > span { min-width:0; display:grid; gap:2px; }
.chat-forward-choice strong,.chat-forward-choice small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-forward-choice strong { font-size:10px; }
.chat-forward-choice small { color:#b9a9ca; font-size:8px; }
.chat-forward-choice > i { color:#d5b7ff; font-size:13px; }
.chat-forward-popover { grid-template-rows:auto auto minmax(0,1fr); }
.chat-forward-search { width:100%; min-width:0; height:36px; box-sizing:border-box; padding:0 10px; border:1px solid #ffffff20; border-radius:10px; outline:0; background:#100c17; color:#f5edff; font:inherit; font-size:10px; }
.chat-forward-search:focus { border-color:#c69aff; }
.chat-forward-list { min-height:0; display:grid; align-content:start; gap:6px; overflow:auto; }
.chat-forward-choice[hidden] { display:none!important; }
#detailed-notifications.is-in-player { position:absolute; z-index:2147483004; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); bottom:auto; left:auto; width:min(318px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow-y:auto; overscroll-behavior:contain; }
#detailed-notifications.is-in-player .detailed-notification { min-width:0; grid-template-columns:30px minmax(0,1fr) 22px; align-items:start; overflow:hidden; }
#detailed-notifications.is-in-player .detailed-notification > div { min-width:0; overflow-wrap:anywhere; }
#detailed-notifications.is-in-player .detailed-notification p { overflow-wrap:anywhere; }
#detailed-notifications.is-in-player .detailed-notification-actions { display:flex; flex-wrap:wrap; gap:6px; }
#detailed-notifications.is-in-player .detailed-notification-actions button { min-height:30px; white-space:normal; overflow-wrap:anywhere; }

/* The reply glyph in the loaded UIcons release is named undo-alt; the old
   fi-rr-reply class has no glyph mapping and left an empty action button. */
.direct-message-tools [data-reply-message] > i,
.direct-message-tools [data-miwi-reply] > i { display:inline-flex; width:13px; height:13px; flex:none; font-size:12px; line-height:1; }

/* Library list view: keep the same artwork and controls as grid cards, but
   arrange them as the compact, full-width rows shown in the reference. */
.library-page .library-grid.is-list { grid-template-columns:minmax(0,1fr); gap:8px; }
.library-page .library-grid.is-list .game-card { min-width:0; min-height:88px; display:grid; grid-template-columns:minmax(190px,34%) minmax(0,1fr); align-items:stretch; border-radius:16px; }
.library-page .library-grid.is-list .game-card-media-wrap { min-width:0; min-height:88px; }
.library-page .library-grid.is-list .game-card-media { height:100%; min-height:88px; grid-template-columns:minmax(74px,30%) minmax(0,70%); border-right:1px solid rgba(255,255,255,.055); border-bottom:0; }
.library-page .library-grid.is-list .game-card-media .game-shot-carousel { height:100%; min-height:88px; }
.library-page .library-grid.is-list .game-card-media .game-cover-panel { left:7px; bottom:6px; width:52px; height:74px; border-radius:9px; }
.library-page .library-grid.is-list .game-card-media .game-shot-dots { right:7px; bottom:6px; }
.library-page .library-grid.is-list .game-card-body { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.76fr); grid-template-rows:auto auto minmax(0,1fr); align-content:center; align-items:center; column-gap:18px; row-gap:2px; padding:8px 15px; }
.library-page .library-grid.is-list .game-card-line { min-width:0; grid-column:1; grid-row:1; }
.library-page .library-grid.is-list .game-card h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.library-page .library-grid.is-list .game-meta { min-width:0; grid-column:1; grid-row:2; margin-top:0; font-size:8px; }
.library-page .library-grid.is-list .game-tag-row { min-width:0; max-height:20px; grid-column:1; grid-row:3; align-self:end; margin:2px 0 0; overflow:hidden; flex-wrap:nowrap; }
.library-page .library-grid.is-list .game-tag { flex:none; min-height:17px; padding:0 6px; font-size:6px; }
.library-page .library-grid.is-list .game-card-foot { min-width:0; grid-column:2; grid-row:1 / 4; align-self:stretch; margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.library-page .library-grid.is-list .nana-cost,.library-page .library-grid.is-list .miwibits-local-label { flex:none; white-space:nowrap; font-size:9px; }
.library-page .library-grid.is-list .card-play { min-width:82px; height:37px; padding-inline:12px; border-radius:12px; }
.library-page .library-grid.is-list > .game-card > .card-favorite { top:50%; right:108px; width:34px; height:34px; transform:translateY(-50%); border-radius:10px; }

@media(max-width:760px) {
  .library-page .library-grid.is-list .game-card { grid-template-columns:minmax(96px,31%) minmax(0,1fr); min-height:122px; }
  .library-page .library-grid.is-list .game-card-media-wrap { min-height:122px; }
  .library-page .library-grid.is-list .game-card-media,.library-page .library-grid.is-list .game-card-media .game-shot-carousel { min-height:122px; }
  .library-page .library-grid.is-list .game-card-media .game-cover-panel { width:45px; height:64px; }
  .library-page .library-grid.is-list .game-card-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(18px,auto) auto; row-gap:3px; padding:8px 10px; }
  .library-page .library-grid.is-list .game-card-line { grid-column:1; grid-row:1; }
  .library-page .library-grid.is-list .game-meta { grid-column:1; grid-row:2; }
  .library-page .library-grid.is-list .game-tag-row { grid-column:1; grid-row:3; align-self:center; }
  .library-page .library-grid.is-list .game-card-foot { grid-column:1; grid-row:4; align-self:center; min-height:34px; padding-right:45px; }
  .library-page .library-grid.is-list > .game-card > .card-favorite { top:auto; right:91px; bottom:12px; width:29px; height:29px; transform:none; }
  .library-page .library-grid.is-list .card-play { min-width:69px; height:31px; padding-inline:9px; }
}

@media(max-width:420px) {
  .library-page .library-grid.is-list .game-card { grid-template-columns:minmax(82px,29%) minmax(0,1fr); min-height:116px; }
  .library-page .library-grid.is-list .game-card-media-wrap { min-height:116px; }
  .library-page .library-grid.is-list .game-card-media,.library-page .library-grid.is-list .game-card-media .game-shot-carousel { min-height:116px; }
  .library-page .library-grid.is-list .game-card-body { padding-inline:7px; }
  .library-page .library-grid.is-list .game-card h3 { font-size:10px; }
  .library-page .library-grid.is-list .game-meta { font-size:7px; }
  .library-page .library-grid.is-list .game-tag { max-width:90px; overflow:hidden; text-overflow:ellipsis; }
  .library-page .library-grid.is-list .miwibits-local-label { max-width:calc(100% - 78px); overflow:hidden; text-overflow:ellipsis; }
}

@media(max-width:760px) {
  #main-content:has(.library-page) { padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
}

/* Cloud game detail reference layout: artwork-led hero followed by a focused
   gallery/launch row, full-width description, and library recommendations. */
#app-shell:has(.cloud-game-detail) { --sidebar-w:90px; --topbar-h:76px; }
#main-content:has(.cloud-game-detail) { padding:38px 18px 48px; }
.cloud-game-detail { gap:10px; }
.cloud-game-detail .game-page-hero {
  height:min(820px,calc(100svh - var(--topbar-h) - 73px));
  min-height:690px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(192,151,255,.23);
  border-radius:28px;
  background:#110d1b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 25px 68px rgba(21,8,38,.34);
}
.cloud-game-detail .game-page-backdrop { object-position:center 43%; }
.cloud-game-detail .game-page-hero-shade {
  background:linear-gradient(90deg,rgba(12,8,24,.94) 0%,rgba(12,8,24,.78) 39%,rgba(12,8,24,.23) 73%,rgba(12,8,24,.37) 100%),linear-gradient(0deg,rgba(11,7,22,.82),transparent 48%),linear-gradient(rgba(10,6,20,.19),rgba(10,6,20,.19));
}
.cloud-game-detail .game-page-topbar {
  position:absolute;
  z-index:5;
  top:26px;
  left:30px;
  right:30px;
  min-height:48px;
  pointer-events:none;
}
.cloud-game-detail .game-page-topbar > * { pointer-events:auto; }
.cloud-game-detail .game-page-topbar .game-back-btn,
.cloud-game-detail .game-page-topbar .game-page-favorite {
  min-height:48px;
  padding:0 17px;
  border:1px solid rgba(219,196,255,.25);
  border-radius:14px;
  background:rgba(19,13,32,.72);
  color:#f5efff;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
.cloud-game-detail .game-page-topbar .game-back-btn:hover,
.cloud-game-detail .game-page-topbar .game-page-favorite:hover,
.cloud-game-detail .game-page-topbar .game-page-favorite.active {
  border-color:rgba(192,145,255,.62);
  background:rgba(49,29,74,.78);
  color:#e6d3ff;
}
.cloud-game-detail .game-page-hero-layout {
  min-height:0;
  height:auto;
  flex:1 1 auto;
  padding:112px 34px 66px;
  grid-template-columns:minmax(0,1fr) clamp(250px,18vw,292px);
  align-items:end;
  gap:clamp(26px,4vw,68px);
}
.cloud-game-detail .game-page-copy { max-width:900px; }
.cloud-game-detail .game-page-status { color:#ded2f0; }
.cloud-game-detail .game-page-copy h1 {
  max-width:850px;
  margin:16px 0 18px;
  color:#fbf8ff;
  font-size:clamp(58px,6vw,90px);
  line-height:.95;
  letter-spacing:-5px;
  text-shadow:0 2px 28px rgba(194,145,255,.2);
}
.cloud-game-detail .game-page-tags { max-height:none; overflow:visible; }
.cloud-game-detail .game-page-tags > span { min-height:39px; padding:0 12px; border-radius:12px; background:rgba(16,11,28,.62); border-color:rgba(223,203,255,.2); font-size:9px; }
.cloud-game-detail .game-page-lede {
  max-width:670px!important;
  margin-top:17px;
  color:rgba(250,246,255,.79)!important;
  font-size:14px;
  line-height:1.62;
  -webkit-line-clamp:3;
  line-clamp:3;
}
.cloud-game-detail .game-page-actions { margin-top:20px; gap:9px; }
.cloud-game-detail .game-page-play,
.cloud-game-detail .game-page-secondary { min-height:63px; padding-inline:22px; border-radius:16px; font-size:10px; }
.cloud-game-detail .game-page-play { padding-inline:25px; font-size:11px; }
.cloud-game-detail .game-page-play {
  border:1px solid rgba(232,211,255,.52);
  background:linear-gradient(112deg,#e59cff 0%,#bd7cff 58%,#8f58f5 100%);
  color:#210f38;
  box-shadow:0 8px 28px rgba(161,95,255,.38),inset 0 1px rgba(255,255,255,.5);
}
.cloud-game-detail .game-page-play:hover { filter:brightness(1.08); transform:translateY(-1px); }
.cloud-game-detail .game-page-secondary {
  border-color:rgba(202,167,255,.36);
  background:rgba(22,14,36,.58);
  color:#f2eaff;
  backdrop-filter:blur(12px);
}
.cloud-game-detail .game-page-secondary:hover { border-color:rgba(203,160,255,.72); background:rgba(75,45,108,.56); }
.cloud-game-detail .game-play-card .game-page-browser-play {
  width:calc(100% - 32px);
  min-height:50px;
  margin:0 16px 7px;
  border-radius:13px;
  font-size:10px;
}
.cloud-game-detail .game-page-browser-play i { color:#d4b5ff; }
.cloud-game-detail .game-page-report-action { border-color:rgba(255,145,167,.27); background:rgba(53,22,39,.38); color:#ffdbe4; }
.cloud-game-detail .game-page-hero-card {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:19px;
  padding:20px 10px 35px;
  border-color:rgba(218,184,255,.48);
  border-radius:25px;
  background:rgba(16,10,28,.81);
  box-shadow:0 18px 42px rgba(0,0,0,.38),0 0 25px rgba(171,105,255,.26);
  backdrop-filter:blur(18px);
}
.cloud-game-detail .game-page-hero-cover { max-height:340px; aspect-ratio:4/5; border-radius:18px; }
.cloud-game-detail .game-page-hero-facts { min-height:50px; align-items:center; padding:0 5px; gap:8px; }
.cloud-game-detail .game-page-hero-facts span { color:#a99bb9; font-size:8px; }
.cloud-game-detail .game-page-hero-facts strong { color:#fbf8ff; font-size:12px; }
.cloud-game-detail .game-page-security {
  z-index:3;
  right:34px;
  bottom:115px;
  left:34px;
  gap:19px;
  color:rgba(239,228,255,.7);
  font-size:9px;
}
.cloud-game-detail .game-page-security span { gap:6px; }
.cloud-game-detail .game-page-security i { color:#c39aff; font-size:12px; }
.cloud-game-detail .game-overview-summary {
  min-height:92px;
  position:relative;
  z-index:3;
  flex:0 0 auto;
  margin:0 10px 10px;
  border-color:rgba(205,173,255,.24);
  border-radius:18px;
  background:linear-gradient(105deg,rgba(23,16,39,.94),rgba(19,15,33,.91));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 25px rgba(0,0,0,.15);
  backdrop-filter:blur(16px);
}
.cloud-game-detail .game-overview-summary > div { min-height:90px; padding:15px 24px; }
.cloud-game-detail .game-overview-summary span { display:flex; align-items:center; gap:10px; color:#b0a5bd; font-size:9px; }
.cloud-game-detail .game-overview-summary span > i { color:#c591ff; font-size:18px; }
.cloud-game-detail .game-overview-summary span .nana-token-tiny { width:20px; height:20px; }
.cloud-game-detail .game-overview-summary strong { margin-top:0; color:#f8f3ff; font-size:17px; }

.cloud-game-detail .game-page-content[data-cloud-game-shell] { display:block; }
.cloud-game-detail .game-page-side { position:static; top:auto; align-self:start; }
.cloud-game-detail main[data-cloud-game-layout] {
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,366px);
  gap:12px 22px;
  align-items:start;
}
.cloud-game-detail .game-overview-gallery {
  grid-column:1;
  min-width:0;
  border-color:rgba(190,150,255,.22);
  border-radius:22px;
  background:linear-gradient(145deg,#1c1429,#15101f);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
.cloud-game-detail .game-overview-gallery-head {
  min-height:62px;
  padding:10px 20px;
  border-bottom-color:rgba(204,176,255,.12);
}
.cloud-game-detail .game-overview-gallery-head .home-kicker,
.cloud-game-detail .game-overview-about-head .home-kicker,
.cloud-game-detail .game-play-card-head .home-kicker,
.cloud-game-detail .game-related-shelf .home-kicker { color:#c59bff; }
.cloud-game-detail .game-overview-gallery-head h2,
.cloud-game-detail .game-overview-about-head h2,
.cloud-game-detail .game-related-shelf h2 { color:#f6f1ff; }
.cloud-game-detail .game-overview-gallery-count {
  min-height:36px;
  border-color:rgba(194,150,255,.24);
  background:rgba(159,102,232,.1);
  color:#e4d5f9;
  font-size:9px;
}
.cloud-game-detail .game-overview-gallery-count i { color:#c59aff; font-size:13px; }
.cloud-game-detail .game-overview-gallery-stage {
  height:auto;
  min-height:0;
  max-height:680px;
  aspect-ratio:16/9;
  background:#100c18;
}
.cloud-game-detail .game-overview-gallery-stage > img.game-overview-gallery-image { object-fit:contain; object-position:center; }
.cloud-game-detail .game-overview-gallery-poster {
  width:clamp(96px,8.2vw,138px);
  border-color:rgba(230,210,255,.46);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(181,130,255,.18),0 12px 30px rgba(0,0,0,.4);
}
.cloud-game-detail .game-overview-gallery-step {
  width:44px;
  height:44px;
  position:absolute;
  z-index:2;
  top:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(226,202,255,.32);
  border-radius:50%;
  background:rgba(28,17,46,.72);
  color:#f7f1ff;
  cursor:pointer;
  transform:translateY(-50%);
  backdrop-filter:blur(10px);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.cloud-game-detail .game-overview-gallery-step.is-previous { left:14px; }
.cloud-game-detail .game-overview-gallery-step.is-next { right:14px; }
.cloud-game-detail .game-overview-gallery-step:hover { border-color:#c79bff; background:rgba(112,66,164,.78); transform:translateY(-50%) scale(1.05); }
.cloud-game-detail .game-overview-gallery-thumbs { gap:9px; padding:10px 12px 12px; scrollbar-color:rgba(181,130,255,.55) transparent; }
.cloud-game-detail .game-overview-gallery-thumb { width:clamp(92px,8vw,130px); min-width:clamp(92px,8vw,130px); height:64px; aspect-ratio:auto; border-color:rgba(255,255,255,.08); border-radius:10px; }
.cloud-game-detail .game-overview-gallery-thumb.active { border-color:#bd88ff; box-shadow:0 0 0 1px rgba(189,136,255,.3),0 0 15px rgba(160,100,245,.25); }
.cloud-game-detail .game-overview-gallery-thumb:focus-visible { outline-color:#d9baff; }
.cloud-game-detail [data-cloud-game-play] { grid-column:2; grid-row:1; display:block; min-width:0; }
.cloud-game-detail .game-play-card {
  border-color:rgba(193,151,255,.22);
  border-radius:22px;
  background:radial-gradient(circle at 100% 0,rgba(171,109,255,.1),transparent 45%),linear-gradient(145deg,#1d152b,#17111f);
  box-shadow:0 14px 38px rgba(0,0,0,.19);
}
.cloud-game-detail .game-play-card-head { min-height:102px; padding:19px 20px 17px; border-bottom-color:rgba(204,176,255,.12); }
.cloud-game-detail .game-play-card-head h2 { color:#f7f2ff; font-size:24px; }
.cloud-game-detail .game-play-rate { border-color:rgba(193,151,255,.22); background:rgba(162,103,235,.09); }
.cloud-game-detail .game-play-rate span { color:#b7a9c5; }
.cloud-game-detail .game-play-rate strong { color:#f7f1ff; font-size:24px; }
.cloud-game-detail .game-play-rate strong small { color:#c9bad9; font-size:9px; }
.cloud-game-detail .game-play-details dt,.cloud-game-detail .game-play-details dd { font-size:9px; }
.cloud-game-detail .game-play-card .game-page-play.wide { min-height:58px; font-size:11px; }
.cloud-game-detail .game-play-report { min-height:38px; color:#b5a8c4; font-size:9px; }
.cloud-game-detail .game-play-report i { color:#c496ff; }
.cloud-game-detail .game-play-report:hover { color:#f1e8ff; }
.cloud-game-detail .game-overview-about[data-cloud-game-about],
.cloud-game-detail .game-expansions { grid-column:1/-1; }
.cloud-game-detail .game-overview-about {
  border-color:rgba(190,150,255,.2);
  border-radius:22px;
  background:radial-gradient(100% 140% at 100% 0,rgba(150,91,222,.09),transparent 55%),linear-gradient(135deg,#1c1428,#17111f);
}
.cloud-game-detail .game-overview-about-head .home-kicker { font-size:8px; }
.cloud-game-detail .game-overview-about-head { padding:18px 23px 0; }
.cloud-game-detail .game-overview-about-copy { padding:10px 23px 16px; }
.cloud-game-detail .game-overview-about-copy > p { max-width:980px; color:#d9d0e4; font-size:13px; line-height:1.55; }
.cloud-game-detail .game-overview-tag-list { margin-top:13px; }
.cloud-game-detail .game-overview-tag-list .game-tag { min-height:18px; padding:0 6px; border-radius:7px; font-size:6.5px; }
.cloud-game-detail.miwibits-game-page .miwibits-resource-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:9px 16px 2px;
}
.cloud-game-detail.miwibits-game-page .miwibits-resource-link {
  min-height:40px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px;
  border:1px solid rgba(202,175,237,.2);
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:#ddd1ee;
  text-align:center;
  text-decoration:none;
  font-size:9px;
  font-weight:750;
  line-height:1.2;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.cloud-game-detail.miwibits-game-page .miwibits-resource-link:hover,
.cloud-game-detail.miwibits-game-page .miwibits-resource-link:focus-visible {
  border-color:rgba(202,175,237,.45);
  background:rgba(202,175,237,.1);
  color:#fff;
}
.cloud-game-detail.miwibits-game-page .miwibits-resource-link i { flex:none; font-size:12px; color:#caa6f5; }
.cloud-game-detail.miwibits-game-page .miwibits-resource-link span { min-width:0; }
.cloud-game-detail.miwibits-game-page .miwibits-offline-status { margin-inline:16px; }
.cloud-game-detail.miwibits-game-page .miwibits-facts-card {
  display:block;
  overflow:hidden;
  margin-top:12px;
  padding:0;
  border-color:rgba(193,151,255,.2);
  border-radius:21px;
  background:#1b1524;
}
.cloud-game-detail.miwibits-game-page .miwibits-facts-head {
  padding:17px 17px 14px;
  border-bottom:1px solid rgba(202,175,237,.11);
}
.cloud-game-detail.miwibits-game-page .miwibits-facts-head .home-kicker { color:#c79af5; font-size:8px; }
.cloud-game-detail.miwibits-game-page .miwibits-facts-head h2 { margin:5px 0 0; color:#f7f1ff; font-size:18px; letter-spacing:-.02em; }
.cloud-game-detail.miwibits-game-page .miwibits-facts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; }
.cloud-game-detail.miwibits-game-page .miwibits-fact {
  min-height:67px;
  gap:8px;
  padding:10px;
  border:1px solid rgba(202,175,237,.12);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.cloud-game-detail.miwibits-game-page .miwibits-fact.is-wide { grid-column:1/-1; }
.cloud-game-detail.miwibits-game-page .miwibits-fact > i { width:30px; height:30px; border-radius:9px; background:rgba(164,108,228,.11); color:#c89dff; font-size:13px; }
.cloud-game-detail.miwibits-game-page .miwibits-fact small { color:#a99ab9; font-size:8px; }
.cloud-game-detail.miwibits-game-page .miwibits-fact strong { color:#f4ebff; font-size:10px; line-height:1.3; }
@media(max-width:420px) {
  .cloud-game-detail.miwibits-game-page .miwibits-facts-grid { grid-template-columns:1fr; }
}
.cloud-game-detail .game-related-shelf { gap:13px; padding-top:3px; }
.cloud-game-detail .game-related-shelf .home-kicker { font-size:9px; }
.cloud-game-detail .game-related-open { color:#d2b3ff; }
.cloud-game-detail .game-related-tile { height:112px; position:relative; border-color:rgba(191,151,255,.2); border-radius:16px; background:#191220; }
.cloud-game-detail .game-related-tile:hover { border-color:rgba(196,151,255,.48); background:#21172c; }
.cloud-game-detail .game-related-art { min-height:0; position:absolute; inset:0; }
.cloud-game-detail .game-related-art::after { inset:25% 0 0; background:linear-gradient(180deg,transparent,rgba(7,5,12,.85)); }
.cloud-game-detail .game-related-copy { position:absolute; z-index:1; right:0; bottom:0; left:0; gap:4px; padding:34px 12px 11px; }
.cloud-game-detail .game-related-copy strong { font-size:11px; }
.cloud-game-detail .game-related-copy small { color:#d0c5dc; font-size:8px; }
.cloud-game-detail .game-related-open { display:none; }

@media(max-width:1180px) {
  #main-content:has(.cloud-game-detail) { padding-inline:16px; }
  .cloud-game-detail .game-page-hero { height:auto; min-height:720px; }
  .cloud-game-detail .game-page-hero-layout { min-height:610px; grid-template-columns:minmax(0,1fr) 220px; padding:108px 26px 66px; gap:26px; }
  .cloud-game-detail .game-page-hero-card { width:220px; gap:16px; padding:16px 9px 24px; }
  .cloud-game-detail main[data-cloud-game-layout] { grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:16px; }
  .cloud-game-detail .game-overview-gallery-stage { height:auto; min-height:0; max-height:680px; aspect-ratio:16/9; }
}
@media(max-width:760px) {
  #main-content:has(.cloud-game-detail) { padding:18px 12px calc(112px + env(safe-area-inset-bottom)); }
  .cloud-game-detail .game-page-hero { height:auto; min-height:0; border-radius:21px; }
  .cloud-game-detail .game-page-topbar { top:13px; left:13px; right:13px; min-height:40px; }
  .cloud-game-detail .game-page-topbar .game-back-btn,
  .cloud-game-detail .game-page-topbar .game-page-favorite { min-height:40px; padding-inline:12px; border-radius:12px; font-size:8px; }
  .cloud-game-detail .game-page-hero-layout { min-height:0; display:block; padding:86px 17px 145px; }
  .cloud-game-detail .game-page-copy { max-width:none; }
  .cloud-game-detail .game-page-copy h1 { margin:13px 0 15px; font-size:clamp(39px,10vw,68px); letter-spacing:-2.5px; }
  .cloud-game-detail .game-page-tags { max-height:100px; }
  .cloud-game-detail .game-page-tags > span { min-height:27px; padding-inline:8px; font-size:7px; }
  .cloud-game-detail .game-page-lede { margin-top:13px; font-size:10px; }
  .cloud-game-detail .game-page-actions { gap:7px; }
  .cloud-game-detail .game-page-play,.cloud-game-detail .game-page-secondary { min-height:43px; padding-inline:12px; border-radius:12px; font-size:8px; }
  .cloud-game-detail .game-page-hero-card { display:none; }
  .cloud-game-detail .game-page-security { right:14px; bottom:114px; left:17px; gap:8px 13px; font-size:7px; }
  .cloud-game-detail .game-overview-summary { min-height:0; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 7px 7px; border-radius:15px; }
  .cloud-game-detail .game-overview-summary > div { min-height:68px; padding:10px 12px; border-left:0; }
  .cloud-game-detail .game-overview-summary > div:nth-child(even) { border-left:1px solid rgba(255,255,255,.08); }
  .cloud-game-detail .game-overview-summary > div:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.08); }
  .cloud-game-detail .game-overview-summary span { gap:6px; font-size:6.5px; }
  .cloud-game-detail .game-overview-summary span > i { font-size:13px; }
  .cloud-game-detail .game-overview-summary strong { font-size:10px; }
  .cloud-game-detail main[data-cloud-game-layout] { grid-template-columns:minmax(0,1fr); gap:14px; }
  .cloud-game-detail .game-overview-gallery,
  .cloud-game-detail [data-cloud-game-play],
  .cloud-game-detail .game-overview-about[data-cloud-game-about],
  .cloud-game-detail .game-expansions { grid-column:1; grid-row:auto; }
  .cloud-game-detail .game-overview-gallery-head { min-height:60px; padding:10px 13px; }
  .cloud-game-detail .game-overview-gallery-head h2 { font-size:17px; }
  .cloud-game-detail .game-overview-gallery-stage { height:auto; min-height:0; aspect-ratio:16/9; }
  .cloud-game-detail .game-overview-gallery-poster { width:74px; left:10px; bottom:10px; }
  .cloud-game-detail .game-overview-gallery-step { width:35px; height:35px; }
  .cloud-game-detail .game-overview-gallery-step.is-previous { left:8px; }
  .cloud-game-detail .game-overview-gallery-step.is-next { right:8px; }
  .cloud-game-detail .game-overview-gallery-stage figcaption { right:8px; bottom:8px; min-height:24px; font-size:6px; }
  .cloud-game-detail .game-overview-gallery-thumbs { gap:7px; padding:8px; }
  .cloud-game-detail .game-overview-gallery-thumb { width:92px; min-width:92px; height:52px; }
  .cloud-game-detail .game-play-card-head { min-height:74px; padding:13px 14px; }
  .cloud-game-detail .game-play-card-head h2 { font-size:18px; }
  .cloud-game-detail .game-play-rate { margin:12px 12px 0; }
  .cloud-game-detail .game-play-details { margin-inline:12px; }
  .cloud-game-detail .game-play-card .game-page-play.wide { width:calc(100% - 24px); margin-inline:12px; }
  .cloud-game-detail .game-play-card .game-page-browser-play { width:calc(100% - 24px); margin-inline:12px; }
  .cloud-game-detail .game-play-report { margin-left:12px; }
  .cloud-game-detail .game-overview-about-head { padding:17px 16px 0; }
  .cloud-game-detail .game-overview-about-copy { padding:10px 16px 15px; }
  .cloud-game-detail .game-overview-about-head h2 { font-size:18px; }
  .cloud-game-detail .game-overview-about-copy > p { font-size:10px; }
  .cloud-game-detail .game-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .cloud-game-detail .game-related-art { min-height:95px; }
}
@media(max-width:420px) {
  .cloud-game-detail .game-page-hero-layout { padding-inline:13px; }
  .cloud-game-detail .game-page-copy h1 { font-size:39px; }
  .cloud-game-detail .game-page-security { left:13px; right:12px; font-size:6.5px; }
  .cloud-game-detail .game-overview-summary > div { padding-inline:9px; }
  .cloud-game-detail .game-overview-summary strong { font-size:9px; }
  .cloud-game-detail .game-related-copy { padding-inline:8px; }
  .cloud-game-detail .game-related-copy strong { font-size:8px; }
}

/* Keep Home's All Games controls compact, but share the same single-layer
   tag/sort menus and selection cards used by the Library toolbar. */
.home-library-tools .home-library-filter-dropdown { width:100px; flex:0 0 100px; }
.home-library-tools .home-library-sort-dropdown { width:154px; flex:0 0 154px; }
.home-library-tools .library-dropdown-trigger {
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  border-radius:12px;
  font-size:9px;
}
.home-library-tools .library-dropdown-trigger > i:first-child { color:#c08cff; }
.home-library-tools .library-dropdown-trigger > .library-dropdown-chevron { margin-left:auto; color:#a99bb8; font-size:13px; }
.home-library-tools .home-filter-count {
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#b582ff;
  color:#1c1028;
  font-size:8px;
  font-weight:900;
}
.home-library-tools .home-filter-count[hidden] { display:none; }
.home-library-tools .home-library-filter-menu { width:min(640px,calc(100vw - 32px)); }
.home-library-tools .home-library-sort-menu { width:min(296px,calc(100vw - 32px)); }
.home-library-tools .home-library-filter-menu .library-tag-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-library-filter-button:focus-visible,.home-library-sort:focus-visible { outline:2px solid #d6b7ff; outline-offset:2px; }
@media(max-width:900px) {
  .home-library-tools .home-library-filter-menu .library-tag-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .home-library-tools .home-library-filter-dropdown { flex:0 0 98px; width:98px; }
  .home-library-tools .home-library-sort-dropdown { flex:1 1 142px; width:auto; min-width:142px; }
  .home-library-tools .home-library-filter-menu { left:0; right:auto; width:min(620px,calc(100vw - 28px)); }
  .home-library-tools .home-library-sort-menu { left:0; right:auto; width:min(296px,calc(100vw - 28px)); }
  .home-library-tools .library-dropdown-trigger { height:38px; min-height:38px; padding-inline:9px; font-size:8px; }
}
@media(max-width:420px) {
  .home-library-tools .home-library-filter-dropdown { flex-basis:92px; width:92px; }
  .home-library-tools .home-library-sort-dropdown { flex-basis:138px; min-width:138px; }
}

/* Inbox, history, and settings refresh */
.notification-inbox {
  top:calc(var(--topbar-h,76px) + 12px);
  right:clamp(16px,calc((100vw - 1000px)/2),224px);
  width:min(950px,calc(100vw - 32px));
  max-height:min(910px,calc(100dvh - var(--topbar-h,76px) - 24px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  border-radius:30px;
  border-color:rgba(181,130,255,.48);
  background:linear-gradient(145deg,rgba(25,25,35,.985),rgba(17,18,26,.985));
  box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 60px rgba(133,83,229,.09);
}
.notification-inbox.hidden { display:none; }
.notification-inbox-head { min-height:126px; padding:24px 30px 20px; align-items:center; gap:22px; }
.notification-inbox-head > div:first-child { align-content:center; gap:6px; }
.notification-inbox-head > div:first-child > span { color:#c48aff; font-size:11px; letter-spacing:3px; }
.notification-inbox-head strong { font-size:30px; line-height:1.05; letter-spacing:-1px; }
.notification-inbox-head small { color:#a6a7bd; font-size:14px; }
.notification-inbox-head-actions { display:flex; align-items:center; gap:14px; }
.notification-inbox-head > .notification-inbox-head-actions { display:flex; flex:0 0 auto; align-items:center; gap:14px; }
.notification-inbox-head-actions button { min-height:56px; padding:0 22px; border-radius:16px; font-size:13px; }
.notification-inbox-head-actions #notification-read-all { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,#382252,#24172f); border-color:#9b5cf2; color:#f6edff; white-space:nowrap; }
.notification-inbox-head-actions #notification-read-all:disabled { opacity:.45; cursor:default; }
.notification-inbox-head-actions #browser-notification-toggle { min-width:245px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:#1b1b27; border-color:rgba(181,130,255,.32); color:#eee7fb; }
.notification-switch span { width:42px; height:24px; position:relative; flex:0 0 42px; border-radius:99px; background:#494151; }
.notification-switch span::after { content:""; width:18px; height:18px; position:absolute; top:3px; left:3px; border-radius:50%; background:#fff; transition:transform .18s ease; }
.notification-switch[aria-checked="true"] span { background:#9f55ed; }
.notification-switch[aria-checked="true"] span::after { transform:translateX(18px); }
.notification-inbox-toolbar { min-height:78px; padding:0 30px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.075); }
.notification-inbox-tabs { height:100%; padding:0; align-items:stretch; gap:30px; border:0; }
.notification-inbox-tabs button { min-height:100%; position:relative; padding:0 10px; color:#c5c4d4; font-size:16px; }
.notification-inbox-tabs button.active { color:#fff; border:0; }
.notification-inbox-tabs button.active::after { content:""; width:72px; height:4px; position:absolute; left:50%; bottom:0; transform:translateX(-50%); border-radius:9px 9px 0 0; background:#b582ff; box-shadow:0 0 18px rgba(181,130,255,.5); }
.notification-inbox-tabs span { min-width:22px; height:22px; margin-left:8px; background:#45256f; color:#f4e9ff; font-size:11px; }
.notification-inbox-tools { display:flex; align-items:center; gap:12px; }
.notification-tool-button { width:56px; height:56px; display:grid; place-items:center; border:1px solid rgba(181,130,255,.34); border-radius:16px; background:#1b1b27; color:#d4b7ff; cursor:pointer; font-size:19px; }
.notification-search { height:48px; padding:0 13px; display:flex; align-items:center; gap:9px; border:1px solid rgba(181,130,255,.3); border-radius:14px; background:#15151e; color:#c995ff; }
.notification-search[hidden] { display:none; }
.notification-search input { width:180px; border:0; outline:0; background:transparent; color:#f7f4ff; font:inherit; font-size:12px; }
.notification-kind-filter { position:relative; }
.notification-type-menu { width:190px; position:absolute; z-index:3; top:calc(100% + 8px); right:0; padding:9px; display:grid; gap:4px; border:1px solid rgba(181,130,255,.32); border-radius:14px; background:#191722; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.notification-type-menu[hidden] { display:none; }
.notification-type-menu strong { padding:5px 8px; color:#a7a3b7; font-size:10px; }
.notification-type-menu button { min-height:34px; padding:0 9px; border:0; border-radius:8px; background:transparent; color:#eee8fa; text-align:left; font:inherit; font-size:11px; cursor:pointer; }
.notification-type-menu button[aria-pressed="true"],.notification-type-menu button:hover { background:rgba(181,130,255,.16); color:#d9baff; }
.notification-list { min-height:0; max-height:none; padding:16px 24px 22px; display:grid; align-content:start; gap:12px; }
.notification-item { min-height:116px; padding:16px 20px 16px 24px; position:relative; overflow:hidden; grid-template-columns:76px minmax(0,1fr) 22px; align-items:center; gap:20px; border:1px solid rgba(255,255,255,.055); border-radius:22px; background:rgba(255,255,255,.022); }
.notification-item:hover { background:rgba(255,255,255,.05); border-color:rgba(181,130,255,.22); }
.notification-item.unread { background:linear-gradient(100deg,rgba(119,62,183,.22),rgba(97,73,138,.12) 55%,rgba(255,255,255,.025)); border-color:rgba(181,130,255,.4); }
.notification-item.unread::before { content:""; width:5px; position:absolute; inset:0 auto 0 0; border-radius:5px; background:linear-gradient(180deg,#d3a6ff,#8a4be0); box-shadow:0 0 20px rgba(181,130,255,.42); }
.notification-item[data-kind="game"].unread::before,.notification-item[data-kind="game_invite"].unread::before,.notification-item[data-kind="session"].unread::before,.notification-item[data-kind="play"].unread::before,.notification-item[data-kind="controller"].unread::before { background:linear-gradient(180deg,#72e5bd,#40b995); box-shadow:0 0 18px rgba(69,207,164,.35); }
.notification-item-icon { width:76px; height:76px; display:grid; place-items:center; border-radius:50%; background:#202b39; color:#78d5ff; font-size:27px; }
.notification-item[data-kind="game"] .notification-item-icon,.notification-item[data-kind="game_invite"] .notification-item-icon,.notification-item[data-kind="session"] .notification-item-icon,.notification-item[data-kind="play"] .notification-item-icon,.notification-item[data-kind="controller"] .notification-item-icon { background:#1b342f; color:#78e2ba; }
.notification-item[data-kind="image"] .notification-item-icon { background:#30213e; color:#ca8aff; }
.notification-item-copy { gap:7px; }
.notification-item-copy strong { color:#f5f2fb; font-size:19px; letter-spacing:-.3px; }
.notification-item-copy > span { overflow:hidden; color:#aaa9c1; font-size:16px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.notification-item-copy small { color:#87879e; font-size:13px; }
.notification-arrow { color:#ddd5ed; font-size:24px; }
.notification-unread-mark { display:none !important; }
.notification-empty { min-height:300px; color:#eee9f8; }
.notification-empty span { max-width:460px; font-size:13px; }

.history-page-v2 { gap:18px; }
.history-dashboard-head { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); align-items:end; gap:24px; }
.history-page-v2 .history-heading h1 { margin:5px 0 7px; font-size:clamp(40px,4vw,58px); line-height:1; letter-spacing:-2.7px; }
.history-page-v2 .history-heading p { max-width:650px; color:#a9a9ba; font-size:13px; line-height:1.45; }
.history-activity-chart { min-height:120px; padding:13px 18px 10px; display:grid; grid-template-rows:auto 1fr; border:1px solid rgba(181,130,255,.16); border-radius:21px; background:linear-gradient(135deg,rgba(32,26,47,.94),rgba(19,19,28,.96)); }
.history-chart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#c1bdce; font-size:12px; }
.history-chart-ranges { display:flex; gap:3px; padding:3px; border:1px solid rgba(255,255,255,.07); border-radius:99px; background:rgba(0,0,0,.2); }
.history-chart-ranges button { min-width:50px; height:25px; border:0; border-radius:99px; background:transparent; color:#9a96aa; font-size:10px; cursor:pointer; }
.history-chart-ranges button.active { background:#613a96; color:#fff; }
.history-chart-bars { min-height:64px; padding-top:8px; display:grid; grid-template-columns:repeat(var(--history-chart-count,7),minmax(0,1fr)); align-items:end; gap:10px; }
.history-chart-column { height:100%; display:grid; grid-template-rows:minmax(0,1fr) 14px; justify-items:center; align-items:end; gap:4px; }
.history-chart-bar { width:min(10px,55%); height:var(--history-bar-height); align-self:end; border-radius:99px; background:rgba(181,130,255,.15); }
.history-chart-bar.has-activity { background:linear-gradient(180deg,#d1a2ff,#9456e8); box-shadow:0 0 12px rgba(181,130,255,.2); }
.history-chart-column small { color:#9692a4; font-size:8px; white-space:nowrap; }
.history-summary { gap:12px; }
.history-summary article { min-height:112px; padding:17px 20px; border-color:rgba(181,130,255,.15); background:linear-gradient(145deg,#191822,#15141d); }
.history-summary-icon { width:58px; height:58px; flex-basis:58px; border-radius:18px; background:linear-gradient(145deg,rgba(181,130,255,.18),rgba(112,67,162,.15)); color:#bd83ff; }
.history-summary small { color:#a8a5b6; font-size:11px; }
.history-summary strong { font-size:26px; }
.history-filter-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.history-search { height:48px; min-width:260px; flex:1 1 290px; padding:0 14px; display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:#191820; color:#aaa1bc; }
.history-search input { width:100%; border:0; outline:0; background:transparent; color:#f5f1fb; font:inherit; font-size:12px; }
.history-type-filter { display:flex; align-items:center; gap:5px; }
.history-type-filter button { min-height:43px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.06); border-radius:99px; background:#191820; color:#bcb8c9; font-size:11px; white-space:nowrap; cursor:pointer; }
.history-type-filter button.active { border-color:transparent; background:linear-gradient(135deg,#7945bb,#4a2d70); color:#fff; }
.history-select-wrap { height:43px; min-width:150px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:#191820; color:#aaa2b8; }
.history-select-wrap select { width:100%; border:0; outline:0; appearance:none; background:transparent; color:#eee9f5; font:inherit; font-size:11px; cursor:pointer; }
.history-select-wrap select option { color:#eee9f5; background:#191820; }
.history-select-wrap > i:last-child { pointer-events:none; }
.history-browse-library { min-height:43px; padding:0 14px; display:inline-flex; align-items:center; gap:8px; border-radius:15px; white-space:nowrap; }
.history-list { border-color:rgba(255,255,255,.08); border-radius:22px; background:#14151b; }
.history-list-head { min-height:66px; padding:15px 0 11px; background:transparent; }
.history-list-head h2 { margin-top:5px; font-size:23px; }
.history-list-head > span { font-size:11px; }
.history-row-head { padding:10px 18px; display:grid; grid-template-columns:minmax(230px,1.5fr) minmax(120px,.8fr) minmax(90px,.55fr) minmax(90px,.55fr) 40px; gap:14px; border-top:1px solid rgba(255,255,255,.07); color:#88879a; font-size:10px; }
.history-entry { min-height:77px; padding:8px 14px; grid-template-columns:minmax(230px,1.5fr) minmax(120px,.8fr) minmax(90px,.55fr) minmax(90px,.55fr) 40px; border-top-color:rgba(255,255,255,.055); }
.history-thumb { width:74px; height:58px; border-radius:12px; }
.history-game { gap:12px; }
.history-game strong { font-size:12px; }
.history-game small { font-size:9px; }
.history-date { display:flex; align-items:center; gap:10px; }
.history-date > span { display:grid; gap:3px; }
.history-date > i,.history-session-stat > i { color:#aaa1bf; font-size:16px; }
.history-date strong,.history-session-stat strong { font-size:11px; }
.history-date small { color:#9290a1; font-size:9px; }
.history-session-stat { display:flex; align-items:center; gap:8px; }
.history-session-stat .history-row-nana { width:19px; height:19px; }
.history-entry-action { width:42px; height:42px; border:0; border-radius:14px; background:#211c2c; color:#bd83ff; font-size:18px; }

.settings-page-v2 { display:grid; gap:0; }
#app-shell:has(.history-page-v2),#app-shell:has(.settings-page-v2) { --topbar-h:76px; }
#app-shell:has(.settings-page-v2) .main-content { padding-top:11px; }
.settings-page-hero { min-height:130px; margin:0 0 8px; padding:20px 30px; display:flex; align-items:center; overflow:hidden; position:relative; border:1px solid rgba(181,130,255,.12); border-radius:25px; background:linear-gradient(90deg,rgba(11,10,20,.96) 0%,rgba(13,10,22,.82) 35%,rgba(18,10,29,.15) 100%),url('/assets/settings-room-banner.png') center 44%/cover no-repeat; }
.settings-page-hero h1 { margin:5px 0 6px; color:#f8f4ff; font-size:44px; line-height:1; letter-spacing:-2px; }
.settings-page-hero p { margin:0; color:#c1bbcd; font-size:12px; }
.settings-page-workspace { display:grid; grid-template-columns:214px minmax(0,1fr); align-items:start; gap:14px; }
.settings-category-nav { position:sticky; top:calc(var(--topbar-h,76px) + 12px); padding:9px; display:grid; gap:5px; border:1px solid rgba(181,130,255,.12); border-radius:21px; background:linear-gradient(160deg,#191720,#14141b); }
.settings-category-link { min-height:47px; padding:0 11px; display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:13px; background:transparent; color:#d3cede; text-align:left; font:inherit; font-size:11px; cursor:pointer; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.settings-category-link > i:first-child,.settings-category-link > img { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:10px; background:#25232f; color:#c8a1ff; font-size:14px; object-fit:contain; padding:6px; }
.settings-category-link.active { border-color:rgba(181,130,255,.5); background:linear-gradient(120deg,rgba(126,70,193,.26),rgba(40,29,57,.36)); color:#fff; box-shadow:inset 0 0 0 1px rgba(181,130,255,.08),0 5px 18px rgba(109,61,166,.12); }
.settings-category-link.active > i:first-child,.settings-category-link.active > img { background:#9b60db; color:#fff; }
.settings-category-arrow { margin-left:auto; opacity:0; color:#b98af2; }
.settings-category-link.active .settings-category-arrow { opacity:1; }
.settings-page-main { min-width:0; }
.settings-page-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-areas:"streaming streaming streaming streaming streaming streaming streaming library library library library library" "streaming streaming streaming streaming streaming streaming streaming miwi miwi miwi miwi miwi" "audio audio audio audio privacy privacy privacy privacy interface interface interface interface" "account account account account account account account account account account account account"; align-items:start; gap:12px; }
.settings-page-grid > * { min-width:0; max-width:none; scroll-margin-top:calc(var(--topbar-h,76px) + 18px); }
.settings-panel-streaming { grid-area:streaming; align-self:stretch; }
.settings-panel-library { grid-area:library; }
.settings-panel-miwi { grid-area:miwi; }
.settings-panel-audio { grid-area:audio; }
.settings-panel-interface { grid-area:interface; }
.settings-panel-privacy { grid-area:privacy; }
.settings-account-group { grid-area:account; min-width:0; padding:13px; display:grid; gap:12px; border:1px solid rgba(181,130,255,.13); border-radius:23px; background:linear-gradient(140deg,rgba(26,23,35,.8),rgba(17,17,23,.78)); scroll-margin-top:calc(var(--topbar-h,76px) + 18px); }
.settings-account-heading { display:flex; align-items:center; gap:11px; }
.settings-account-heading .settings-panel-icon { width:39px; height:39px; flex-basis:39px; }
.settings-account-heading h3 { margin:0 0 3px; font-size:16px; }
.settings-account-heading small { color:#a6a2b2; font-size:10px; }
.settings-account-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.settings-panel { padding:15px; border-color:rgba(181,130,255,.14); border-radius:19px; background:linear-gradient(145deg,#191821,#14141b); }
.settings-panel .panel-title { min-height:44px; margin-bottom:11px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:10px; }
.settings-panel .panel-title > span:last-child:not(.settings-panel-title-copy) { margin-left:auto; color:#a7a1b2; font-size:9px; white-space:nowrap; }
.settings-panel-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,rgba(181,130,255,.22),rgba(103,69,150,.14)); color:#c293ff; font-size:17px; }
.settings-panel-icon img { width:23px; height:23px; object-fit:contain; }
.settings-panel-title-copy { min-width:0; display:grid; gap:3px; }
.settings-panel-title-copy h3 { margin:0; font-size:14px; }
.settings-panel-title-copy small { color:#9995a8; font-size:9px; line-height:1.35; }
.settings-panel .settings-form-row { min-height:54px; gap:11px; margin-top:6px; padding:8px 10px; border-bottom-color:rgba(255,255,255,.055); }
.settings-panel .settings-form-row > div:first-child { min-width:0; display:flex; align-items:flex-start; gap:10px; }
.settings-panel .settings-form-row > div:first-child > i { width:23px; flex:0 0 23px; color:#bd8bff; font-size:15px; text-align:center; }
.settings-panel .settings-form-row > div:first-child span { display:grid; gap:4px; }
.settings-panel .settings-form-row strong { color:#f2edf9; font-size:10px; }
.settings-panel .settings-form-row small { max-width:550px; color:#a5a1ae; font-size:8px; line-height:1.4; }
.settings-panel .setting-select { max-width:210px; min-width:130px; }
.settings-panel-streaming .settings-graphics-anchor { scroll-margin-top:calc(var(--topbar-h,76px) + 18px); }
.settings-interface-block { margin-top:10px; padding:11px; border:1px solid rgba(181,130,255,.12); border-radius:15px; background:rgba(0,0,0,.11); }
.settings-inline-heading { margin-bottom:5px; display:flex; align-items:center; gap:9px; color:#bd8bff; }
.settings-inline-heading > span { display:grid; gap:2px; }
.settings-inline-heading strong { color:#f0eafa; font-size:10px; }
.settings-inline-heading small { color:#9995a8; font-size:8px; }
.settings-panel .settings-card { min-height:48px; padding:9px; background:rgba(255,255,255,.028); }
.settings-panel .settings-card > i { color:#bd8bff; }
.settings-visibility-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.settings-visibility-choice { min-height:88px; padding:10px; position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 16px; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.075); border-radius:15px; background:#191821; color:#eee9f5; text-align:left; cursor:pointer; }
.settings-visibility-choice.active { border-color:#a56be5; background:linear-gradient(135deg,rgba(121,66,181,.3),rgba(34,25,45,.62)); box-shadow:0 0 0 1px rgba(181,130,255,.12),0 8px 22px rgba(103,59,154,.14); }
.settings-visibility-choice-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:rgba(181,130,255,.16); color:#c595ff; font-size:17px; }
.settings-visibility-choice-icon.adult img { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 8px rgba(164,93,255,.42)); }
.settings-visibility-choice > span:nth-child(2) { display:grid; gap:4px; }
.settings-visibility-choice strong { font-size:10px; }
.settings-visibility-choice small { color:#a6a1b2; font-size:8px; line-height:1.3; }
.settings-visibility-check { opacity:0; color:#e4ccff; font-size:15px; }
.settings-visibility-choice.active .settings-visibility-check { opacity:1; }
.settings-panel-miwi .settings-footnote { margin-top:10px; padding:9px; border-radius:12px; background:rgba(181,130,255,.055); font-size:8px; line-height:1.45; }
.settings-panel-miwi .settings-form-row input { flex:0 0 170px; width:170px; max-width:170px; }
.settings-panel .keybind-editor-row { grid-template-columns:minmax(0,1fr) auto auto; gap:7px; }
.settings-panel .keybind-editor-copy strong { font-size:9px; }
.settings-panel .keybind-editor-copy small { font-size:7px; }
.settings-panel-audio .audio-refresh-devices { width:100%; justify-content:center; margin-top:8px; }
.settings-account-cards .detail-row { min-height:35px; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.05); }
.settings-account-cards .detail-row strong { max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; }

@media(max-width:1180px) {
  .notification-inbox { right:16px; width:min(950px,calc(100vw - 32px)); }
  .history-dashboard-head { grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); }
  .history-filter-toolbar { gap:8px; }
  .history-type-filter button { padding-inline:10px; }
  .settings-page-workspace { grid-template-columns:190px minmax(0,1fr); }
  .settings-page-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"streaming library" "streaming miwi" "audio privacy" "interface interface" "account account"; }
}
@media(max-width:900px) {
  .notification-inbox { left:16px; right:16px; width:auto; }
  .notification-inbox-head { align-items:flex-start; flex-direction:column; }
  .notification-inbox-head-actions { width:100%; }
  .notification-inbox-head-actions button { flex:1; }
  .history-dashboard-head { grid-template-columns:1fr; }
  .history-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .history-filter-toolbar { align-items:stretch; }
  .history-type-filter { order:2; flex:1 1 100%; overflow:auto; }
  .history-browse-library { margin-left:auto; }
  .history-entry,.history-row-head { grid-template-columns:minmax(170px,1.2fr) minmax(110px,.8fr) minmax(70px,.5fr) minmax(72px,.5fr) 38px; gap:8px; }
  .settings-page-workspace { grid-template-columns:1fr; }
  .settings-category-nav { position:relative; top:auto; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .settings-category-link { min-width:0; }
  .settings-category-link > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .settings-page-grid { grid-template-areas:"streaming" "library" "miwi" "audio" "privacy" "interface" "account"; grid-template-columns:minmax(0,1fr); }
}
@media(max-width:620px) {
  .notification-inbox { top:calc(var(--topbar-h,78px) + 8px); left:8px; right:8px; width:auto; max-height:calc(100dvh - var(--topbar-h,78px) - 16px); border-radius:22px; }
  .notification-inbox-head { min-height:0; padding:16px; }
  .notification-inbox-head strong { font-size:24px; }
  .notification-inbox-head-actions { gap:7px; }
  .notification-inbox-head-actions button { min-width:0 !important; min-height:46px; padding-inline:9px; font-size:10px; }
  .notification-inbox-toolbar { min-height:60px; padding-inline:12px; }
  .notification-inbox-tabs { gap:14px; }
  .notification-inbox-tabs button { font-size:13px; }
  .notification-tool-button { width:42px; height:42px; }
  .notification-search { position:absolute; z-index:2; top:120px; left:12px; right:12px; }
  .notification-search input { flex:1; width:auto; }
  .notification-list { padding:10px; gap:8px; }
  .notification-item { min-height:88px; padding:11px 12px 11px 16px; grid-template-columns:48px minmax(0,1fr) 16px; gap:11px; border-radius:16px; }
  .notification-item-icon { width:48px; height:48px; font-size:19px; }
  .notification-item-copy strong { font-size:14px; }
  .notification-item-copy > span { font-size:11px; }
  .notification-item-copy small { font-size:9px; }
  .history-page-v2 { gap:13px; }
  .history-summary { gap:8px; }
  .history-summary article { min-height:88px; padding:11px; gap:9px; border-radius:15px; }
  .history-summary-icon { width:40px; height:40px; flex-basis:40px; border-radius:12px; }
  .history-summary strong { font-size:19px; }
  .history-summary small { font-size:9px; }
  .history-filter-toolbar { display:grid; grid-template-columns:1fr 1fr; }
  .history-search,.history-type-filter { grid-column:1/-1; }
  .history-select-wrap { min-width:0; }
  .history-browse-library { grid-column:1/-1; justify-content:center; margin:0; }
  .history-row-head { display:none; }
  .history-entry { padding:10px; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
  .history-game { grid-column:1/-1; }
  .history-date { grid-column:1; grid-row:2; }
  .history-session-stat { grid-row:2; }
  .history-session-stat:nth-child(4) { display:none; }
  .history-entry-action { grid-column:3; grid-row:2; width:34px; height:34px; }
  .history-thumb { width:56px; height:46px; }
  .settings-page-hero { min-height:120px; padding:18px; border-radius:19px; }
  .settings-page-hero h1 { font-size:35px; }
  .settings-category-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-category-link { min-height:42px; font-size:9px; }
  .settings-category-link > i:first-child,.settings-category-link > img { width:27px; height:27px; flex-basis:27px; }
  .settings-visibility-options,.settings-account-cards { grid-template-columns:1fr; }
  .settings-panel .settings-form-row { align-items:flex-start; flex-direction:column; }
  .settings-panel .setting-select,.settings-panel-miwi .settings-form-row input { flex:0 1 auto; width:100%; max-width:none; }
}

/* Follow-up fit and interaction fixes for Settings, Inbox, and History. */
.settings-panel .settings-form-row > div:first-child > i {
  width:38px;
  min-width:38px;
  height:38px;
  min-height:38px;
  flex:0 0 38px;
  aspect-ratio:1;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#25232f;
  color:#c28fff;
  font-size:15px;
}
.settings-panel-icon,.settings-visibility-choice-icon,.settings-category-link > i:first-child,.settings-category-link > img,.settings-panel .settings-card > i {
  box-sizing:border-box;
  aspect-ratio:1;
  flex-shrink:0;
}
.settings-category-nav {
  align-self:start;
  max-height:calc(100dvh - var(--topbar-h,76px) - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(181,130,255,.45) transparent;
}

.notification-inbox {
  width:min(760px,calc(100vw - 32px));
  max-height:min(690px,calc(100dvh - var(--topbar-h,76px) - 24px));
  border-radius:25px;
}
.notification-inbox-head { min-height:96px; padding:17px 22px 15px; gap:16px; }
.notification-inbox-head > div:first-child { gap:4px; }
.notification-inbox-head > div:first-child > span { font-size:9px; letter-spacing:2.4px; }
.notification-inbox-head strong { font-size:24px; }
.notification-inbox-head small { font-size:12px; }
.notification-inbox-head > .notification-inbox-head-actions { gap:9px; }
.notification-inbox-head-actions button { min-height:44px; padding-inline:14px; border-radius:13px; font-size:11px; }
.notification-inbox-head-actions #browser-notification-toggle { min-width:190px; }
.notification-switch span { width:36px; height:21px; flex-basis:36px; }
.notification-switch span::after { width:15px; height:15px; top:3px; left:3px; }
.notification-switch[aria-checked="true"] span::after { transform:translateX(15px); }
.notification-inbox-toolbar { min-height:60px; padding-inline:20px; gap:12px; }
.notification-inbox-tabs { gap:20px; }
.notification-inbox-tabs button { font-size:14px; }
.notification-tool-button { width:44px; height:44px; border-radius:13px; font-size:16px; }
.notification-search { height:40px; }
.notification-search input { width:140px; }
.notification-search[hidden] { display:none; }
.notification-list { padding:12px 16px 16px; gap:8px; }
.notification-item { min-height:88px; padding:12px 16px 12px 20px; grid-template-columns:56px minmax(0,1fr) 18px; gap:14px; border-radius:17px; }
.notification-item-icon { width:56px; height:56px; font-size:21px; }
.notification-item-copy { gap:4px; }
.notification-item-copy strong { font-size:16px; }
.notification-item-copy > span { font-size:13px; }
.notification-item-copy small { font-size:10px; }
.notification-arrow { font-size:20px; }
.notification-empty { min-height:180px; }

.history-list { overflow:hidden; }
.history-list-head { min-height:70px; padding:18px 20px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.history-list-head > div { display:grid; gap:4px; }
.history-list-head h2 { margin:0; }
.history-row-head { padding-inline:20px; }
.history-dropdown-wrap { min-width:150px; position:relative; }
.history-dropdown-trigger { width:100%; min-height:43px; padding:0 12px; display:grid; grid-template-columns:17px minmax(0,1fr) 14px; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:#191820; color:#eee9f5; text-align:left; font:inherit; font-size:11px; cursor:pointer; }
.history-dropdown-trigger > i:first-child { color:#aaa2bf; }
.history-dropdown-trigger > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-dropdown-chevron { justify-self:end; color:#b9a9d1; transition:transform .16s ease; }
.history-dropdown-wrap.is-open .history-dropdown-chevron { transform:rotate(180deg); }
.history-dropdown-trigger:focus-visible,.history-dropdown-menu button:focus-visible { outline:2px solid #bd83ff; outline-offset:2px; }
.history-dropdown-menu { width:max(100%,190px); max-height:240px; padding:6px; position:absolute; z-index:100; top:calc(100% + 7px); right:0; display:grid; gap:3px; overflow:auto; border:1px solid rgba(181,130,255,.25); border-radius:14px; background:#1b1923; box-shadow:0 18px 46px rgba(0,0,0,.48); }
.history-dropdown-menu[hidden] { display:none; }
.history-dropdown-menu button { min-height:36px; padding:0 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-radius:9px; background:transparent; color:#d5cfdf; text-align:left; font:inherit; font-size:11px; cursor:pointer; }
.history-dropdown-menu button:hover,.history-dropdown-menu button[aria-selected="true"] { background:rgba(181,130,255,.14); color:#f4eaff; }
.history-dropdown-menu button > i { color:#c99cff; opacity:0; }
.history-dropdown-menu button[aria-selected="true"] > i { opacity:1; }
.miwibits-catalog-notice > .fi-rr-spinner { transform-origin:50% 50%; }
@keyframes miwi-catalog-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:no-preference) {
  .miwibits-catalog-notice > .fi-rr-spinner { animation:miwi-catalog-spin .9s linear infinite; }
}

@media(max-width:900px) {
  .notification-inbox { right:16px; left:auto; width:min(760px,calc(100vw - 32px)); }
  .history-list-head { padding-inline:16px; }
}
@media(max-width:620px) {
  .notification-inbox { top:calc(var(--topbar-h,78px) + 8px); left:8px; right:8px; width:auto; max-height:min(640px,calc(100dvh - var(--topbar-h,78px) - 16px)); border-radius:20px; }
  .notification-inbox-head { padding:13px 14px; }
  .notification-inbox-head > .notification-inbox-head-actions { width:100%; }
  .notification-inbox-head-actions #browser-notification-toggle { min-width:0; }
  .notification-inbox-head-actions button { min-height:40px; }
  .notification-inbox-toolbar { min-height:54px; padding-inline:11px; }
  .notification-tool-button { width:38px; height:38px; }
  .notification-search { top:105px; left:10px; right:10px; }
  .notification-list { padding:9px; }
  .notification-item { min-height:76px; padding:9px 10px 9px 14px; grid-template-columns:44px minmax(0,1fr) 14px; gap:9px; }
  .notification-item-icon { width:44px; height:44px; font-size:17px; }
  .notification-item-copy strong { font-size:13px; }
  .notification-item-copy > span { font-size:10px; }
  .notification-item-copy small { font-size:9px; }
  .history-dropdown-wrap { min-width:0; }
  .history-dropdown-trigger { min-height:42px; padding-inline:9px; grid-template-columns:15px minmax(0,1fr) 12px; gap:5px; font-size:10px; }
  .history-dropdown-menu { width:max(100%,170px); }
}

/* Mallowbub AI preview and consistent compact navigation across the app. */
#app-shell { --sidebar-w:90px; --topbar-h:76px; }
#app-shell .sidebar { width:90px; min-width:90px; padding:12px 10px 18px; }
#app-shell .sidebar-logo-button { width:64px; height:64px; }
#app-shell .sidebar-logo { width:50px; height:50px; }
#app-shell .nav-capsule { width:54px; margin-top:12px; }
#app-shell .nav-icon { width:42px; height:42px; border-radius:14px; }
.mallowbub-ai-nav img { width:23px; height:23px; object-fit:contain; filter:grayscale(1) brightness(.72) opacity(.88); }
.mallowbub-ai-nav.active img { filter:grayscale(1) brightness(.8) opacity(.96) drop-shadow(0 0 4px rgba(210,157,255,.3)); }
.mallowbub-ai-page { --mallow-lilac:#c58aff; position:relative; isolation:isolate; min-height:calc(100dvh - var(--topbar-h,76px) - 30px); display:grid; align-content:start; gap:22px; overflow:hidden; padding:clamp(20px,3vw,42px); border:1px solid rgba(193,145,255,.18); border-radius:28px; background:radial-gradient(ellipse at 78% 18%,rgba(127,79,174,.24),transparent 36%),linear-gradient(140deg,#1c1726 0%,#11121a 54%,#15101f 100%); color:#f7f2ff; box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
.mallowbub-ai-orbit { position:absolute; z-index:-1; pointer-events:none; border:1px solid rgba(203,161,255,.08); border-radius:50%; }
.mallowbub-ai-orbit-one { width:540px; height:540px; top:-270px; right:-100px; }
.mallowbub-ai-orbit-two { width:730px; height:730px; top:-365px; right:-195px; }
.mallowbub-ai-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mallowbub-ai-badge,.mallowbub-ai-status { min-height:31px; display:inline-flex; align-items:center; gap:8px; padding:0 11px; border:1px solid rgba(195,152,255,.19); border-radius:999px; background:rgba(181,130,255,.08); color:#dcc6fb; font-size:9px; font-weight:800; letter-spacing:1.25px; }
.mallowbub-ai-status { color:#b7c9d7; font-size:9px; letter-spacing:.1px; font-weight:650; }
.mallowbub-ai-status i { width:7px; height:7px; border-radius:50%; background:#e9bd75; box-shadow:0 0 10px #e9bd7566; }
.mallowbub-ai-hero { min-height:390px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr); align-items:center; gap:28px; }
.mallowbub-ai-copy { max-width:650px; display:grid; justify-items:start; gap:0; }
.mallowbub-ai-copy .home-kicker { margin:0 0 10px; color:#c69aff; font-size:9px; letter-spacing:2px; }
.mallowbub-ai-copy h1 { max-width:640px; margin:0; font-size:clamp(40px,6vw,78px); line-height:.99; letter-spacing:-.065em; text-wrap:balance; }
.mallowbub-ai-copy h1 span { color:#c48aff; text-shadow:0 0 32px rgba(184,116,255,.32); }
.mallowbub-ai-lede { max-width:520px; margin:17px 0 20px; color:#c1bacd; font-size:clamp(12px,1.2vw,15px); line-height:1.7; }
.mallowbub-ai-coming { width:min(490px,100%); display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid rgba(196,146,255,.2); border-radius:15px; background:linear-gradient(120deg,rgba(181,130,255,.11),rgba(255,255,255,.025)); }
.mallowbub-ai-coming-icon { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:12px; background:rgba(190,139,255,.16); color:#d7b3ff; font-size:16px; }
.mallowbub-ai-coming > span:last-child { min-width:0; display:grid; gap:4px; }
.mallowbub-ai-coming strong { font-size:12px; }
.mallowbub-ai-coming small { color:#a9a0b7; font-size:10px; line-height:1.45; }
.mallowbub-ai-disabled-action { min-height:43px; margin-top:15px; padding:0 14px; display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(196,146,255,.18); border-radius:13px; background:rgba(255,255,255,.035); color:#a8a0b5; font:inherit; font-size:11px; font-weight:750; cursor:not-allowed; }
.mallowbub-ai-disabled-action > span { margin-left:3px; padding:4px 7px; border-radius:999px; background:rgba(193,145,255,.13); color:#d0aeff; font-size:8px; letter-spacing:.25px; }
.mallowbub-ai-art { min-height:340px; position:relative; display:grid; place-items:center; }
.mallowbub-ai-art-glow { position:absolute; inset:15% 8%; border-radius:50%; background:radial-gradient(ellipse,rgba(169,102,244,.32),rgba(114,70,173,.12) 42%,transparent 72%); filter:blur(22px); }
.mallowbub-ai-art img { width:min(100%,430px); max-height:390px; position:relative; z-index:1; object-fit:contain; filter:drop-shadow(0 22px 28px rgba(0,0,0,.4)); }
.mallowbub-ai-art-caption { position:absolute; z-index:2; right:4%; bottom:4%; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid rgba(221,197,255,.16); border-radius:999px; background:rgba(16,13,23,.74); color:#ddcff2; font-size:9px; backdrop-filter:blur(12px); }
.mallowbub-ai-art-caption i,.mallowbub-ai-spark { color:#d9b6ff; }
.mallowbub-ai-spark { position:absolute; z-index:2; text-shadow:0 0 15px rgba(211,168,255,.6); }
.mallowbub-ai-spark-one { top:15%; right:20%; font-size:25px; }
.mallowbub-ai-spark-two { left:12%; bottom:23%; font-size:19px; }
.mallowbub-ai-preview { padding:20px; border:1px solid rgba(193,145,255,.14); border-radius:20px; background:rgba(12,12,18,.48); }
.mallowbub-ai-preview-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mallowbub-ai-preview-head .home-kicker { margin:0 0 6px; color:#c69aff; font-size:8px; letter-spacing:1.7px; }
.mallowbub-ai-preview-head h2 { margin:0; font-size:clamp(17px,2.2vw,23px); letter-spacing:-.04em; }
.mallowbub-ai-preview-note { color:#958da1; font-size:9px; }
.mallowbub-ai-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mallowbub-ai-feature-grid article { min-width:0; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:10px; padding:13px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:rgba(255,255,255,.025); }
.mallowbub-ai-feature-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; font-size:14px; }
.mallowbub-ai-feature-icon.is-purple { background:#9a65d626; color:#c796ff; }
.mallowbub-ai-feature-icon.is-pink { background:#de7ca426; color:#f59bc1; }
.mallowbub-ai-feature-icon.is-blue { background:#6c9de526; color:#9ccaff; }
.mallowbub-ai-feature-grid article > div { min-width:0; }
.mallowbub-ai-feature-grid strong { display:block; padding-top:2px; font-size:10px; }
.mallowbub-ai-feature-grid p { margin:5px 0 0; color:#a69eb2; font-size:9px; line-height:1.5; }
.mallowbub-ai-feature-tag { grid-column:2; justify-self:start; margin-top:1px; color:#c5a2f1; font-size:8px; font-weight:750; }
.mallowbub-ai-footer { display:flex; align-items:center; gap:8px; color:#91889e; font-size:9px; }
.mallowbub-ai-footer i { color:#c59aff; }
.mallowbub-ai-chat-page { --mallow-chat-accent:#bd83ff; position:relative; display:grid; grid-template-columns:260px minmax(0,1fr); height:min(940px,calc(100dvh - var(--topbar-h,76px) - 36px)); min-height:620px; overflow:hidden; border:1px solid rgba(195,149,255,.2); border-radius:24px; background:radial-gradient(ellipse at 78% 0%,rgba(127,79,174,.12),transparent 38%),linear-gradient(145deg,#15131d,#101117 62%,#17121f); color:#f7f2ff; box-shadow:0 20px 64px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.035); }
.mallowbub-ai-chat-sidebar { min-width:0; display:flex; flex-direction:column; padding:18px 13px 14px; border-right:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.mallowbub-chat-brand { min-height:48px; display:flex; align-items:center; gap:10px; padding:0 5px 14px; }
.mallowbub-chat-brand-icon { width:39px; height:39px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(197,154,255,.25); border-radius:13px; background:radial-gradient(circle at 50% 20%,rgba(203,157,255,.24),rgba(143,94,201,.09)); }
.mallowbub-chat-brand-icon img { width:34px; height:34px; object-fit:contain; }
.mallowbub-chat-brand > span:nth-child(2) { min-width:0; display:grid; gap:2px; }
.mallowbub-chat-brand strong { font-size:13px; letter-spacing:-.02em; }
.mallowbub-chat-brand small { color:#938ba0; font-size:9px; }
.mallowbub-connection-light { width:8px; height:8px; flex:none; margin-left:auto; border-radius:50%; background:#6d6575; box-shadow:0 0 0 4px rgba(130,119,141,.08); }
.mallowbub-connection-light.is-online { background:#62d6a5; box-shadow:0 0 0 4px rgba(98,214,165,.1),0 0 12px rgba(98,214,165,.6); }
.mallowbub-connection-light.is-loading { background:#c69aff; animation:mallowbub-pulse 1.3s ease-in-out infinite; }
@keyframes mallowbub-pulse { 50% { opacity:.4; box-shadow:0 0 0 7px rgba(198,154,255,.04); } }
.mallowbub-new-chat { min-height:39px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(192,143,255,.27); border-radius:12px; background:linear-gradient(115deg,rgba(173,113,244,.2),rgba(173,113,244,.09)); color:#e9d9ff; font:inherit; font-size:10px; font-weight:780; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.mallowbub-new-chat:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(202,164,255,.6); background:rgba(173,113,244,.28); }
.mallowbub-pending-spinner { display:inline-block; width:9px; height:9px; margin-right:4px; border:1.5px solid rgba(203,157,255,.35); border-top-color:#cf9cff; border-radius:50%; vertical-align:-1px; animation:mallowbub-pending-spin .75s linear infinite; }
@keyframes mallowbub-pending-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .mallowbub-pending-spinner { animation:none; border-color:#cf9cff; } }
.mallowbub-new-chat:disabled { opacity:.45; cursor:not-allowed; }
.mallowbub-history-label { display:flex; align-items:center; justify-content:space-between; margin:21px 5px 8px; color:#8d8498; font-size:8px; font-weight:850; letter-spacing:1.25px; }
.mallowbub-history-label span { min-width:20px; height:19px; display:grid; place-items:center; padding:0 5px; border-radius:8px; background:rgba(255,255,255,.055); color:#c5bbd1; font-size:9px; letter-spacing:0; }
.mallowbub-conversation-list { min-height:0; flex:1; overflow:auto; scrollbar-width:thin; scrollbar-color:#49365d transparent; }
.mallowbub-conversation-row { display:flex; align-items:stretch; gap:3px; margin:3px 0; padding:3px; border:1px solid transparent; border-radius:11px; transition:background .16s,border-color .16s; }
.mallowbub-conversation-row:hover,.mallowbub-conversation-row.is-active { border-color:rgba(194,145,255,.15); background:rgba(171,121,221,.095); }
.mallowbub-conversation-select { min-width:0; flex:1; display:flex; align-items:center; gap:9px; padding:7px 5px; border:0; background:transparent; color:#bcb4c8; text-align:left; cursor:pointer; }
.mallowbub-conversation-select > i { color:#aa7be0; font-size:12px; }
.mallowbub-conversation-select > span { min-width:0; display:grid; gap:4px; }
.mallowbub-conversation-select strong { overflow:hidden; color:#e8e2ed; font-size:9px; font-weight:670; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-conversation-select small { color:#82798c; font-size:8px; }
.mallowbub-conversation-delete { width:27px; flex:none; border:0; border-radius:8px; background:transparent; color:#82798b; opacity:0; cursor:pointer; }
.mallowbub-conversation-row:hover .mallowbub-conversation-delete,.mallowbub-conversation-delete:focus-visible { opacity:1; }
.mallowbub-conversation-delete:hover { background:rgba(241,106,146,.12); color:#f09bb8; }
.mallowbub-conversation-empty { min-height:90px; display:grid; justify-items:center; align-content:center; gap:9px; padding:12px; color:#8c8298; text-align:center; font-size:9px; line-height:1.5; }
.mallowbub-conversation-empty > i { color:#b88bed; font-size:17px; }
.mallowbub-chat-privacy { display:flex; align-items:flex-start; gap:9px; margin-top:13px; padding:11px 9px; border:1px solid rgba(184,144,231,.12); border-radius:12px; background:rgba(161,111,215,.05); }
.mallowbub-chat-privacy > i { margin-top:2px; color:#a982d4; font-size:12px; }
.mallowbub-chat-privacy > span { display:grid; gap:4px; }
.mallowbub-chat-privacy strong { color:#d8cce7; font-size:8px; }
.mallowbub-chat-privacy small { color:#8d8399; font-size:8px; line-height:1.4; }
.mallowbub-ai-chat-main { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.mallowbub-chat-topbar { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px clamp(18px,3vw,34px); border-bottom:1px solid rgba(255,255,255,.055); }
.mallowbub-chat-topbar > div:first-child { min-width:0; }
.mallowbub-chat-topbar .mallowbub-ai-badge { min-height:22px; padding:0 8px; font-size:7px; letter-spacing:1px; }
.mallowbub-chat-topbar h1 { margin:7px 0 0; color:#f1ebf7; font-size:clamp(15px,2vw,21px); font-weight:750; letter-spacing:-.045em; }
.mallowbub-chat-account { display:flex; align-items:center; gap:7px; color:#aaa1b3; font-size:9px; white-space:nowrap; }
.mallowbub-chat-account .profile-online-dot { width:6px; height:6px; }
.mallowbub-chat-content { min-height:0; position:relative; overflow:auto; scrollbar-width:thin; scrollbar-color:#49365d transparent; }
.mallowbub-chat-welcome { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px 20px 30px; text-align:center; }
.mallowbub-welcome-art { width:150px; height:140px; display:grid; place-items:center; margin-bottom:9px; border-radius:50%; background:radial-gradient(circle,rgba(173,120,229,.22),rgba(173,120,229,.035) 65%,transparent 70%); }
.mallowbub-welcome-art img { width:125px; height:125px; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.mallowbub-chat-welcome .mallowbub-ai-badge { min-height:24px; font-size:7px; }
.mallowbub-chat-welcome h2 { max-width:620px; margin:13px 0 7px; font-size:clamp(23px,3.4vw,36px); line-height:1.1; letter-spacing:-.055em; }
.mallowbub-chat-welcome > p { max-width:470px; margin:0; color:#aaa1b2; font-size:11px; line-height:1.6; }
.mallowbub-prompt-suggestions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; }
.mallowbub-prompt-suggestions button { min-height:33px; padding:0 12px; border:1px solid rgba(190,150,235,.19); border-radius:999px; background:rgba(255,255,255,.025); color:#c9bdd8; font:inherit; font-size:9px; cursor:pointer; transition:background .16s,border-color .16s; }
.mallowbub-prompt-suggestions button:hover { border-color:rgba(192,147,244,.5); background:rgba(178,123,228,.11); }
.mallowbub-chat-messages { width:min(880px,100%); min-height:100%; display:flex; flex-direction:column; gap:20px; margin:0 auto; padding:clamp(18px,3vw,34px); }
.mallowbub-chat-message { display:flex; align-items:flex-start; gap:11px; }
.mallowbub-message-avatar { width:29px; height:29px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(193,150,240,.16); border-radius:10px; background:rgba(164,112,222,.12); color:#c7a2ef; font-size:12px; }
.mallowbub-message-avatar img { width:25px; height:25px; object-fit:contain; }
.mallowbub-message-avatar.profile-avatar { width:29px; height:29px; flex:0 0 29px; border-width:1px; border-radius:50%; font-size:9px; box-shadow:0 0 0 3px rgba(181,130,255,.08); }
.mallowbub-message-avatar.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.mallowbub-chat-message.is-user .mallowbub-message-avatar { border-color:rgba(115,181,230,.13); background:rgba(79,148,202,.1); color:#8bc8ee; }
.mallowbub-message-body { min-width:0; flex:1; padding-top:1px; }
.mallowbub-message-author { margin-bottom:6px; color:#d9cdea; font-size:9px; font-weight:780; }
.mallowbub-chat-message.is-user .mallowbub-message-author { color:#b9d8eb; }
.mallowbub-message-content { color:#e5dfea; font-size:11px; line-height:1.75; overflow-wrap:anywhere; }
.mallowbub-chat-message.is-user .mallowbub-message-content { color:#d9d2e2; }
.mallowbub-chat-message.is-user .mallowbub-message-content { text-align:left; white-space:pre-wrap; }
.mallowbub-chat-message.is-user { align-self:stretch; flex-direction:row-reverse; width:100%; margin-left:0; }
.mallowbub-chat-message.is-user .mallowbub-message-body { min-width:0; max-width:min(78%,680px); flex:0 1 auto; padding:9px 12px; border:1px solid rgba(161,125,202,.18); border-radius:14px 5px 14px 14px; background:linear-gradient(145deg,rgba(114,76,154,.2),rgba(53,43,68,.52)); text-align:right; }
.mallowbub-chat-message.is-user .mallowbub-message-author { color:#d1b9ec; }
.mallowbub-chat-message.is-user .mallowbub-message-image { margin-left:auto; }
.mallowbub-typing-indicator { min-height:18px; display:inline-flex; align-items:center; gap:4px; padding:1px 0; }
.mallowbub-typing-indicator i { width:5px; height:5px; display:block; border-radius:50%; background:#c89af3; opacity:.38; animation: mallowbub-typing-pulse 1.05s ease-in-out infinite; }
.mallowbub-typing-indicator i:nth-child(2) { animation-delay:.15s; }
.mallowbub-typing-indicator i:nth-child(3) { animation-delay:.3s; }
@keyframes mallowbub-typing-pulse { 0%,60%,100% { opacity:.38; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { .mallowbub-typing-indicator i { animation:none; opacity:.8; } }
.mallowbub-message-image { display:block; max-width:min(340px,100%); max-height:280px; margin:5px 0 9px; border:1px solid rgba(193,150,240,.18); border-radius:13px; object-fit:contain; }
.mallowbub-message-attachment { width:max-content; display:flex; align-items:center; gap:6px; margin:2px 0 7px; padding:6px 8px; border:1px solid rgba(191,145,244,.14); border-radius:8px; background:rgba(164,112,222,.07); color:#bfa4d9; font-size:8px; }
.mallowbub-message-error { margin-top:8px; padding:8px 10px; border:1px solid rgba(239,125,155,.18); border-radius:10px; background:rgba(239,125,155,.06); color:#e9a6b8; font-size:9px; line-height:1.45; }
.mallowbub-message-sources { margin-top:9px; color:#ba9bdb; font-size:9px; }
.mallowbub-message-sources summary { width:max-content; cursor:pointer; }
.mallowbub-message-sources a { display:flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:7px; color:#bd9be3; text-decoration:none; }
.mallowbub-message-sources a:hover { color:#e0c5ff; text-decoration:underline; }
.mallowbub-chat-state,.mallowbub-chat-gate { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; text-align:center; }
.mallowbub-chat-state > span:first-child,.mallowbub-chat-gate > span { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(191,145,244,.18); border-radius:16px; background:rgba(164,112,222,.12); color:#c49aec; font-size:19px; }
.mallowbub-chat-spinner { width:30px; height:30px; border:3px solid rgba(196,154,240,.18); border-top-color:#c59aff; border-radius:50%; animation:mallowbub-spin .8s linear infinite; }
@keyframes mallowbub-spin { to { transform:rotate(360deg); } }
.mallowbub-send-button .fi-rr-spinner,.mallowbub-conversation-empty .fi-rr-spinner { animation:mallowbub-spin .8s linear infinite; }
.mallowbub-chat-state strong,.mallowbub-chat-gate h2 { margin:15px 0 0; color:#f1e9f7; font-size:15px; letter-spacing:-.025em; }
.mallowbub-chat-state p,.mallowbub-chat-gate p { max-width:440px; margin:7px 0 14px; color:#a89eaf; font-size:10px; line-height:1.65; }
.mallowbub-chat-state small { margin-top:11px; color:#887e91; font-size:8px; }
.mallowbub-chat-gate .primary-btn { margin-top:2px; }
.mallowbub-chat-state .soft-btn { min-height:34px; }
.mallowbub-composer { width:min(880px,calc(100% - 36px)); align-self:end; margin:0 auto 17px; padding:11px; border:1px solid rgba(194,151,240,.2); border-radius:17px; background:linear-gradient(145deg,rgba(31,27,39,.97),rgba(20,18,27,.98)); box-shadow:0 12px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035); }
.mallowbub-composer-tools { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:0 0 8px; }
.mallowbub-select-wrap { min-width:0; display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.025); color:#a98acb; }
.mallowbub-select-wrap select { max-width:200px; height:28px; border:0; outline:0; background:transparent; color:#d4cbdc; font:inherit; font-size:8px; cursor:pointer; }
.mallowbub-select-wrap option { background:#191621; color:#eee6f5; }
.mallowbub-composer-status { overflow:hidden; margin-left:auto; color:#91879d; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-composer-price { flex:0 1 auto; color:#c6a0ed; font-size:8px; line-height:1.4; white-space:nowrap; }
.mallowbub-message-cost { display:flex; align-items:center; gap:5px; margin-top:7px; color:#b996dc; font-size:8px; }
.mallowbub-message-cost[hidden] { display:none; }
.mallowbub-composer-input-row { display:flex; align-items:flex-end; gap:8px; }
.mallowbub-attach-button,.mallowbub-send-button { width:36px; height:36px; flex:none; display:grid; place-items:center; border:1px solid rgba(194,151,240,.18); border-radius:11px; background:rgba(255,255,255,.035); color:#c4a0e8; font-size:13px; cursor:pointer; }
.mallowbub-attach-button:disabled { opacity:.4; cursor:not-allowed; }
.mallowbub-send-button { border:0; background:linear-gradient(125deg,#d19aff,#9e67ed); color:#241532; box-shadow:0 6px 16px rgba(156,91,229,.22); }
.mallowbub-send-button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.mallowbub-stop-button { width:36px; height:36px; flex:none; display:grid; place-items:center; border:1px solid #d6a0f1a0; border-radius:11px; background:linear-gradient(130deg,#b376de,#8151b4); color:#fff3ff; font-size:14px; cursor:pointer; box-shadow:0 6px 16px #8850b54d; }
.mallowbub-stop-button:is(:hover,:focus-visible) { background:linear-gradient(130deg,#c990ec,#9662c8); outline:2px solid #e5b7ff; outline-offset:2px; }.mallowbub-stop-button:disabled { opacity:.6; cursor:wait; }
.mallowbub-message-stopped { display:inline-flex; align-items:center; gap:5px; margin-top:7px; color:#cdb8df; font-size:10px; }
.mallowbub-composer-input-row textarea { min-width:0; min-height:37px; max-height:min(180px,28dvh); flex:1; resize:none; overflow-x:hidden; overflow-y:hidden; padding:9px 3px 7px; border:0; outline:0; background:transparent; color:#f0eaf4; font:inherit; font-size:10px; line-height:1.5; }
.mallowbub-composer-input-row textarea::placeholder { color:#847b8e; }
.mallowbub-composer-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 3px 0; color:#82798d; font-size:7px; }
.mallowbub-composer-foot span { display:flex; align-items:center; gap:5px; }
.mallowbub-composer-foot i { color:#ac8bd0; }
.mallowbub-attachment-preview { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:6px; border:1px solid rgba(191,145,244,.14); border-radius:10px; background:rgba(255,255,255,.025); color:#c7bbd3; font-size:8px; }
.mallowbub-attachment-preview img { width:32px; height:32px; border-radius:6px; object-fit:cover; }
.mallowbub-attachment-preview span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-attachment-preview button { width:25px; height:25px; margin-left:auto; border:0; border-radius:7px; background:transparent; color:#a99eb2; cursor:pointer; }
@media (max-width:900px) {
  .mallowbub-ai-chat-page { grid-template-columns:215px minmax(0,1fr); }
  .mallowbub-ai-chat-sidebar { padding-inline:10px; }
  .mallowbub-chat-topbar { padding-inline:18px; }
  .mallowbub-select-wrap select { max-width:150px; }
}
@media (max-width:640px) {
  .mallowbub-ai-chat-page { height:calc(100dvh - var(--topbar-h,68px) - 18px); min-height:570px; grid-template-columns:minmax(0,1fr); grid-template-rows:155px minmax(0,1fr); border-radius:18px; }
  .mallowbub-ai-chat-sidebar { min-height:0; padding:9px 12px 8px; border-right:0; border-bottom:1px solid rgba(255,255,255,.07); }
  .mallowbub-chat-brand { min-height:35px; padding:0 2px 7px; }
  .mallowbub-chat-brand-icon { width:30px; height:30px; border-radius:10px; }
  .mallowbub-chat-brand-icon img { width:27px; height:27px; }
  .mallowbub-new-chat { position:absolute; z-index:2; top:14px; right:12px; min-height:30px; padding:0 10px; font-size:8px; }
  .mallowbub-history-label { margin:4px 3px 3px; font-size:7px; }
  .mallowbub-history-label span { min-width:16px; height:15px; }
  .mallowbub-conversation-list { display:flex; gap:5px; overflow-x:auto; overflow-y:hidden; }
  .mallowbub-conversation-empty { min-height:45px; display:flex; flex:none; align-items:center; padding:0 7px; }
  .mallowbub-conversation-empty > i { font-size:12px; }
  .mallowbub-conversation-row { min-width:145px; max-width:190px; height:42px; flex:none; margin:0; }
  .mallowbub-conversation-select { padding:4px; }
  .mallowbub-conversation-delete { opacity:1; }
  .mallowbub-chat-privacy { display:none; }
  .mallowbub-ai-chat-main { min-height:0; }
  .mallowbub-chat-topbar { min-height:60px; padding:8px 13px; }
  .mallowbub-chat-topbar h1 { font-size:14px; }
  .mallowbub-chat-account { font-size:8px; }
  .mallowbub-chat-welcome { padding:14px 15px 19px; }
  .mallowbub-welcome-art { width:94px; height:84px; margin:0; }
  .mallowbub-welcome-art img { width:84px; height:84px; }
  .mallowbub-chat-welcome h2 { margin-top:9px; font-size:23px; }
  .mallowbub-chat-welcome > p { font-size:9px; }
  .mallowbub-prompt-suggestions { gap:6px; margin-top:14px; }
  .mallowbub-prompt-suggestions button { min-height:29px; padding-inline:9px; font-size:8px; }
  .mallowbub-chat-messages { gap:16px; padding:15px 12px; }
  .mallowbub-composer { width:calc(100% - 18px); margin-bottom:9px; padding:8px; border-radius:14px; }
  .mallowbub-composer-tools { gap:5px; padding-bottom:6px; }
  .mallowbub-select-wrap { gap:3px; padding:0 5px; }
  .mallowbub-select-wrap select { max-width:112px; height:25px; font-size:7px; }
  .mallowbub-select-wrap.mallowbub-compact-select select { max-width:75px; }
  .mallowbub-composer-status { display:none; }
  .mallowbub-composer-price { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:7px; }
  .mallowbub-composer-input-row textarea { font-size:9px; }
  .mallowbub-composer-foot { align-items:flex-start; font-size:6px; }
}

/* Full-workspace Mallowbub layout: only the chat transcript and history list scroll. */
.main-content:has(.mallowbub-ai-chat-page),
#main-content:has(.mallowbub-ai-chat-page) { height:calc(100dvh - var(--topbar-h,76px)); min-height:0; padding:0; overflow:hidden; }
.mallowbub-ai-chat-page { width:100%; height:100%; min-height:0; border:0; border-radius:0; box-shadow:none; }
.mallowbub-ai-chat-main { min-height:0; overflow:hidden; }
.mallowbub-chat-content { display:grid; min-height:0; overflow:hidden; scrollbar-width:none; }
.mallowbub-chat-content::-webkit-scrollbar { display:none; }
.mallowbub-chat-messages { height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#49365d transparent; }
.mallowbub-chat-welcome,.mallowbub-chat-state,.mallowbub-chat-gate { min-height:0; height:100%; }
.mallowbub-model-select-wrap { position:relative; gap:7px; padding-right:3px; }
.mallowbub-model-picker { position:relative; min-width:0; }
.mallowbub-model-picker-trigger { max-width:min(260px,38vw); min-height:30px; display:flex; align-items:center; gap:7px; padding:0 8px 0 2px; border:0; border-radius:8px; background:transparent; color:#e7dff0; font:inherit; font-size:9px; font-weight:740; cursor:pointer; }
.mallowbub-model-picker-trigger:hover:not(:disabled) { background:rgba(183,137,231,.09); }
.mallowbub-model-picker-trigger:focus-visible,.mallowbub-model-option:focus-visible { outline:2px solid #c69aff; outline-offset:2px; }
.mallowbub-model-picker-trigger:disabled { opacity:.55; cursor:wait; }
.mallowbub-model-picker-icon,.mallowbub-model-option-icon { width:24px; height:24px; flex:none; display:grid; place-items:center; border:0; border-radius:0; background:transparent; font-size:14px; }
.mallowbub-model-picker-icon > img,.mallowbub-model-option-icon > img,.mallowbub-model-group-heading > span > img { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
.mallowbub-model-picker-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-picker-trigger > .fi { color:#a99ab8; font-size:12px; }
.mallowbub-model-picker-menu { position:absolute; z-index:100; left:-34px; bottom:calc(100% + 9px); width:min(330px,calc(100vw - 28px)); max-height:min(430px,65vh); overflow-y:auto; padding:8px; border:1px solid rgba(198,154,255,.24); border-radius:15px; background:rgba(23,19,31,.98); box-shadow:0 18px 55px rgba(0,0,0,.48); scrollbar-width:thin; scrollbar-color:#49365d transparent; }
.mallowbub-model-picker-menu[hidden] { display:none; }
.mallowbub-model-group + .mallowbub-model-group { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.07); }
.mallowbub-model-group-heading { display:flex; align-items:center; gap:8px; padding:5px 7px 7px; color:#a99bb6; font-size:8px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.mallowbub-model-group-heading > span { width:21px; height:21px; display:grid; place-items:center; border:0; border-radius:0; background:transparent; font-size:12px; }
.mallowbub-model-option { width:100%; min-height:39px; display:flex; align-items:center; gap:9px; padding:6px 8px; border:1px solid transparent; border-radius:10px; background:transparent; color:#dcd4e5; text-align:left; font:inherit; font-size:9px; cursor:pointer; }
.mallowbub-model-option:hover,.mallowbub-model-option.is-selected { border-color:rgba(194,145,255,.19); background:rgba(171,121,221,.13); }
.mallowbub-model-option-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-option > .fi { color:#c69aff; font-size:12px; }
@media (max-width:640px) {
  .main-content:has(.mallowbub-ai-chat-page),
  #main-content:has(.mallowbub-ai-chat-page) { height:calc(100dvh - var(--topbar-h,68px)); }
  .mallowbub-ai-chat-page { height:100%; min-height:0; border-radius:0; }
  .mallowbub-chat-messages { height:100%; min-height:0; overflow-y:auto; }
  .mallowbub-model-picker-trigger { max-width:44vw; }
  .mallowbub-model-picker-menu { left:-24px; }
}

/* Compact the notification popover and keep every row readable at every size. */
#notification-inbox.notification-inbox { right:clamp(12px,5vw,70px); width:min(640px,calc(100vw - 24px)); max-height:min(700px,calc(100dvh - var(--topbar-h,76px) - 24px)); border-radius:23px; }
#notification-inbox .notification-inbox-head { min-height:86px; padding:15px 19px; gap:12px; }
#notification-inbox .notification-inbox-head strong { font-size:23px; }
#notification-inbox .notification-inbox-head small { font-size:11px; }
#notification-inbox .notification-inbox-head-actions { gap:8px; }
#notification-inbox .notification-inbox-head-actions button { min-height:40px; padding:0 12px; border-radius:12px; font-size:10px; }
#notification-inbox .notification-inbox-head-actions #browser-notification-toggle { min-width:170px; }
#notification-inbox .notification-inbox-toolbar { min-height:55px; padding-inline:18px; gap:10px; }
#notification-inbox .notification-inbox-tabs { gap:16px; }
#notification-inbox .notification-inbox-tabs button { font-size:13px; }
#notification-inbox .notification-tool-button { width:40px; height:40px; border-radius:12px; font-size:15px; }
#notification-inbox .notification-search { height:38px; }
#notification-inbox .notification-list { padding:12px 15px 15px; gap:8px; }
#notification-inbox .notification-item { min-height:78px; padding:10px 14px 10px 18px; grid-template-columns:50px minmax(0,1fr) 18px; gap:12px; border-radius:16px; }
#notification-inbox .notification-item-icon { width:50px; height:50px; font-size:19px; }
#notification-inbox .notification-item-copy { gap:3px; }
#notification-inbox .notification-item-copy strong { font-size:14px; }
#notification-inbox .notification-item-copy > span { font-size:11px; line-height:1.4; }
#notification-inbox .notification-item-copy small { font-size:9px; }
#notification-inbox .notification-arrow { font-size:18px; }
#detailed-notifications { top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); width:min(370px,calc(100vw - 24px)); gap:8px; }
.detailed-notification { min-width:0; grid-template-columns:38px minmax(0,1fr) 22px; align-items:start; gap:10px; padding:12px; border-radius:16px; }
.detailed-notification > div { min-width:0; }
.detailed-notification strong { font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.detailed-notification p { margin:4px 0 7px; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.detailed-notification-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-size:18px; }
.detailed-notification-actions { display:flex; flex-wrap:wrap; gap:6px; }
.detailed-notification-actions button { min-height:28px; padding:5px 9px; font-size:10px; }
.detailed-notification [data-dismiss] { width:22px; height:22px; display:grid; place-items:center; padding:0; font-size:14px; }
.history-list-head { min-height:78px; padding:20px 24px 16px; }
.history-row-head { padding-inline:24px; }
.history-list-head h2,.history-list-head > div { margin-inline:0; }
.home-v4 .featured-copy-panel h2 { max-width:100%; min-width:0; overflow:visible; white-space:normal; overflow-wrap:anywhere; word-break:normal; font-size:clamp(29px,4vw,57px); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }

@media(max-width:900px) {
  #notification-inbox.notification-inbox { right:12px; width:min(600px,calc(100vw - 24px)); }
  .mallowbub-ai-page { padding:22px; }
  .mallowbub-ai-hero { min-height:320px; gap:14px; }
  .mallowbub-ai-art { min-height:280px; }
  .mallowbub-ai-art img { max-height:310px; }
}
@media(max-width:680px) {
  #notification-inbox.notification-inbox { top:calc(var(--topbar-h,76px) + 7px); left:8px; right:8px; width:auto; max-height:calc(100dvh - var(--topbar-h,76px) - 14px); border-radius:19px; }
  #notification-inbox .notification-inbox-head { padding:12px; }
  #notification-inbox .notification-inbox-head strong { font-size:20px; }
  #notification-inbox .notification-inbox-head-actions { width:auto; }
  #notification-inbox .notification-inbox-head-actions #browser-notification-toggle { min-width:0; }
  #notification-inbox .notification-inbox-head-actions button { min-height:36px; padding-inline:9px; font-size:9px; }
  #notification-inbox .notification-inbox-toolbar { min-height:49px; padding-inline:10px; }
  #notification-inbox .notification-list { padding:8px; }
  #notification-inbox .notification-item { min-height:66px; padding:8px 9px 8px 13px; grid-template-columns:40px minmax(0,1fr) 14px; gap:8px; }
  #notification-inbox .notification-item-icon { width:40px; height:40px; font-size:16px; }
  #notification-inbox .notification-item-copy strong { font-size:12px; }
  #notification-inbox .notification-item-copy > span { font-size:10px; }
  #detailed-notifications { left:10px; right:10px; width:auto; }
  .detailed-notification { grid-template-columns:34px minmax(0,1fr) 20px; gap:8px; padding:10px; }
  .detailed-notification-icon { width:34px; height:34px; font-size:16px; }
  .mallowbub-ai-page { min-height:calc(100dvh - var(--topbar-h,76px) - 20px); gap:15px; padding:16px; border-radius:20px; }
  .mallowbub-ai-hero { grid-template-columns:minmax(0,1fr); gap:0; }
  .mallowbub-ai-copy h1 { max-width:520px; font-size:clamp(37px,12vw,60px); }
  .mallowbub-ai-art { min-height:210px; max-height:250px; }
  .mallowbub-ai-art img { max-height:250px; }
  .mallowbub-ai-art-caption { right:0; bottom:3px; }
  .mallowbub-ai-preview { padding:14px; }
  .mallowbub-ai-preview-head { align-items:start; flex-direction:column; }
  .mallowbub-ai-feature-grid { grid-template-columns:minmax(0,1fr); }
  .mallowbub-ai-feature-grid article { grid-template-columns:36px minmax(0,1fr) auto; }
  .mallowbub-ai-feature-tag { grid-column:3; grid-row:1; align-self:center; }
  .mallowbub-ai-footer { align-items:flex-start; line-height:1.5; }
}

#notification-inbox.notification-inbox { width:min(580px,calc(100vw - 24px)); max-height:min(620px,calc(100dvh - var(--topbar-h,76px) - 24px)); }
#notification-inbox .notification-item.unread { border-left:3px solid #b582ff; padding-left:15px; background:linear-gradient(90deg,rgba(181,130,255,.14),rgba(181,130,255,.045) 48%,rgba(18,18,26,.86)); }
@media(max-width:680px) {
  #notification-inbox.notification-inbox { top:calc(var(--topbar-h,76px) + 7px); left:8px; right:8px; width:auto; max-height:calc(100dvh - var(--topbar-h,76px) - 14px); }
  #notification-inbox .notification-item.unread { padding-left:10px; }
}

/* Mallowbub composer pickers use Stelah's custom select controls with the AI purple accent. */
.mallowbub-select-wrap.mallowbub-select-model-wrap { flex:0 1 182px; }
.mallowbub-select-wrap.mallowbub-select-compact-wrap { flex:0 1 105px; }
.mallowbub-select-wrap .native-select-shell { width:0; min-width:0; flex:1 1 auto; }
.mallowbub-select-wrap .native-select-trigger { height:28px; min-width:0; padding:0 4px 0 0; gap:5px; border:0; border-radius:7px; background:transparent; color:#e2d8ec; font-size:8px; font-weight:700; box-shadow:none; }
.mallowbub-select-wrap .native-select-trigger > i { color:#a98acb; font-size:11px; }
.mallowbub-select-wrap .native-select-shell.open .native-select-trigger { border:0; background:rgba(181,130,255,.08); box-shadow:none; }
.mallowbub-select-wrap .native-select-shell.open .native-select-trigger > i { color:#c99cff; }
.mallowbub-select-wrap .native-select-trigger:focus-visible { outline:2px solid #bd83ff; outline-offset:2px; }
.mallowbub-chat-select-menu { border-color:rgba(181,130,255,.28); background:rgba(24,20,33,.985); scrollbar-color:#a76bea #261d33; }
.mallowbub-chat-select-menu .native-select-option { color:#d2c8dd; }
.mallowbub-chat-select-menu .native-select-option > i { color:#c99cff; }
.mallowbub-chat-select-menu .native-select-option.selected { background:rgba(181,130,255,.16); color:#f4eaff; }
.mallowbub-chat-select-menu .native-select-option:hover:not(:disabled) { background:rgba(181,130,255,.12); color:#fff; }
@media(max-width:640px) {
  .mallowbub-select-wrap.mallowbub-select-model-wrap { flex-basis:146px; }
  .mallowbub-select-wrap.mallowbub-select-compact-wrap { flex-basis:91px; }
}

/* Keep the composer focused; show per-model pricing only while inspecting a model. */
body:has(.mallowbub-ai-chat-page) .site-footer { display:none !important; }

/* Let the AI wallpaper continue behind the app chrome, then fade it away on other routes. */
.app-shell::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; background:linear-gradient(180deg,rgba(9,9,23,.44),rgba(10,9,25,.54)),url("icons/AIbackground.png") center / cover no-repeat; transition:opacity .32s ease; }
.app-shell.ai-route::before { opacity:1; }
.app-shell.ai-route .main-column { position:relative; z-index:1; }
.app-shell .sidebar,.app-shell .topbar { transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease; }
.app-shell.ai-route .sidebar { background:rgba(17,15,30,.56); border-right-color:rgba(209,166,255,.15); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.app-shell.ai-route .topbar { background:rgba(17,15,30,.46); border-bottom-color:rgba(209,166,255,.13); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.app-shell.ai-route .search-shell { background:rgba(28,24,45,.72); }
.mallowbub-chat-messages { width:100%; max-width:none; margin:0; padding-inline:clamp(18px,3.5vw,58px); }
.mallowbub-chat-message.is-assistant .mallowbub-message-avatar { border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.mallowbub-chat-message.is-assistant .mallowbub-message-avatar img { width:29px; height:29px; object-fit:contain; }
.mallowbub-mode-switch { display:inline-flex; align-items:center; gap:3px; padding:4px; border:1px solid rgba(204,163,255,.28); border-radius:999px; background:rgba(26,21,45,.7); box-shadow:inset 0 1px rgba(255,255,255,.05); }
.mallowbub-mode-switch button { min-width:80px; min-height:31px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:#bdb0d1; font:inherit; font-size:11px; font-weight:720; }
.mallowbub-mode-switch button.is-active { background:linear-gradient(115deg,#bf8bf1,#8055d5); color:#140d24; box-shadow:0 3px 14px rgba(160,103,235,.25); }
.mallowbub-mode-switch button:disabled { opacity:.53; cursor:not-allowed; }
.mallowbub-mode-switch button:focus-visible { outline:2px solid #e2b5ff; outline-offset:2px; }
.mallowbub-source-circles a { position:relative; }
.mallowbub-source-circles a img { position:absolute; z-index:1; inset:4px; width:17px; height:17px; background:#271d38; border-radius:3px; }
.mallowbub-source-circles a .mallowbub-source-fallback { display:block; }
@media(max-width:640px) { .mallowbub-mode-switch button { min-width:59px; padding-inline:9px; font-size:9px; } .mallowbub-chat-messages { padding-inline:12px; } }
@media(prefers-reduced-motion:reduce) { .app-shell::before,.app-shell .sidebar,.app-shell .topbar { transition:none; } }
.mallowbub-model-select-wrap > .fi-rr-brain,
.mallowbub-composer-status,
.mallowbub-composer-price,
.mallowbub-composer-foot { display:none !important; }
.mallowbub-model-hover-tooltip { position:fixed; z-index:10000; display:grid; gap:7px; min-width:0; max-width:calc(100vw - 24px); padding:11px 12px; border:1px solid rgba(194,151,240,.25); border-radius:13px; background:linear-gradient(145deg,rgba(34,27,44,.98),rgba(20,17,27,.98)); color:#d8cce7; box-shadow:0 16px 48px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.04); pointer-events:none; backdrop-filter:blur(16px); }
.mallowbub-model-hover-tooltip[hidden] { display:none; }
.mallowbub-model-cost-heading { min-width:0; display:flex; align-items:center; gap:7px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.06); }
.mallowbub-model-cost-logo { width:18px; height:18px; flex:none; display:grid; place-items:center; overflow:hidden; border:0; border-radius:0; background:transparent; color:#c69aff; font-size:11px; }
.mallowbub-model-cost-logo > img { width:100%; height:100%; display:block; object-fit:cover; }
.mallowbub-model-cost-heading > strong { min-width:0; overflow:hidden; color:#f0e8f8; font-size:8px; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-cost-row { min-width:0; display:grid; grid-template-columns:15px minmax(0,1fr) auto; align-items:center; gap:6px; color:#a99db6; font-size:8px; line-height:1.35; }
.mallowbub-model-cost-icon { width:14px; height:14px; display:grid; place-items:center; }
.mallowbub-model-cost-icon > img { width:100%; height:100%; object-fit:contain; }
.mallowbub-model-cost-row > strong { color:#eee6f5; font-size:8px; font-weight:720; font-variant-numeric:tabular-nums; }

/* Mallowbub's new workspace composition: starfield, roomy model chooser, and custom control menus. */
.mallowbub-ai-chat-page {
  grid-template-columns:minmax(232px,17%) minmax(0,1fr);
  background:linear-gradient(180deg,rgba(9,9,23,.54),rgba(10,9,25,.63)),url("icons/AIbackground.png") center / cover no-repeat,#100e20;
}
.mallowbub-ai-chat-sidebar { background:linear-gradient(180deg,rgba(14,13,31,.89),rgba(14,12,28,.78)); border-right-color:rgba(187,151,255,.14); }
.mallowbub-chat-brand { min-height:58px; padding-inline:7px; }
.mallowbub-chat-brand-icon { width:46px; height:46px; border-radius:15px; background:rgba(150,116,211,.13); }
.mallowbub-chat-brand-icon img { width:40px; height:40px; }
.mallowbub-new-chat { min-height:45px; border-radius:14px; background:linear-gradient(110deg,rgba(218,157,255,.9),rgba(139,82,247,.82)); color:#211430; box-shadow:0 5px 20px rgba(170,102,255,.19); font-size:11px; }
.mallowbub-new-chat:hover:not(:disabled) { background:linear-gradient(110deg,#e2b0ff,#a66bff); }
.mallowbub-chat-privacy { background:rgba(24,21,46,.68); border-color:rgba(193,157,250,.16); }
.mallowbub-ai-chat-main { background:linear-gradient(180deg,rgba(12,11,30,.13),rgba(13,11,29,.25)); }
.mallowbub-chat-topbar { min-height:88px; padding:13px clamp(22px,3vw,42px); border-bottom-color:rgba(191,160,255,.12); }
.mallowbub-chat-topbar .mallowbub-ai-badge { min-height:28px; padding:0 12px; border-color:rgba(190,135,255,.43); background:rgba(105,67,158,.2); color:#d9adff; font-size:8px; }
.mallowbub-chat-topbar h1 { margin-top:7px; font-size:clamp(17px,2vw,23px); }
.mallowbub-account-avatar-button { width:47px; height:47px; flex:none; display:grid; place-items:center; padding:2px; border:1px solid rgba(193,157,250,.27); border-radius:50%; background:rgba(30,25,52,.75); color:#d5b7fa; cursor:pointer; transition:border-color .16s,transform .16s; }
.mallowbub-account-avatar-button:hover { transform:translateY(-1px); border-color:rgba(215,175,255,.68); }
.mallowbub-account-avatar-button > .profile-avatar { width:40px; height:40px; border:0; border-radius:50%; font-size:13px; }
.mallowbub-account-avatar-button > .profile-avatar img { width:100%; height:100%; object-fit:cover; }
.mallowbub-chat-content { background:radial-gradient(ellipse at 50% 36%,rgba(23,19,55,.15),transparent 66%); }
.mallowbub-chat-welcome { justify-content:flex-start; padding:38px 26px 20px; }
.mallowbub-welcome-art { width:128px; height:122px; margin-bottom:8px; background:radial-gradient(circle,rgba(189,129,255,.22),rgba(110,81,203,.06) 65%,transparent 71%); }
.mallowbub-welcome-art img { width:112px; height:112px; }
.mallowbub-chat-welcome .mallowbub-ai-badge { min-height:30px; padding:0 14px; border-color:rgba(189,137,255,.26); background:rgba(52,36,80,.45); color:#d9b7ff; font-size:8px; }
.mallowbub-chat-welcome h2 { margin-top:13px; font-size:clamp(27px,3.4vw,40px); }
.mallowbub-chat-welcome > p { max-width:580px; font-size:12px; }
.mallowbub-prompt-suggestions { gap:9px; margin-top:20px; }
.mallowbub-prompt-suggestions button { min-height:38px; padding:0 15px; border-color:rgba(193,157,250,.2); background:rgba(23,20,49,.62); font-size:10px; }
.mallowbub-composer { position:relative; z-index:4; width:min(1068px,calc(100% - 52px)); margin:0 auto 12px; padding:10px 12px; border-color:rgba(197,153,255,.36); border-radius:23px; background:linear-gradient(145deg,rgba(22,19,43,.96),rgba(17,15,37,.97)); box-shadow:0 0 0 1px rgba(129,87,205,.08),0 12px 44px rgba(5,4,17,.38),0 0 36px rgba(117,70,190,.1); }
.mallowbub-composer-tools { gap:9px; padding-bottom:8px; }
.mallowbub-select-wrap.mallowbub-model-select-wrap { flex:0 1 auto; min-height:34px; padding-left:8px; border-color:rgba(192,146,249,.2); border-radius:12px; background:rgba(255,255,255,.025); }
.mallowbub-model-picker-trigger { max-width:min(260px,36vw); min-height:32px; gap:8px; font-size:10px; }
.mallowbub-model-picker-menu { left:34px; bottom:calc(100% - 20px); width:min(420px,calc(100vw - 28px)); max-height:min(510px,66vh); padding:10px; border-color:rgba(195,150,255,.42); border-radius:19px; background:rgba(24,20,43,.985); box-shadow:0 18px 60px rgba(0,0,0,.58),0 0 28px rgba(119,67,186,.14); }
.mallowbub-model-menu-header { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 8px 8px; border-bottom:1px solid rgba(255,255,255,.07); }
.mallowbub-model-menu-header strong { color:#f0e9f7; font-size:12px; font-weight:750; }
.mallowbub-model-menu-header span { color:#c69aff; font-size:9px; }
.mallowbub-model-group + .mallowbub-model-group { margin-top:9px; padding-top:9px; }
.mallowbub-model-group-heading { gap:9px; padding:6px 8px 8px; color:#bfb0d5; font-size:9px; }
.mallowbub-model-option { min-height:46px; gap:10px; padding:7px 9px; border-radius:12px; font-size:10px; }
.mallowbub-model-option-icon { width:26px; height:26px; font-size:17px; }
.mallowbub-model-option-copy { min-width:0; flex:1; display:grid; gap:3px; }
.mallowbub-model-option-copy strong { overflow:hidden; color:#f0e9f7; font-size:10px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-option-copy small { overflow:hidden; color:#a79ab9; font-size:8px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-tag { max-width:110px; overflow:hidden; padding:4px 8px; border:1px solid rgba(205,172,255,.17); border-radius:999px; background:rgba(171,130,225,.13); color:#dfc7ff; font-size:8px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.mallowbub-model-hover-tooltip { gap:11px; padding:15px; border-color:rgba(203,164,255,.48); border-radius:17px; background:linear-gradient(145deg,rgba(33,27,53,.99),rgba(19,17,36,.99)); box-shadow:0 20px 62px rgba(0,0,0,.58),0 0 30px rgba(127,75,191,.16); }
.mallowbub-model-cost-heading { gap:8px; padding-bottom:9px; }
.mallowbub-model-cost-logo { width:30px; height:30px; font-size:18px; }
.mallowbub-model-cost-heading > strong { flex:1; font-size:11px; }
.mallowbub-model-cost-heading .mallowbub-model-tag { flex:none; }
.mallowbub-model-cost-bio { min-height:50px; color:#bdb1ce; font-size:12px; line-height:1.55; }
.mallowbub-model-cost-row { min-height:24px; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; font-size:10px; }
.mallowbub-model-cost-icon { width:17px; height:17px; }
.mallowbub-model-cost-row > strong { font-size:10px; }
.mallowbub-model-usage-row .mallowbub-model-cost-icon { color:#c69aff; }
.mallowbub-model-image-usage-row .mallowbub-model-cost-icon { color:#e0a4f4; }
.mallowbub-model-speed-row .mallowbub-model-cost-icon { color:#d4a9ff; }
.mallowbub-model-cost-icon > i.fi { font-size:13px; line-height:1; }
.mallowbub-choice-picker { position:relative; min-width:0; flex:none; }
.mallowbub-choice-trigger { min-height:34px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid rgba(193,157,250,.2); border-radius:12px; background:rgba(255,255,255,.025); color:#e5d9f0; font:inherit; font-size:9px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .16s,border-color .16s; }
.mallowbub-choice-trigger:hover:not(:disabled),.mallowbub-choice-trigger[aria-expanded="true"] { border-color:rgba(203,160,255,.64); background:rgba(117,76,177,.17); }
.mallowbub-choice-trigger > .fi:first-child { color:#cfa5ff; font-size:13px; }
.mallowbub-choice-trigger > .mallowbub-choice-caret { color:#b99ad9; font-size:12px; }
.mallowbub-choice-trigger:disabled { opacity:.55; cursor:wait; }
.mallowbub-web-picker .mallowbub-choice-trigger { min-width:176px; }
.mallowbub-effort-picker .mallowbub-choice-trigger { min-width:118px; }
.mallowbub-choice-menu { position:absolute; z-index:130; left:0; bottom:calc(100% + 12px); width:min(430px,calc(100vw - 26px)); padding:12px; border:1px solid rgba(199,153,255,.49); border-radius:19px; background:rgba(22,19,40,.985); box-shadow:0 18px 60px rgba(0,0,0,.59),0 0 34px rgba(119,69,191,.18); backdrop-filter:blur(22px); }
.mallowbub-choice-menu[hidden] { display:none; }
.mallowbub-choice-menu > header { display:flex; align-items:center; gap:11px; padding:4px 5px 13px; }
.mallowbub-choice-header-icon { width:42px; height:42px; flex:none; display:grid; place-items:center; border:1px solid rgba(196,149,255,.27); border-radius:14px; background:rgba(145,95,208,.19); color:#d0a6ff; font-size:20px; }
.mallowbub-choice-menu > header > span:nth-child(2) { min-width:0; display:grid; gap:4px; }
.mallowbub-choice-menu > header strong { color:#f2ebfb; font-size:13px; }
.mallowbub-choice-menu > header small { color:#aaa0b9; font-size:9px; line-height:1.4; }
.mallowbub-choice-info { margin-left:auto; color:#bd9bea; font-size:12px; }
.mallowbub-choice-option { width:100%; min-height:57px; display:grid; grid-template-columns:42px minmax(0,1fr) 24px; align-items:center; gap:10px; margin-top:6px; padding:7px 10px; border:1px solid rgba(190,153,242,.08); border-radius:14px; background:rgba(255,255,255,.018); color:#eee7f6; text-align:left; font:inherit; cursor:pointer; transition:background .14s,border-color .14s,transform .14s; }
.mallowbub-choice-option:hover { transform:translateY(-1px); border-color:rgba(202,160,255,.36); background:rgba(149,102,207,.13); }
.mallowbub-choice-option.is-selected { border-color:rgba(208,158,255,.72); background:linear-gradient(105deg,rgba(150,94,221,.29),rgba(92,62,149,.18)); box-shadow:inset 0 0 0 1px rgba(203,153,255,.1); }
.mallowbub-choice-option-icon { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(201,162,249,.12); border-radius:13px; background:rgba(146,116,188,.11); color:#d3b3ff; font-size:17px; }
.mallowbub-choice-option-icon.effort-light { color:#65d5ff; }
.mallowbub-choice-option-icon.effort-balanced { color:#77e1a5; }
.mallowbub-choice-option-icon.effort-heavy { color:#d09aff; }
.mallowbub-choice-option-icon.effort-max { color:#ffd374; }
.mallowbub-choice-option-icon.effort-ultra { color:#ff8cae; }
.mallowbub-choice-option > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.mallowbub-choice-option strong { color:#f1eafa; font-size:11px; }
.mallowbub-choice-option small { color:#aaa0b9; font-size:9px; line-height:1.35; }
.mallowbub-choice-check { display:grid; place-items:center; width:23px; height:23px; border:1px solid #64557b; border-radius:50%; color:transparent; font-size:11px; }
.mallowbub-choice-option.is-selected .mallowbub-choice-check { border-color:#d4a7ff; background:#d0a0ff; color:#29163d; }
.mallowbub-effort-menu { width:min(330px,calc(100vw - 26px)); }
.mallowbub-effort-menu .mallowbub-choice-option { min-height:52px; grid-template-columns:36px minmax(0,1fr) 24px; padding:6px 8px; }
.mallowbub-effort-menu .mallowbub-choice-option-icon { width:34px; height:34px; border:0; background:transparent; font-size:18px; }
.mallowbub-composer-input-row { gap:10px; }
.mallowbub-attach-button,.mallowbub-send-button { width:42px; height:42px; border-radius:13px; font-size:16px; }
.mallowbub-stop-button { width:42px; height:42px; border-radius:13px; font-size:16px; }
.mallowbub-composer-input-row textarea { min-height:42px; font-size:12px; }
.mallowbub-composer-foot { display:none !important; }
body:has(.mallowbub-ai-chat-page) .site-footer { display:none !important; }
.main-content:has(.mallowbub-ai-chat-page),#main-content:has(.mallowbub-ai-chat-page) { overflow:hidden; }
@media (max-width:900px) {
  .mallowbub-ai-chat-page { grid-template-columns:minmax(200px,24%) minmax(0,1fr); }
  .mallowbub-composer { width:calc(100% - 30px); }
  .mallowbub-model-picker-menu { width:min(390px,calc(100vw - 24px)); }
}
@media (max-width:640px) {
  .mallowbub-ai-chat-page { grid-template-columns:minmax(0,1fr); grid-template-rows:145px minmax(0,1fr); }
  .mallowbub-ai-chat-sidebar { background:rgba(14,13,31,.96); }
  .mallowbub-chat-topbar { min-height:64px; }
  .mallowbub-account-avatar-button { width:40px; height:40px; }
  .mallowbub-account-avatar-button > .profile-avatar { width:34px; height:34px; }
  .mallowbub-composer { width:calc(100% - 16px); margin-bottom:8px; padding:8px; }
  .mallowbub-composer-tools { gap:4px; }
  .mallowbub-select-wrap.mallowbub-model-select-wrap { min-height:30px; }
  .mallowbub-model-picker-trigger { max-width:43vw; min-height:28px; font-size:8px; }
  .mallowbub-choice-trigger { min-height:30px; gap:4px; padding-inline:7px; font-size:8px; }
  .mallowbub-web-picker .mallowbub-choice-trigger { min-width:0; }
  .mallowbub-effort-picker .mallowbub-choice-trigger { min-width:0; }
  .mallowbub-choice-menu { left:auto; right:0; width:min(430px,calc(100vw - 20px)); }
  .mallowbub-effort-menu { width:min(330px,calc(100vw - 20px)); }
  .mallowbub-model-picker-menu { left:-8px; width:min(420px,calc(100vw - 18px)); }
  .mallowbub-model-hover-tooltip { z-index:10000; }
}
.mallowbub-chat-brand strong { font-size:15px; }
.mallowbub-chat-brand small { font-size:10px; }
.mallowbub-new-chat { font-size:12px; }
.mallowbub-history-label { font-size:9px; }
.mallowbub-model-picker-menu { padding:8px; }
.mallowbub-model-group + .mallowbub-model-group { margin-top:6px; padding-top:6px; }
.mallowbub-model-group-heading { padding:5px 7px 6px; font-size:10px; }
.mallowbub-model-menu-header { min-height:36px; }
.mallowbub-model-option { min-height:36px; padding:4px 8px; }
.mallowbub-model-option-copy strong { font-size:12px; }
.mallowbub-model-option-copy small { font-size:9px; }
.mallowbub-model-tag { font-size:9px; }
.mallowbub-model-cost-bio { min-height:50px; font-size:12px; line-height:1.58; }
.mallowbub-model-cost-row { font-size:11px; }
.mallowbub-model-cost-row > strong { font-size:11px; }
.mallowbub-choice-menu > header strong { font-size:14px; }
.mallowbub-choice-menu > header small { font-size:10px; }
.mallowbub-choice-option { min-height:61px; }
.mallowbub-choice-option strong { font-size:12px; }
.mallowbub-choice-option small { font-size:10px; }
.mallowbub-effort-menu .mallowbub-choice-option { min-height:55px; }
.mallowbub-choice-trigger { font-size:10px; }
.mallowbub-composer-input-row textarea { font-size:13px; }
.mallowbub-web-picker .mallowbub-choice-menu { left:-56px; bottom:calc(100% + 32px); }
.mallowbub-web-picker .mallowbub-choice-option { min-height:68px; }
@media (max-width:640px) {
  .mallowbub-chat-welcome { justify-content:center; }
  .mallowbub-web-picker .mallowbub-choice-menu { left:auto; right:0; bottom:calc(100% + 16px); }
  .mallowbub-web-picker .mallowbub-choice-option { min-height:57px; }
}
.mallowbub-effort-menu { width:min(310px,calc(100vw - 26px)); }
.mallowbub-effort-menu > header { padding-bottom:8px; }
.mallowbub-effort-menu .mallowbub-choice-option { min-height:39px; margin-top:5px; padding:2px 8px; }
.mallowbub-effort-menu .mallowbub-choice-option-icon { width:30px; height:30px; }

/* The selected effort is reflected by both the composer control and menu header. */
.mallowbub-effort-picker .mallowbub-choice-trigger > .effort-selected-icon.effort-selected-light { color:#65d5ff; }
.mallowbub-effort-picker .mallowbub-choice-trigger > .effort-selected-icon.effort-selected-balanced { color:#77e1a5; }
.mallowbub-effort-picker .mallowbub-choice-trigger > .effort-selected-icon.effort-selected-heavy { color:#d09aff; }
.mallowbub-effort-picker .mallowbub-choice-trigger > .effort-selected-icon.effort-selected-max { color:#ffd374; }
.mallowbub-effort-picker .mallowbub-choice-trigger > .effort-selected-icon.effort-selected-ultra { color:#ff8cae; }
.mallowbub-effort-menu .mallowbub-choice-header-icon.effort-selected-light { color:#65d5ff; border-color:rgba(101,213,255,.3); background:rgba(101,213,255,.12); }
.mallowbub-effort-menu .mallowbub-choice-header-icon.effort-selected-balanced { color:#77e1a5; border-color:rgba(119,225,165,.3); background:rgba(119,225,165,.12); }
.mallowbub-effort-menu .mallowbub-choice-header-icon.effort-selected-heavy { color:#d09aff; border-color:rgba(208,154,255,.3); background:rgba(208,154,255,.12); }
.mallowbub-effort-menu .mallowbub-choice-header-icon.effort-selected-max { color:#ffd374; border-color:rgba(255,211,116,.3); background:rgba(255,211,116,.12); }
.mallowbub-effort-menu .mallowbub-choice-header-icon.effort-selected-ultra { color:#ff8cae; border-color:rgba(255,140,174,.3); background:rgba(255,140,174,.12); }
body:has(.mallowbub-ai-chat-page) .site-footer { display:none !important; }
.direct-message-form,.global-chat-form,.cloud-player-composer { position:relative; }
.chat-emoji-suggestions { position:absolute; z-index:26020; left:10px; bottom:calc(100% + 7px); width:min(270px,calc(100vw - 30px)); max-height:270px; overflow:auto; display:grid; gap:3px; padding:6px; border:1px solid #b989ee88; border-radius:13px; background:#1c1528f7; box-shadow:0 14px 32px #0009; }
.chat-emoji-suggestions[hidden] { display:none!important; }
.chat-emoji-suggestions button { width:100%; display:flex; align-items:center; gap:10px; padding:5px 9px; border:0; border-radius:8px; background:transparent; color:#f3eaff; text-align:left; cursor:pointer; }
.chat-emoji-suggestions button span { font-size:20px; line-height:1.3; }
.chat-emoji-suggestions button small { font-size:11px; }
.chat-emoji-suggestions button[aria-selected="true"],.chat-emoji-suggestions button:hover { background:#7646ad77; }
.call-device-settings .call-device-summary { min-height:38px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 9px; border:1px solid #b789ee55; border-radius:11px; background:#21182d; color:#ddc8f4; cursor:pointer; font-size:9px; }
.social-call-panel:has(.call-device-settings.is-open) { contain:initial; }
.global-voice-panel header { cursor:grab; touch-action:none; }
.global-voice-panel header:active { cursor:grabbing; }
.global-voice-settings { display:grid; gap:8px; min-height:0; overflow:auto; padding:8px; border:1px solid #b989ee44; border-radius:11px; background:#130f1ccc; }
.global-voice-settings[hidden] { display:none!important; }
.global-voice-settings label { display:grid; grid-template-columns:1fr auto; gap:4px 8px; color:#e6d7f7; font-size:10px; }
.global-voice-settings label input,.global-voice-settings label select { grid-column:1/-1; width:100%; accent-color:#b989ee; }
.global-voice-settings label select { min-height:30px; padding:4px 7px; border:1px solid #b989ee66; border-radius:8px; color:#f3eaff; background:#21182d; }
.global-voice-settings output { color:#caa5f3; }
.global-voice-panel.is-minimized .global-voice-settings { display:none!important; }
.player-settings-controller-icon,.controller-card-icon { background:transparent!important; border:0!important; box-shadow:none!important; }
.player-settings-controller-icon img { display:block; background:transparent; border:0; box-shadow:none; }
.stream-stage.remote-cursor-active.cloud-menu-open,.stream-stage.remote-cursor-active.cloud-menu-open .stream-video { cursor:default; }
.stream-stage.cloud-menu-open .remote-game-cursor { display:none!important; }
.stream-stage.external-browser-mode,
.stream-stage.external-browser-mode .stream-video { cursor:default!important; }
.stream-stage.external-browser-mode .remote-game-cursor { display:none!important; }
.global-voice-panel.has-soundboard { width:min(590px,calc(100vw - 24px)); }
.global-soundboard { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:9px; min-height:155px; max-height:235px; }
.global-soundboard[hidden] { display:none!important; }
.global-soundboard-list { min-height:0; overflow:auto; display:grid; align-content:start; gap:4px; padding:5px; border:1px solid #b989ee44; border-radius:11px; background:#130f1ccc; color:#cdbce0; font-size:10px; }
.global-soundboard-list button { width:100%; display:flex; align-items:center; gap:7px; text-align:left; }
.global-soundboard-list button strong { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-soundboard-list button.is-playing { border-color:#d8a6ff; background:#603984; }
.global-soundboard-icon { width:28px; height:28px; flex:none; display:grid; place-items:center; color:#d8a6ff; }
.global-soundboard-icon img { width:100%; height:100%; object-fit:contain; border-radius:5px; }
.global-soundboard-detail { min-height:0; overflow:auto; display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid #b989ee44; border-radius:11px; background:#130f1ccc; }
.global-soundboard-detail .global-soundboard-icon { width:44px; height:44px; }
.global-soundboard-detail strong { font-size:12px; }
.global-soundboard-detail p { font-size:10px; }
.global-soundboard-detail small { color:#bca9d2; font-size:9px; }
@media(max-width:500px) { .global-soundboard { grid-template-columns:1fr; max-height:300px; }.global-soundboard-detail { max-height:110px; } }
.global-voice-panel.is-minimized .global-soundboard { display:none!important; }
.call-device-menu .call-voice-slider { display:grid; gap:5px; padding-top:7px; border-top:1px solid #b989ee33; }
.call-device-menu .call-voice-slider > span { display:flex; justify-content:space-between; gap:8px; }
.call-device-menu .call-voice-slider input { width:100%; accent-color:#b989ee; }
.call-device-menu .call-voice-slider output { color:#d3aeff; }

/* Keep every Global Chat composer action on the same row, including GIF. */
#global-chat-form { display:grid!important; grid-template-columns:minmax(0,1fr) 42px 42px minmax(82px,auto)!important; align-items:center; gap:9px; }
#global-chat-form > .chat-attachment.is-pending { grid-column:1/-1!important; }
#global-chat-form #global-chat-input { grid-column:1; min-width:0; width:100%; }
#global-chat-form #global-chat-image-input[hidden] { display:none!important; }
#global-chat-form #global-chat-image-button { grid-column:2; width:42px; height:42px; }
#global-chat-form #global-chat-gif-button { grid-column:3; width:42px; height:42px; }
#global-chat-form > .primary-btn { grid-column:4; min-width:82px; width:auto; height:42px; white-space:nowrap; }
@media(max-width:600px) {
  #global-chat-form { grid-template-columns:minmax(0,1fr) 38px 38px 44px!important; gap:6px; }
  #global-chat-form #global-chat-image-button,#global-chat-form #global-chat-gif-button { width:38px; height:38px; }
  #global-chat-form > .primary-btn { min-width:44px; width:44px; height:38px; padding:0; font-size:0; }
  #global-chat-form > .primary-btn i { font-size:15px; }
}

/* Global voice room controls share the website's dark violet styling. */
.global-voice-panel { width:min(390px,calc(100vw - 24px)); max-height:min(78dvh,640px); display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden; border:1px solid rgba(190,145,255,.48); border-radius:22px; background:linear-gradient(158deg,rgba(39,27,58,.99),rgba(17,13,28,.99) 56%,rgba(24,17,39,.99)); box-shadow:0 28px 80px rgba(0,0,0,.67),inset 0 1px rgba(255,255,255,.09); color:#f6eeff; backdrop-filter:blur(20px); }
.global-voice-panel button { appearance:none; -webkit-appearance:none; border:1px solid rgba(198,157,255,.25); border-radius:12px; background:rgba(187,132,255,.10); color:#f3eaff; font-size:11px; font-weight:700; transition:background .15s,border-color .15s,transform .15s; }
.global-voice-panel button:hover:not(:disabled) { border-color:rgba(213,178,255,.7); background:rgba(183,126,255,.20); }
.global-voice-panel button:focus-visible { outline:2px solid #d7aaff; outline-offset:2px; }
.global-voice-panel button:disabled { opacity:.55; cursor:not-allowed; }
.global-voice-panel .global-voice-header { flex:none; min-height:69px; display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(202,166,255,.14); background:linear-gradient(90deg,rgba(166,104,255,.14),transparent); cursor:grab; touch-action:none; }
.global-voice-panel .global-voice-header:active { cursor:grabbing; }
.global-voice-heading { min-width:0; flex:1; display:flex; align-items:center; gap:10px; }
.global-voice-heading > span:last-child { min-width:0; display:grid; gap:3px; }
.global-voice-heading strong { font-size:14px; letter-spacing:.01em; }
.global-voice-heading small { font-size:10px; color:#c0add6; }
.global-voice-brand { width:39px; height:39px; flex:none; display:grid; place-items:center; border:1px solid rgba(215,168,255,.46); border-radius:13px; background:linear-gradient(145deg,#8e58d0,#49316d); color:white; box-shadow:0 7px 18px rgba(148,82,230,.25); font-size:17px; }
.global-voice-panel .global-voice-minimize { width:32px; height:32px; min-width:32px; min-height:32px; padding:0; background:rgba(255,255,255,.05); }
.global-voice-status-strip { flex:none; min-height:34px; display:flex; align-items:center; gap:9px; padding:7px 15px; border-bottom:1px solid rgba(202,166,255,.10); background:rgba(9,7,17,.24); }
.global-voice-status-strip p { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cbbbdb; font-size:10px; }
.global-voice-section-title { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 15px 7px; color:#ad94c8; font-size:9px; font-weight:800; letter-spacing:.13em; }
.global-voice-section-title small { min-width:22px; padding:3px 6px; border:1px solid rgba(194,152,249,.24); border-radius:50px; background:rgba(194,152,249,.09); color:#d9c3f1; text-align:center; font-size:10px; letter-spacing:0; }
.global-voice-panel .global-voice-roster { min-height:55px; flex:1 1 auto; display:grid; align-content:start; gap:7px; overflow:auto; padding:0 12px 12px; scrollbar-width:thin; scrollbar-color:#8465a5 transparent; }
.global-voice-roster::-webkit-scrollbar,.global-voice-settings::-webkit-scrollbar,.global-soundboard-list::-webkit-scrollbar { width:6px; }
.global-voice-roster::-webkit-scrollbar-thumb,.global-voice-settings::-webkit-scrollbar-thumb,.global-soundboard-list::-webkit-scrollbar-thumb { border-radius:6px; background:#8465a5; }
.global-voice-member { min-height:50px; padding:7px 10px; border-color:rgba(198,159,255,.16); border-radius:13px; background:rgba(255,255,255,.035); }
.global-voice-member.is-self { border-color:rgba(190,133,255,.38); background:rgba(160,103,234,.13); }
.global-voice-member-avatar { width:37px; height:37px; background:linear-gradient(140deg,#754da9,#42305e); font-size:13px; }
.global-voice-member-identity strong { font-size:11px; }
.global-voice-member-identity small { color:#bca9d1; font-size:9px; }
.global-voice-member-live { width:9px; height:9px; background:#48dda1; box-shadow:0 0 10px rgba(72,221,161,.56); }
.global-voice-member-live[data-state="muted"] { background:#ffbb65; box-shadow:0 0 10px rgba(255,187,101,.52); }
.global-voice-member-live[data-state="deafened"] { background:#f07eae; box-shadow:0 0 10px rgba(240,126,174,.52); }
.global-voice-member-live[data-state="away"] { background:#8690aa; box-shadow:0 0 8px rgba(134,144,170,.32); }
.global-voice-member-live[data-state="connecting"] { background:#a989e9; box-shadow:0 0 8px rgba(169,137,233,.42); }
.global-voice-panel .global-voice-toolbar { flex:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(57px,.85fr); align-items:stretch; gap:6px; padding:11px 12px 12px; border-top:1px solid rgba(202,166,255,.15); background:rgba(10,8,18,.45); }
.global-voice-toolbar button { min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:5px 3px; text-align:center; }
.global-voice-toolbar button i { font-size:15px; line-height:1; }
.global-voice-toolbar button span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.global-voice-toolbar [aria-pressed="true"] { border-color:rgba(237,170,196,.64); background:rgba(221,100,146,.19); color:#ffe0ed; }
.global-voice-toolbar [aria-expanded="true"] { border-color:rgba(205,155,255,.67); background:rgba(169,106,237,.23); }
.global-voice-panel .global-voice-toolbar [data-global-panel-leave] { border-color:rgba(237,122,157,.55); background:rgba(149,50,85,.30); color:#ffe3eb; }
.global-voice-panel .global-voice-toolbar [data-global-panel-leave]:hover { background:rgba(177,59,100,.45); }
.global-voice-panel .global-voice-settings { flex:none; max-height:min(42dvh,330px); min-height:0; display:grid; gap:13px; overflow:auto; margin:0 12px 12px; padding:13px; border:1px solid rgba(195,147,255,.28); border-radius:15px; background:rgba(14,10,25,.82); scrollbar-width:thin; scrollbar-color:#8465a5 transparent; }
.global-voice-settings[hidden],.global-soundboard[hidden] { display:none!important; }
.global-voice-subhead { display:flex; align-items:center; gap:9px; padding-bottom:2px; }
.global-voice-subhead > i { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:rgba(174,113,242,.18); color:#d2aaff; font-size:14px; }
.global-voice-subhead > span { display:grid; gap:2px; }
.global-voice-subhead strong { font-size:11px; }
.global-voice-subhead small { color:#b7a5c8; font-size:9px; }
.global-voice-settings .global-voice-slider { display:grid; grid-template-columns:1fr; gap:8px; color:#eee3fb; font-size:10px; }
.global-voice-slider > span { display:flex; justify-content:space-between; gap:8px; }
.global-voice-settings output { color:#d7afff; font-variant-numeric:tabular-nums; font-weight:800; }
.global-voice-settings input[type="range"] { appearance:none; -webkit-appearance:none; width:100%; height:6px; margin:3px 0; border:0; border-radius:99px; outline:0; background:linear-gradient(90deg,#ba83fb var(--voice-progress,0%),#4b3a60 var(--voice-progress,0%)); cursor:pointer; }
.global-voice-settings input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; border:3px solid #f5e6ff; border-radius:50%; background:#a461e8; box-shadow:0 0 0 3px rgba(181,122,255,.24); }
.global-voice-settings input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:3px solid #f5e6ff; border-radius:50%; background:#a461e8; box-shadow:0 0 0 3px rgba(181,122,255,.24); }
.global-voice-settings input[type="range"]:focus-visible { outline:2px solid #d7aaff; outline-offset:5px; }
.global-voice-route { display:grid; gap:7px; position:relative; color:#eee3fb; font-size:10px; }
.global-voice-route > span { font-weight:700; }
.global-voice-route > button { min-height:39px; display:flex; align-items:center; gap:8px; padding:0 10px; text-align:left; }
.global-voice-route > button [data-voice-route-label] { flex:1; }
.global-voice-route > button > i:first-child { color:#d4aaff; }
.global-voice-route-options { display:grid; gap:5px; padding:5px; border:1px solid rgba(192,144,255,.32); border-radius:11px; background:#1b142b; box-shadow:0 10px 22px rgba(0,0,0,.25); }
.global-voice-route-options[hidden] { display:none!important; }
.global-voice-route-options button { width:100%; display:grid; gap:3px; padding:8px 10px; text-align:left; }
.global-voice-route-options button[aria-selected="true"] { border-color:#c995ff; background:rgba(173,106,247,.24); }
.global-voice-route-options strong { font-size:10px; }.global-voice-route-options small { color:#bda8d4; font-size:9px; }
.global-voice-panel .global-soundboard { flex:none; min-height:175px; max-height:min(43dvh,300px); margin:0 12px 12px; }
.global-soundboard-list,.global-soundboard-detail { border-color:rgba(195,147,255,.28); border-radius:13px; background:rgba(14,10,25,.82); scrollbar-width:thin; scrollbar-color:#8465a5 transparent; }
.global-soundboard-list button { min-height:43px; background:rgba(180,126,243,.08); }
.global-soundboard-list button.is-playing { border-color:#d8a6ff; background:rgba(155,96,220,.35); }
.global-soundboard-icon { width:30px; height:30px; }
.global-voice-panel.is-minimized { width:min(240px,calc(100vw - 24px)); max-height:none; padding:0; }
.global-voice-panel.is-minimized > :not(.global-voice-header) { display:none!important; }
@media(max-width:500px) {
  .global-voice-panel { right:12px; bottom:12px; width:min(360px,calc(100vw - 24px)); max-height:min(78dvh,590px); }
  .global-voice-panel.has-soundboard { width:min(360px,calc(100vw - 24px)); }
  .global-soundboard { grid-template-columns:1fr; }
  .global-soundboard-detail { max-height:105px; }
}

/* Global voice soundboard: library, selected sound, and a host-backed add form. */
.global-voice-panel.has-soundboard { width:min(650px,calc(100vw - 24px)); height:min(720px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); }
.global-voice-panel.has-soundboard.is-minimized { width:min(240px,calc(100vw - 24px)); height:auto; max-height:none; }
.global-voice-panel.has-soundboard .global-voice-roster { flex:0 1 auto; min-height:0; max-height:116px; }
.global-voice-panel.has-soundboard .global-soundboard { flex:1 1 0; min-height:0; max-height:none; }
.global-voice-panel .global-soundboard { display:flex; flex-direction:column; gap:0; min-height:0; max-height:min(54dvh,410px); margin:0 12px 12px; overflow:hidden; border:1px solid rgba(202,160,255,.38); border-radius:17px; background:linear-gradient(155deg,rgba(41,28,62,.96),rgba(16,12,28,.97)); box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 35px rgba(0,0,0,.24); }
.global-soundboard-head { flex:none; min-height:64px; display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(202,160,255,.17); background:linear-gradient(100deg,rgba(174,110,255,.18),transparent 75%); }
.global-soundboard-head-icon { width:37px; height:37px; flex:none; display:grid; place-items:center; border:1px solid rgba(225,185,255,.38); border-radius:12px; background:linear-gradient(135deg,#9258d2,#4d326d); color:white; font-size:16px; box-shadow:0 5px 16px rgba(142,82,213,.23); }
.global-soundboard-head-copy { min-width:0; flex:1; display:grid; gap:3px; }
.global-soundboard-head-copy strong { font-size:13px; letter-spacing:.01em; }
.global-soundboard-head-copy small { color:#bda9d3; font-size:10px; }
.global-voice-panel .global-soundboard-head [data-soundboard-add] { display:flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:5px 11px; border-color:rgba(220,173,255,.58); background:linear-gradient(135deg,rgba(176,108,244,.68),rgba(116,67,192,.66)); color:#fff; font-size:11px; }
.global-soundboard-head [data-soundboard-add][hidden],.global-soundboard-browser[hidden],.global-soundboard-add-form[hidden] { display:none!important; }
.global-soundboard-browser { flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:0; min-height:0; height:auto; }
.global-voice-panel .global-soundboard-list { min-height:0; display:grid; align-content:start; gap:6px; overflow:auto; padding:10px; border:0; border-right:1px solid rgba(202,160,255,.16); border-radius:0; background:transparent; }
.global-soundboard-row { min-width:0; display:flex; align-items:center; gap:5px; padding:4px; border:1px solid rgba(194,149,246,.14); border-radius:12px; background:rgba(232,196,255,.045); transition:border-color .15s,background .15s; }
.global-soundboard-row:hover,.global-soundboard-row.is-selected { border-color:rgba(204,154,255,.55); background:rgba(165,103,230,.18); }
.global-soundboard-row.is-playing { border-color:#d7a6ff; box-shadow:inset 0 0 0 1px rgba(215,166,255,.16); }
.global-voice-panel .global-soundboard-row button { min-width:0; min-height:39px; border:0; background:none; }
.global-voice-panel .global-soundboard-row button:hover { border:0; background:rgba(222,180,255,.10); }
.global-soundboard-select { flex:1; display:flex; align-items:center; gap:9px; text-align:left; padding:4px; }
.global-soundboard-row-copy { min-width:0; display:grid; gap:2px; }
.global-soundboard-row-copy strong,.global-soundboard-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-soundboard-row-copy strong { font-size:11px; }.global-soundboard-row-copy small { color:#baa5d0; font-size:9px; font-weight:500; }
.global-soundboard-icon { width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid rgba(204,159,255,.22); border-radius:10px; background:rgba(177,119,240,.15); color:#d7adff; font-size:15px; overflow:hidden; }
.global-soundboard-icon img { width:100%; height:100%; border-radius:0; object-fit:cover; }
.global-voice-panel .global-soundboard-row .global-soundboard-play { width:35px; min-width:35px; min-height:35px; display:grid; place-items:center; border:1px solid rgba(215,170,255,.37); border-radius:10px; background:rgba(185,119,248,.18); color:#ead3ff; }
.global-voice-panel .global-soundboard-row.is-playing .global-soundboard-play { background:#a96dea; color:#fff; }
.global-voice-panel .global-soundboard-detail { min-width:0; min-height:0; display:flex; flex-direction:column; gap:12px; overflow:auto; padding:17px; border:0; border-radius:0; background:radial-gradient(circle at 90% 0%,rgba(161,91,231,.17),transparent 50%),rgba(9,7,19,.30); }
.global-soundboard-detail-title { display:flex; align-items:center; gap:11px; padding-bottom:12px; border-bottom:1px solid rgba(205,163,255,.18); }
.global-soundboard-detail-title .global-soundboard-icon { width:47px; height:47px; font-size:20px; }
.global-soundboard-detail-title > span:last-child { min-width:0; display:grid; gap:4px; }
.global-soundboard-detail-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.global-soundboard-detail-title small { color:#c6addd; font-size:10px; }
.global-voice-panel .global-soundboard-detail p { color:#e3d4ef; font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.global-soundboard-detail a { align-self:flex-start; display:inline-flex; align-items:center; gap:5px; color:#d9b1ff; font-size:10px; text-decoration:none; }
.global-soundboard-detail a:hover { text-decoration:underline; }
.global-soundboard-detail-empty,.global-soundboard-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#bfa9d3; text-align:center; }
.global-soundboard-detail-empty i,.global-soundboard-empty i { font-size:22px; color:#be8cf0; }.global-soundboard-detail-empty strong,.global-soundboard-empty strong { color:#eee0fb; font-size:12px; }.global-soundboard-detail-empty small,.global-soundboard-empty span { max-width:200px; color:#aa95c1; font-size:10px; line-height:1.45; }
.global-soundboard-add-form { flex:1 1 auto; min-height:0; display:grid; align-content:start; gap:10px; overflow:auto; padding:12px 15px 15px; }
.global-soundboard-form-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.global-soundboard-form-heading > span { display:grid; gap:2px; }.global-soundboard-form-heading strong { font-size:12px; }.global-soundboard-form-heading small { color:#bda9d3; font-size:9px; }
.global-voice-panel .global-soundboard-form-heading button { width:30px; min-width:30px; height:30px; min-height:30px; display:grid; place-items:center; padding:0; }
.global-soundboard-add-form label { min-width:0; display:grid; gap:5px; color:#e7d9f4; font-size:10px; font-weight:700; }
.global-soundboard-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.global-soundboard-add-form input,.global-soundboard-add-form textarea { width:100%; min-width:0; box-sizing:border-box; padding:8px 10px; border:1px solid rgba(202,160,255,.27); border-radius:10px; outline:0; background:rgba(10,8,20,.62); color:#fff; font:inherit; font-size:11px; resize:none; }
.global-soundboard-add-form input:focus,.global-soundboard-add-form textarea:focus { border-color:#c994ff; box-shadow:0 0 0 2px rgba(194,133,255,.18); }.global-soundboard-add-form input::placeholder,.global-soundboard-add-form textarea::placeholder { color:#8d799f; }
.global-voice-panel .global-soundboard-add-form p { color:#bfa9d3; font-size:9px; }.global-voice-panel .global-soundboard-add-form p.is-error { color:#ffb4ca; }
.global-voice-panel .global-soundboard-save { justify-self:end; min-height:35px; display:flex; align-items:center; gap:7px; border-color:rgba(223,180,255,.52); background:linear-gradient(135deg,#9e62dc,#7746bf); color:#fff; }
.global-soundboard-source-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border:1px solid rgba(202,160,255,.24); border-radius:12px; background:rgba(8,6,18,.5); }
.global-voice-panel .global-soundboard-source-options button { min-height:33px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:9px; background:transparent; color:#bca8d0; font-size:10px; }
.global-voice-panel .global-soundboard-source-options button[aria-pressed="true"] { background:linear-gradient(135deg,rgba(161,93,227,.66),rgba(105,65,166,.66)); color:white; box-shadow:0 2px 9px rgba(73,37,111,.25); }
.global-voice-panel .global-soundboard-source-options button:hover { color:white; }
.global-soundboard-add-form [data-soundboard-youtube-fields][hidden],.global-soundboard-add-form [data-soundboard-file-fields][hidden] { display:none!important; }
.global-soundboard-file-pick { position:relative; }
.global-soundboard-file-button { width:max-content; max-width:100%; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(202,160,255,.34); border-radius:9px; background:rgba(168,109,228,.15); color:#ead9f8; cursor:pointer; }
.global-soundboard-file-pick:focus-within .global-soundboard-file-button,.global-soundboard-file-pick:hover .global-soundboard-file-button { border-color:#ca98ff; background:rgba(168,109,228,.25); }
.global-soundboard-add-form .global-soundboard-file-pick input[type="file"] { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; clip-path:inset(50%); }
.global-soundboard-file-pick small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#bda9d3; font-size:10px; font-weight:400; }
@media(max-width:550px) { .global-voice-panel.has-soundboard { width:min(360px,calc(100vw - 24px)); }.global-soundboard-browser { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }.global-voice-panel .global-soundboard-detail { display:flex; max-height:112px; padding:10px 13px; border-top:1px solid rgba(202,160,255,.16); }.global-voice-panel .global-soundboard-list { border-right:0; }.global-soundboard-detail-title { padding-bottom:6px; }.global-soundboard-detail-title .global-soundboard-icon { width:32px; height:32px; }.global-soundboard-form-pair { grid-template-columns:1fr 1fr; } }
@media(max-height:500px) { .global-voice-panel.has-soundboard .global-voice-roster,.global-voice-panel.has-soundboard .global-voice-section-title { display:none; }.global-voice-panel.has-soundboard .global-soundboard-head { min-height:48px; padding:6px 10px; }.global-voice-panel.has-soundboard .global-soundboard-detail { display:none; }.global-voice-panel.has-soundboard .global-soundboard-browser { grid-template-columns:1fr; } }
/* Performance Mode keeps catalog images to one decoded surface per card. */
html.stelah-performance-mode .game-card-media.is-performance,
html.stelah-performance-mode .library-page .library-grid.is-list .game-card-media.is-performance {
  grid-template-columns:minmax(0,1fr);
}
html.stelah-performance-mode .game-card-media.is-performance .game-cover-panel {
  inset:0; width:100%; height:100%; border:0; border-radius:0; box-shadow:none;
  display:grid; place-items:center;
}
html.stelah-performance-mode .game-card-media.is-performance .game-cover-panel img {
  object-fit:contain;
}
html.stelah-performance-mode .game-card-media.is-performance .game-shot-carousel {
  width:100%; height:100%;
}
html.stelah-performance-mode .game-card,
html.stelah-performance-mode .game-card-media img {
  transition:none;
}
.provider-sites-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:3px 3px 14px;scrollbar-color:#a873d9 #20172d}
.provider-site-card{position:relative;flex:0 0 clamp(190px,20vw,265px);height:142px;overflow:hidden;text-align:left;border:1px solid #8d65b87a;border-radius:18px;background:linear-gradient(135deg,#3c255a,#161327);color:#fff;cursor:pointer;scroll-snap-align:start;box-shadow:0 10px 28px #0004;transition:transform .2s,border-color .2s,box-shadow .2s}
.provider-site-card:hover,.provider-site-card:focus-visible{transform:translateY(-3px);border-color:#ce9aff;box-shadow:0 12px 30px #9d5ae544}
.provider-site-art{position:absolute;inset:0;background:linear-gradient(135deg,#64388c,#241636)}
.provider-site-art img{width:100%;height:100%;object-fit:cover}
.provider-site-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a071add,#0a071a0d 82%)}
.provider-site-label{position:absolute;left:16px;right:16px;bottom:13px;display:grid;gap:3px;text-shadow:0 2px 8px #000b}
.provider-site-label strong{font-size:17px;line-height:1.15}
.provider-site-label small{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#e9dbf6}