/* mobilestudio (Oct 2026): Rolling Now AI Studio + DCP in phone/tablet browsers (360-1023px, touch).
   Never inside the native app: html.rn-app is set by the head script in index.html (RollingNowNative / Capacitor / app host / app UA), whatever the width. */

/* ---------- 1. native app: nothing about AI Studio, credits or DCP, at any width (wins over every desktop rule) ---------- */
html.rn-app #tab-ai, html.rn-app #tab-dcp, html.rn-app #ai-video-page, html.rn-app #ai-visitor-page, html.rn-app #dcp-page,
html.rn-app #ms-menu-ai, html.rn-app #ms-menu-dcp, html.rn-app .ms-tool, html.rn-app .cs-feature, html.rn-app #cs-app,
html.rn-app .aix-eng-g, html.rn-app .gp-open, html.rn-app #avs-buy, html.rn-app .avs-buy, html.rn-app .aix-toast, html.rn-app .ms-lb { display: none !important; }

/* ---------- 2. phones and tablets in a browser: pages sit between the header and the bottom tab bar ---------- */
#ms-menu-ai, #ms-menu-dcp { display: none; }
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.rn-app) #ai-video-page:not([hidden]), html:not(.rn-app) #ai-visitor-page:not([hidden]), html:not(.rn-app) #dcp-page:not([hidden]) {
    display: block !important; position: fixed; z-index: 45; top: calc(var(--rn-header, 120px) + env(safe-area-inset-top, 0px)); bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 0; inset-inline-end: 0; width: auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: #07080a; color: #eceae6; padding: 0; box-sizing: border-box;
  }
  html:not(.rn-app) body:not(.tabs-on) #ai-video-page, html:not(.rn-app) body:not(.tabs-on) #ai-visitor-page, html:not(.rn-app) body:not(.tabs-on) #dcp-page { display: none !important; }
  /* entries live in the ⋮ menu (the bottom bar has no room for two more icons at 360px) */
  html:not(.rn-app) #ms-menu-ai:not([hidden]), html:not(.rn-app) #ms-menu-dcp:not([hidden]) { display: flex; }
}
#ms-menu-ai, #ms-menu-dcp { align-items: center; gap: 10px; }
#ms-menu-ai svg, #ms-menu-dcp svg { width: 20px; height: 20px; flex: 0 0 20px; }

/* native app: Studio overlays never show either */
html.rn-app .avs-pay-bg, html.rn-app .gp-mask, html.rn-app .aiv-lb, html.rn-app #aiv-lb { display: none !important; }

/* ---------- 3. AI Studio phone layout (360-1023px) ---------- */
@media (max-width: 1023px) {
  #ai-video-page .aiv-col { padding: 14px 14px calc(28px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; }
  /* header: title on its own line, then one compact row: credits · Buy credits (storage on a small second line) */
  #ai-video-page .aiv-head { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 14px !important; }
  #ai-video-page .aiv-head-t { width: 100% !important; }
  #ai-video-page .aiv-head-t h2 { font-size: 22px !important; line-height: 1.3 !important; margin: 0 !important; white-space: normal !important; overflow-wrap: anywhere; max-width: 100% !important; }
  #ai-video-page .aiv-head-t p { font-size: 13px !important; line-height: 1.5 !important; margin: 2px 0 0 !important; }
  #ai-video-page .aiv-head-t .aiv-powered { display: none !important; }
  #ai-video-page .aiv-head-end { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; }
  #ai-video-page .aiv-head-end > * { margin: 0 !important; }
  #ai-video-page #aiv-credits { order: 1; min-height: 44px; flex: 1 1 auto; justify-content: center; box-sizing: border-box; }
  #ai-video-page #avs-buy { order: 2; min-height: 44px; flex: 0 0 auto; padding: 0 18px !important; }
  #ai-video-page #avs-storage { order: 3; flex: 1 1 100%; min-height: 0 !important; height: auto !important; padding: 0 2px !important; border: 0 !important; background: none !important; font-size: 12px !important; color: #8d8a83 !important; justify-content: flex-start; }
  #ai-video-page .aiv-head-end .aiv-dbg, #ai-video-page .aiv-head-end label { min-height: 44px; }

  /* category hub: compact 2-column tiles (icon + name + price), no long descriptions */
  #ai-video-page .aiv-hub-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #ai-video-page .aiv-tile { min-height: 0 !important; height: auto !important; padding: 12px 12px 12px !important; border-radius: 16px !important; gap: 6px !important; justify-content: flex-start !important; }
  #ai-video-page .aiv-tile-ico { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 10px !important; }
  #ai-video-page .aiv-tile-ico svg { width: 20px !important; height: 20px !important; }
  #ai-video-page .aiv-tile-t { font-size: 16px !important; line-height: 1.25 !important; margin-top: 18px !important; }
  #ai-video-page .aiv-tile-d { display: none !important; }
  #ai-video-page .aiv-tile-c { font-size: 11.5px !important; padding: 3px 9px !important; line-height: 1.4 !important; white-space: normal !important; margin-top: 2px !important; }
  #ai-video-page .aiv-tile-check { width: 22px !important; height: 22px !important; top: 10px !important; inset-inline-end: 10px !important; }

  /* the form card */
  #ai-video-page .aiv-card { padding: 14px !important; border-radius: 18px !important; }
  #ai-video-page .aiv-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 4px !important; }
  #ai-video-page .aiv-tabs::-webkit-scrollbar { display: none; }
  #ai-video-page .aiv-tabs > button { flex: 0 0 auto !important; min-height: 40px; white-space: nowrap !important; padding: 8px 14px !important; font-size: 14px !important; }
  #ai-video-page textarea { font-size: 16px !important; line-height: 1.55 !important; min-height: 104px !important; max-height: 40vh; padding: 12px 14px !important; scroll-margin-top: 12px; scroll-margin-bottom: 120px; }
  #ai-video-page .ai2-ex { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  #ai-video-page .ai2-ex::-webkit-scrollbar { display: none; }
  #ai-video-page .aiv-opts { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  /* model · engine · quality · format on a 2x2 grid, duration + sound on one row */
  #ai-video-page .ai2-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 10px !important; align-items: end !important; }
  #ai-video-page .ai2-row > .ai2-g { min-width: 0 !important; width: auto !important; flex: none !important; margin: 0 !important; }
  #ai-video-page .ai2-row > [hidden] { display: none !important; }
  #ai-video-page .ai2-row > #ai2-dur-g { grid-column: 1 / 2; }
  #ai-video-page .ai2-row > .ai2-snd { grid-column: 2 / 3; justify-self: stretch; justify-content: center; min-height: 44px; margin: 0 !important; box-sizing: border-box; }
  #ai-video-page .ai2-row > #ai2-fam-g, #ai-video-page .ai2-row > #ai2-model-g, #ai-video-page .ai2-row > #ai2-q-g, #ai-video-page .ai2-row > #ai2-fmt-g { grid-column: auto !important; }
  #ai-video-page .ai2-row > #ai2-fam-g[hidden] ~ #ai2-model-g { grid-column: 1 / -1 !important; }
  #ai-video-page .ai2-ex > * { flex: 0 0 auto !important; }
  #ai-video-page .ai2-ex > button { min-height: 40px !important; }
  #ai-video-page .aiv-chip { min-height: 40px !important; }
  #ai-video-page .gp-open { min-height: 44px !important; }
  #ai-video-page .rn-dd-btn, #ai-video-page .ai2-sel { min-height: 44px !important; font-size: 14px !important; }
  #ai-video-page input[type=range] { min-height: 32px; }
  #ai-video-page .aiv-toggle { min-height: 44px; }
  #ai-video-page .rn3-more summary { min-height: 44px !important; }
  #ai-video-page .rn3-more-in { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #ai-video-page .aiv-go { min-height: 48px !important; width: 100% !important; }   /* shootbtn: gold 48px, styles in seedance1.css */
  #ai-video-page .aiv-est { padding-top: 6px !important; }
  #ai-video-page .ai2-refund, #ai-video-page .rn3-wait { font-size: 12px !important; line-height: 1.5 !important; }
  /* references / drop zones: horizontal strip */
  #ai-video-page .aiv-top:not(.solo) { grid-template-columns: minmax(0, 1fr) !important; }
  #ai-video-page .aiv-drops, #ai-video-page .aix-refs, #ai-video-page .aixr-chips { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

  /* results: 2 columns of compact cards; tap the picture to open it big (mstudio1.js) */
  #ai-video-page .aiv-grid-v, #ai-video-page .aiv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #ai-video-page .aiv-job { border-radius: 14px !important; min-width: 0 !important; }
  #ai-video-page .aiv-job .aiv-cover { cursor: zoom-in; }
  #ai-video-page .aiv-job .aiv-cover .aiv-play { pointer-events: none; transform: scale(.7); }
  #ai-video-page .aiv-job .aiv-badge { font-size: 10.5px !important; padding: 2px 8px !important; top: 6px !important; inset-inline-start: 6px !important; }
  #ai-video-page .aiv-body { padding: 8px 9px 10px !important; gap: 6px !important; }
  #ai-video-page .aiv-s-title { font-size: 12.5px !important; line-height: 1.45 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; max-height: 2.9em !important; height: auto !important; padding: 0 !important; }
  #ai-video-page .aiv-s-meta { font-size: 10.5px !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; white-space: normal !important; max-height: 2.8em !important; height: auto !important; }
  #ai-video-page .aiv-actions, #ai-video-page .ai2-acts { gap: 6px !important; }
  #ai-video-page .aiv-job .aiv-act2 { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; }
  #ai-video-page .aiv-job .aiv-act2 > .aiv-arow, #ai-video-page .aiv-job .aiv-act2 > .aiv-arow2 { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; }
  #ai-video-page .aiv-job .aiv-act2 > .aiv-more { flex: 1 1 100% !important; }
  #ai-video-page .aiv-job .ai2-acts .aiv-btn { font-size: 12px !important; }
  #ai-video-page .aiv-arow, #ai-video-page .aiv-arow2, #ai-video-page .ai2-acts { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  #ai-video-page .aiv-job .aiv-btn { min-height: 44px !important; padding: 0 8px !important; font-size: 12.5px !important; flex: 1 1 0 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; justify-content: center; }
  #ai-video-page .aiv-job .aiv-arow > button.aiv-gold { display: none !important; }   /* tapping the picture opens it */
  #ai-video-page .aiv-job .aiv-more { flex-direction: column !important; }
  #ai-video-page .aiv-job .aiv-more .aiv-btn { flex: none !important; width: 100% !important; white-space: normal !important; }
  #ai-video-page .aiv-job .aiv-fail { padding: 10px !important; font-size: 12px !important; }
  #ai-video-page .aiv-job .aiv-wait { padding: 10px !important; font-size: 12px !important; }
  #ai-video-page .aiv-list > h3, #ai-video-page .aix-list-head h3 { font-size: 18px !important; }
  #ai-video-page .aix-list-head { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #ai-video-page .aiv-seg, #ai-video-page .rn3-hf { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #ai-video-page .aiv-seg::-webkit-scrollbar, #ai-video-page .rn3-hf::-webkit-scrollbar { display: none; }
  #ai-video-page .aiv-seg > button, #ai-video-page .rn3-hf > button { flex: 0 0 auto !important; min-height: 40px !important; white-space: nowrap; }
  #ai-video-page .rn3-hf .rn-dd { flex: 0 0 auto !important; width: auto !important; }
  #ai-video-page .rn3-hf .rn-dd-btn { width: auto !important; min-width: 140px; min-height: 40px !important; padding-inline-end: 34px !important; text-align: start; }

  /* modals: full-width sheets */
  .avs-pay-bg { align-items: flex-end !important; padding: 0 !important; }
  .avs-pay { width: 100% !important; max-width: none !important; max-height: 88vh !important; overflow-y: auto !important; border-radius: 20px 20px 0 0 !important; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; margin: 0 !important; }
  .avs-pay .pk { min-height: 52px !important; width: 100% !important; }
  .avs-pay .aiv-btn { min-height: 44px !important; width: 100%; }
  .gp-mask { padding: 0 !important; align-items: flex-end !important; }
  .gp-box { width: 100% !important; max-width: none !important; max-height: 90vh !important; border-radius: 20px 20px 0 0 !important; }
  .gp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .gp-ft { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; flex-wrap: wrap; }
  .gp-btn { min-height: 44px !important; }
  .gp-x { min-width: 44px; min-height: 44px; }
  .aiv-lb .aiv-lb-in { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; box-sizing: border-box; }
  .aiv-lb .aiv-lb-x { width: 44px !important; height: 44px !important; top: calc(10px + env(safe-area-inset-top, 0px)) !important; }
  .aix-toast { inset-inline: 12px !important; bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; transform: none !important; left: 12px !important; right: 12px !important; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #ai-video-page .aiv-col { padding: 20px 22px 32px !important; }
  #ai-video-page .aiv-hub-main { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #ai-video-page .ai2-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  #ai-video-page .ai2-row > #ai2-dur-g { grid-column: 1 / 4; }
  #ai-video-page .ai2-row > .ai2-snd { grid-column: 4 / 5; }
  #ai-video-page .aiv-grid-v, #ai-video-page .aiv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #ai-video-page .aiv-head { flex-direction: row !important; align-items: flex-start !important; }
  #ai-video-page .aiv-head-end { width: auto !important; justify-content: flex-end !important; flex: 0 1 auto; max-width: 62%; }
  #ai-video-page #aiv-credits { flex: 0 1 auto; }
  #ai-video-page #avs-storage { justify-content: flex-end; text-align: end; }
  .gp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .avs-pay-bg { align-items: center !important; }
  .avs-pay { max-width: 520px !important; border-radius: 20px !important; }
}

/* ---------- 4. phone lightbox for AI Studio results (same pattern as the Rolling Set / Motion one) ---------- */
.ms-lb { position: fixed; inset: 0; z-index: 2147483000; background: rgba(4,5,7,.95); display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 0 calc(14px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; color: #eceae6; touch-action: pan-y; }
.ms-lb-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.ms-lb-stage video, .ms-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; background: #000; display: block; }
.ms-lb-stage video { width: 100%; }
.ms-lb-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; font-size: 13px; min-width: 0; }
.ms-lb-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfcdc6; }
.ms-lb-bar a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #3a3b42; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; }
.ms-lb-bar a.ms-dl { background: #fff; color: #07080a; border-color: #fff; }
.ms-lb-x { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); inset-inline-end: 10px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid #3a3b42; background: #17181c; color: #fff; font-size: 26px; line-height: 40px; padding: 0; cursor: pointer; }
.ms-lb-n { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); inset-inline-start: 14px; line-height: 44px; font-size: 13px; color: #a9a59d; direction: ltr; }
.ms-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 12px; border: 1px solid #2a2b31; background: rgba(23,24,28,.8); color: #fff; font-size: 32px; line-height: 58px; padding: 0; cursor: pointer; z-index: 2; }
.ms-lb-nav { direction: ltr; }
.ms-lb-nav.p { left: 6px; } .ms-lb-nav.n { right: 6px; }
html[dir="rtl"] .ms-lb-nav.p { left: auto; right: 6px; } html[dir="rtl"] .ms-lb-nav.n { right: auto; left: 6px; }
.ms-lb-nav[disabled] { opacity: .25; }
html[dir="rtl"] .ms-lb, html[dir="rtl"] .ms-lb * { font-family: "Cairo", sans-serif; }

/* ---------- 5. Production tools: AI Studio + DCP cards on phones (web only) ---------- */
.ms-tool { display: none !important; }
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.rn-app) .ms-tool { display: flex !important; }
}
.rn-tcard.ms-tool[data-ms=ai] .i { color: #d4af37; background: rgba(212,175,55,.12); } .rn-tcard.ms-tool[data-ms=ai] span.g { color: #d4af37; }
.rn-tcard.ms-tool[data-ms=dcp] .i { color: #fb7185; background: rgba(251,113,133,.13); } .rn-tcard.ms-tool[data-ms=dcp] span.g { color: #fb7185; }
/* keyboard open while typing in the Studio / DCP: the bottom bar steps aside so the field keeps the room */
@media (max-width: 1023px) {
  body.ms-kb #app-tabs { display: none !important; }
  html:not(.rn-app) body.ms-kb #ai-video-page:not([hidden]), html:not(.rn-app) body.ms-kb #ai-visitor-page:not([hidden]), html:not(.rn-app) body.ms-kb #dcp-page:not([hidden]) { bottom: 0 !important; }
}

/* ---------- 6. DCP order flow on phones ---------- */
@media (max-width: 1023px) {
  #dcp-page .dcp-wrap { padding: 16px 14px calc(32px + env(safe-area-inset-bottom, 0px)) !important; }
  #dcp-page h1 { font-size: 22px !important; }
  #dcp-page h2 { font-size: 17px !important; margin-top: 24px !important; }
  #dcp-page .dcp-card { padding: 14px !important; border-radius: 16px !important; }
  #dcp-page .dcp-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  #dcp-page input:not([type=checkbox]):not([type=radio]), #dcp-page select, #dcp-page textarea, #dcp-page .rn-dd-btn { min-height: 46px !important; font-size: 16px !important; box-sizing: border-box; }
  #dcp-page input[type=checkbox] { width: 22px !important; height: 22px !important; flex: 0 0 22px; margin-top: 1px; }
  #dcp-page label:has(input[type=checkbox]) { min-height: 44px; align-items: flex-start; }
  #dcp-page .dcp-btn { min-height: 52px !important; font-size: 15px !important; width: 100%; }
  #dcp-page .dcp-pill { height: 32px !important; font-size: 12.5px !important; }
  #dcp-page .dcp-main { position: sticky; bottom: 8px; z-index: 2; box-shadow: 0 8px 28px rgba(0,0,0,.55); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #dcp-page .dcp-wrap { padding: 22px 22px 36px !important; }
  #dcp-page .dcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- Rolling Now icons: header marks (AI Studio hub + DCP page), web only ---- */
.ms-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(212,175,55,.12); color: #d4af37; flex: 0 0 40px; }
.ms-mark svg { width: 24px; height: 24px; }
.ms-mark[data-ms=dcp] { color: #fb7185; background: rgba(251,113,133,.13); }
.ms-titlerow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ms-titlerow > h1, .ms-titlerow > h2 { margin-top: 0; margin-bottom: 0; min-width: 0; }
.ms-titlerow + * { margin-top: 6px; }
#more-menu #ms-menu-ai svg { color: #d4af37; }
#more-menu #ms-menu-dcp svg { color: #d4af37; }   /* hub1 */
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ms-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .ms-mark svg { width: 21px; height: 21px; }
}
html.rn-app .ms-mark { display: none !important; }

/* ---- navicons (Oct 2026): AI Studio + DCP as icons in the phone/tablet bottom bar; never in the native app ---- */
#ms-menu-tools { display: none; }
.tabs .tab-ico .ms-navico { display: none; }
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.rn-app) #tab-ai:not([hidden]), html:not(.rn-app) #tab-dcp:not([hidden]) { display: flex !important; }
  html:not(.rn-app) #tab-dcp { order: 998; } html:not(.rn-app) #tab-ai { order: 999; }   /* navorder: DCP second-to-last, AI Studio last (logical order; RTL mirrors it) */
  html:not(.rn-app) #tab-ai .tab-ico > svg:not(.ms-navico), html:not(.rn-app) #tab-dcp .tab-ico > svg:not(.ms-navico) { display: none !important; }
  html:not(.rn-app) .tabs .tab-ico .ms-navico { display: block; fill: none; }
  html:not(.rn-app) #tab-ai .ms-navico { color: #d4af37; }
  html:not(.rn-app) #tab-dcp .ms-navico { color: #d4af37; }   /* hub1: Production tools (reel) */
  html:not(.rn-app) #tab-ai::after, html:not(.rn-app) #tab-dcp::after { content: none !important; }
}
@media (max-width: 599px) {
  html:not(.rn-app) body.tabs-on #tab-tools { display: none !important; }
  html:not(.rn-app) #ms-menu-tools { display: flex; align-items: center; }
}
html.rn-app #ms-menu-tools, html.rn-app .ms-navico { display: none !important; }