:root{
  --mg-top-h: 52px;
  --mg-bottom-h: 80px;
  --mg-appbars-h: calc(var(--mg-top-h) + var(--mg-bottom-h) + env(safe-area-inset-bottom,0px));
  --mg-color: #d31826;
}
html.has-mg-appbar body, body.has-mg-appbar{ padding-bottom: var(--mg-appbars-h) !important; }
body.mg-in-iframe .mg-appbar-top, body.mg-in-iframe .mg-appbar-bottom { display:none !important; }

.mg-radio-app{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:transparent; padding:8px 0 0; }
#mg-content-frame{ width:100%; height: calc(100vh - var(--mg-appbars-h)); border:0; display:block; background:transparent; }
#mg-content-frame[hidden]{ display:none !important; }

.mg-appbar-top, .mg-appbar-bottom{ position:fixed; left:0; right:0; background:#fff; }
.mg-appbar-bottom{ bottom:0; height:var(--mg-bottom-h); padding-bottom: env(safe-area-inset-bottom,0); display:flex; align-items:center; gap:10px; padding:6px 10px; border-top:1px solid #eee; overflow:hidden; z-index: 2147483645; pointer-events:auto; }
.mg-appbar-top{ bottom: var(--mg-bottom-h); height:var(--mg-top-h); display:grid; grid-template-columns: repeat(4,1fr); border-top:0; z-index: 2147483646; pointer-events:auto; }
.mg-tab{ display:grid; place-items:center; padding:8px 6px; font-weight:600; font-size:12px; color:#222; text-decoration:none; background:#fff; border:0; cursor:pointer; user-select:none; -webkit-user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-tab:active,.mg-tab:focus{ background:#f7f7f7; outline:none; }

.mg-embed{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-start; height:56px; min-width:220px; max-width:480px; overflow:hidden; position:relative; pointer-events:auto; }
.mg-embed > * { transform-origin:left center; }

.mg-ticker{ flex:1 1 auto; overflow:hidden; white-space:nowrap; display:block; width:100%; }
.mg-ticker-inner{ display:inline-block; padding-left:200%; will-change:transform; animation: mg-marquee var(--mg-ticker-dur, 40s) linear infinite; }
.mg-ticker .chunk{ display:inline-block; margin-right:48px; }
@keyframes mg-marquee{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-100%); } }