/* Stream "Add stream": the owner create-sheet look shared with Booking
   "Add service" and Shop "Add item" (same tokens, same parts), benchmarked
   on the phone Map "New pin" sheet.

   Enterprise layout: Cancel | title | status header, a Source choice (Go
   live, Add a link, Stream pass) as three cards, the link card with its
   platform segment and inline "not a Twitch link" validation, the pass card,
   the title under Details, the description under More options, and one
   primary action that stays muted until the form is ready. Light, dark, the
   owner's page colour and Glass all come from the --es-* tokens below.

   The root selector repeats the id seven times (Glass paints this sheet from
   mobile-glass-dashboards.css; the page's [data-theme] sweeps force leaf
   colours) and skips .stc--pass-golive: the stream-pass friend's full-screen
   Go Live screen keeps its own photo look, kept verbatim at the bottom of
   this file. Markup: static/js/mobile-stream-add-modal.js. */

/* ---- tokens: light (default), dark, page colour, Glass ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    --es-font: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --es-scheme: light;
    --es-page: #F5F5F3;
    --es-card: #FFFFFF;
    --es-line: #E6E6E9;
    --es-line-soft: #EFEFF1;
    --es-ink: #0E0E10;
    --es-dim: #5C5C63;
    --es-faint: #8A8A92;
    --es-field: #FFFFFF;
    --es-field-line: #D9D9DE;
    --es-field-ink: #111113;
    --es-field-dim: #5C5C63;
    --es-field-faint: #9A9AA2;
    --es-focus: #0E0E10;
    --es-track: #EAEAEC;
    --es-seg-on: #FFFFFF;
    --es-seg-shadow: 0 1px 2px rgba(14, 14, 16, 0.10);
    --es-tile: #F1F1F2;
    --es-btn: #0E0E10;
    --es-on-btn: #FFFFFF;
    --es-btn-idle: #E3E3E6;
    --es-on-btn-idle: #8A8A92;
    --es-bad: #C62828;
    --es-good: #15803D;
    --es-toggle-off: #D9D9DE;
}
html[data-theme*="dark"] body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    --es-scheme: dark;
    --es-page: #0B0B0D;
    --es-card: #151518;
    --es-line: #26262B;
    --es-line-soft: #1F1F23;
    --es-ink: #F4F4F5;
    --es-dim: #B4B4BB;
    --es-faint: #85858E;
    --es-field: #0F0F12;
    --es-field-line: #303036;
    --es-field-ink: #F4F4F5;
    --es-field-dim: #B4B4BB;
    --es-field-faint: #6E6E77;
    --es-focus: #F4F4F5;
    --es-track: #1E1E22;
    --es-seg-on: #2C2C32;
    --es-seg-shadow: none;
    --es-tile: #222227;
    --es-btn: #F4F4F5;
    --es-on-btn: #0E0E10;
    --es-btn-idle: #222227;
    --es-on-btn-idle: #6E6E77;
    --es-bad: #F87171;
    --es-good: #4ADE80;
    --es-toggle-off: #3A3A41;
}
/* The owner's page colour (mobile-page-colors.js writes the --pc-* set). */
html[data-page-color] body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    --es-page: var(--pc-page);
    --es-card: var(--pc-soft);
    --es-line: var(--pc-line);
    --es-line-soft: var(--pc-line);
    --es-ink: var(--pc-ink);
    --es-dim: var(--pc-dim);
    --es-faint: var(--pc-faint);
    --es-field: var(--pc-field);
    --es-field-line: var(--pc-edge);
    --es-field-ink: var(--pc-field-ink);
    --es-field-dim: var(--pc-field-dim);
    --es-field-faint: var(--pc-field-dim);
    --es-focus: var(--pc-ink);
    --es-track: var(--pc-hover);
    --es-seg-on: var(--pc-field);
    --es-tile: var(--pc-hover);
    --es-btn: var(--pc-btn);
    --es-on-btn: var(--pc-on-btn);
    --es-btn-idle: var(--pc-hover);
    --es-on-btn-idle: var(--pc-faint);
    --es-bad: var(--pc-bad);
    --es-good: var(--pc-good);
    --es-toggle-off: var(--pc-edge);
}
/* Glass: the app's frosted sheet, white type, translucent cards. */
html[data-appearance="glass"] body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    --es-scheme: dark;
    --es-page: var(--gl-sheet, rgba(28, 28, 32, 0.42));
    --es-card: rgba(255, 255, 255, 0.08);
    --es-line: rgba(255, 255, 255, 0.18);
    --es-line-soft: rgba(255, 255, 255, 0.12);
    --es-ink: #FFFFFF;
    --es-dim: rgba(255, 255, 255, 0.74);
    --es-faint: rgba(255, 255, 255, 0.56);
    --es-field: rgba(255, 255, 255, 0.10);
    --es-field-line: rgba(255, 255, 255, 0.24);
    --es-field-ink: #FFFFFF;
    --es-field-dim: rgba(255, 255, 255, 0.74);
    --es-field-faint: rgba(255, 255, 255, 0.52);
    --es-focus: #FFFFFF;
    --es-track: rgba(255, 255, 255, 0.10);
    --es-seg-on: rgba(255, 255, 255, 0.24);
    --es-seg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --es-tile: rgba(255, 255, 255, 0.12);
    --es-btn: #FFFFFF;
    --es-on-btn: #0E0E10;
    --es-btn-idle: rgba(255, 255, 255, 0.12);
    --es-on-btn-idle: rgba(255, 255, 255, 0.50);
    --es-bad: #FFB0A8;
    --es-good: #86EFAC;
    --es-toggle-off: rgba(255, 255, 255, 0.24);
}

/* ---- surface ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
    background: var(--es-page) !important; background-image: none !important;
    color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important;
    color-scheme: var(--es-scheme) !important;
    font-family: var(--es-font) !important;
}
html[data-appearance="glass"] body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) {
    -webkit-backdrop-filter: var(--gl-blur, blur(22px) saturate(170%)) !important;
    backdrop-filter: var(--gl-blur, blur(22px) saturate(170%)) !important;
}
/* Every leaf inherits from the rule that styles its container; the page's
   [data-theme] sweeps and the modal fixer never reach past this. */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) * {
    box-sizing: border-box;
    font-family: var(--es-font) !important;
    letter-spacing: 0;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :where(div, section, form, p, span, small, strong, em, label, summary, details, h1, h2, h3) {
    background-color: transparent !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.fa, .fas, .fa-solid, .far, .fa-regular) { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .far, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .fa-regular { font-weight: 400 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) button {
    -webkit-appearance: none !important; appearance: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    filter: none !important; box-shadow: none !important; transform: none !important;
    -webkit-font-smoothing: antialiased !important; cursor: pointer;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) button::before, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) button::after { content: none !important; display: none !important; }

/* ---- header: Cancel | title | status ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar {
    position: sticky !important; top: 0 !important; z-index: 8 !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important;
    min-height: 0 !important; margin: 0 -16px 18px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px !important;
    border: 0 !important; border-bottom: 1px solid var(--es-line) !important; border-radius: 0 !important;
    background: var(--es-page) !important; box-shadow: none !important;
}
html[data-appearance="glass"] body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar { background: rgba(28, 28, 32, 0.30) !important; -webkit-backdrop-filter: var(--gl-blur, blur(22px)) !important; backdrop-filter: var(--gl-blur, blur(22px)) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title { display: contents !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-spacer { display: none !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-cancel {
    grid-column: 1 !important; justify-self: start !important;
    width: auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    font-size: 16px !important; font-weight: 600 !important; text-align: left !important; color: var(--es-dim) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title strong {
    grid-column: 2 !important; display: block !important; max-width: 52vw !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; font-stretch: normal !important;
    text-align: center !important; color: var(--es-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title small {
    grid-column: 3 !important; justify-self: end !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 26px !important; padding: 0 10px !important; border: 1px solid var(--es-line) !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important;
    color: var(--es-dim) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title small::before { content: "" !important; display: block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--es-faint) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title small.is-ready { color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-bar-title small.is-ready::before { background: var(--es-good) !important; }

/* ---- "Hosted by / Selling as / Streaming as" ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting {
    display: flex !important; align-items: center !important; gap: 12px !important;
    margin: 0 !important; padding: 12px 14px !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important; background: var(--es-card) !important; box-shadow: none !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 12px !important; overflow: hidden !important; background: var(--es-btn) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-avatar span { font-size: 15px !important; font-weight: 800 !important; color: var(--es-on-btn) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-copy { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-posting-name { font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---- small-caps eyebrow over each group ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-eyebrow {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important;
    margin: 24px 4px 8px !important; padding: 0 !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-eyebrow, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-eyebrow span {
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.2 !important;
    color: var(--es-dim) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-eyebrow span:last-child:not(:first-child) { font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-faint) !important; text-align: right !important; }

/* ---- grouped card ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-card {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
    margin: 0 !important; padding: 16px !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important;
    background: var(--es-card) !important; box-shadow: none !important; overflow: visible !important;
}

/* ---- labelled field ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-field { position: relative !important; display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-label {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.25 !important;
    color: var(--es-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-label em { font-style: normal !important; font-size: 13px !important; font-weight: 500 !important; color: var(--es-faint) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-help, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-hint { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-hint { margin: 8px 4px 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-error { display: none !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--es-bad) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-field[data-invalid] > .stc-error { display: block !important; }

/* inputs: 48px, labelled above, hairline box */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :where(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]), select) {
    display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important;
    background: var(--es-field) !important; background-image: none !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; text-align: left !important; direction: ltr !important;
    color: var(--es-field-ink) !important; -webkit-text-fill-color: var(--es-field-ink) !important; caret-color: var(--es-focus) !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: var(--es-scheme) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) textarea {
    display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
    min-height: 96px !important; margin: 0 !important; padding: 12px 14px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important;
    background: var(--es-field) !important; background-image: none !important; resize: none !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.45 !important;
    color: var(--es-field-ink) !important; -webkit-text-fill-color: var(--es-field-ink) !important; caret-color: var(--es-focus) !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: var(--es-scheme) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(input, textarea, select):focus { border-color: var(--es-focus) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(input, textarea)::placeholder { color: var(--es-field-faint) !important; -webkit-text-fill-color: var(--es-field-faint) !important; opacity: 1 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) select option { background: #FFFFFF !important; color: #111113 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) input[type="number"]::-webkit-inner-spin-button, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) input[type="number"] { -moz-appearance: textfield !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-date-and-time-value { text-align: left !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-field[data-invalid] :is(input, textarea, select, .stc-affix, .stc-stepper, .stc-iconfield) { border-color: var(--es-bad) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-field[data-invalid] :is(.stc-affix, .stc-stepper, .stc-iconfield) :is(input, select) { border-color: transparent !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.stc-affix, .stc-stepper, .stc-iconfield):has([data-builder-error="true"]) { border-color: var(--es-bad) !important; }

/* select with a chevron */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-select { position: relative !important; display: block !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-select select { padding-right: 40px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-select > i { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 12px !important; pointer-events: none !important; color: var(--es-field-dim) !important; }

/* $ price, icon fields: one box, the input inside it */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.stc-affix, .stc-iconfield) {
    display: flex !important; align-items: center !important; height: 48px !important; min-height: 48px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important; overflow: hidden !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.stc-affix, .stc-iconfield):focus-within { border-color: var(--es-focus) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.stc-affix, .stc-iconfield) :is(input, select) {
    flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-affix-pre { flex: 0 0 auto !important; padding: 0 0 0 14px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--es-field-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-affix-pre + input { padding-left: 6px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-affix-post { flex: 0 0 auto !important; padding: 0 14px 0 6px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--es-field-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-iconfield > i { flex: 0 0 auto !important; width: 42px !important; text-align: center !important; font-size: 14px !important; color: var(--es-field-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-iconfield > i + :is(input, select) { padding-left: 0 !important; }

/* - value unit + stepper */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper {
    display: flex !important; align-items: center !important; height: 48px !important; min-height: 48px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important; overflow: hidden !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper:focus-within { border-color: var(--es-focus) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper > button {
    flex: 0 0 52px !important; width: 52px !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    display: grid !important; place-items: center !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--es-field-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper > button:first-child { border-right: 1px solid var(--es-field-line) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper > button:last-child { border-left: 1px solid var(--es-field-line) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper > button:active { background: var(--es-track) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper input { flex: 1 1 auto !important; width: 0 !important; height: 100% !important; min-height: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: right !important; font-weight: 700 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-stepper-unit { flex: 1 1 auto !important; padding: 0 0 0 5px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--es-field-dim) !important; text-align: left !important; }

/* ---- segmented control ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment {
    display: flex !important; gap: 4px !important; margin: 0 !important; padding: 4px !important;
    border: 0 !important; border-radius: 12px !important; background: var(--es-track) !important; box-shadow: none !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment button {
    flex: 1 1 0 !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 6px !important;
    border: 0 !important; border-radius: 9px !important; background: transparent !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; white-space: nowrap !important; opacity: 1 !important;
    color: var(--es-dim) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment button:is(.is-active, .active, [aria-pressed="true"]) {
    background: var(--es-seg-on) !important; box-shadow: var(--es-seg-shadow) !important; color: var(--es-field-ink) !important;
}

/* ---- primary action: muted until the form is ready ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-foot { display: block !important; margin: 28px 0 0 !important; padding: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) :is(.stc-submit, button.stc-submit, .stc-submit:disabled) {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 20px !important;
    border: 0 !important; border-radius: 26px !important; background: var(--es-btn-idle) !important; opacity: 1 !important;
    font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--es-on-btn-idle) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-submit * { font-size: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-submit.is-ready { background: var(--es-btn) !important; color: var(--es-on-btn) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-submit.is-busy { opacity: 0.7 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-note { margin: 10px 0 0 !important; padding: 0 !important; text-align: center !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--es-dim) !important; }

/* ---- More options ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more {
    display: block !important; margin: 24px 0 0 !important; padding: 0 !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important; background: var(--es-card) !important; overflow: visible !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more > summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    min-height: 54px !important; margin: 0 !important; padding: 0 16px !important; list-style: none !important; cursor: pointer;
    font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more > summary::-webkit-details-marker { display: none !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more > summary::marker { content: "" !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-meta em { font-style: normal !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-faint) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-meta i { font-size: 12px !important; color: var(--es-dim) !important; transition: transform 160ms ease; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more[open] .stc-more-meta i { transform: rotate(180deg); }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more[open] > summary { border-bottom: 1px solid var(--es-line-soft) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-body { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 16px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-body > .stc-eyebrow { margin: 4px 0 -6px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-body > .stc-eyebrow:first-child { margin-top: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-more-body .stc-card { padding: 0 !important; border: 0 !important; background: transparent !important; }

/* ---- sheet frame ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) { position: fixed !important; inset: 0 !important; z-index: 999999 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .mobile-stream-add-shell {
    width: 100% !important; max-width: 560px !important; min-height: 100dvh !important; margin: 0 auto !important;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important;
}

/* ---- Source: Go live / Add a link / Stream pass ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-modes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important;
    width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 112px !important; margin: 0 !important; padding: 12px !important;
    border: 1.5px solid var(--es-line) !important; border-radius: 14px !important; background: var(--es-card) !important; text-align: left !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode i {
    display: grid !important; place-items: center !important; width: 32px !important; height: 32px !important; margin: 0 0 6px !important; border-radius: 9px !important;
    background: var(--es-tile) !important; font-size: 13px !important; color: var(--es-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode strong { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode small { font-size: 12px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode:is(.is-active, [aria-pressed="true"]) { border-color: var(--es-focus) !important; box-shadow: inset 0 0 0 0.5px var(--es-focus) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-mode:is(.is-active, [aria-pressed="true"]) i { background: var(--es-btn) !important; color: var(--es-on-btn) !important; }

/* ---- link: platform segment + link field ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment button { padding: 0 4px !important; font-size: 13px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment button i { font-size: 12px !important; color: inherit !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-segment button svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; display: block !important; fill: currentColor !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) #stream-url { min-height: 48px !important; padding: 13px 14px !important; font-size: 15px !important; line-height: 1.35 !important; overflow: hidden !important; word-break: break-all !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-field[data-invalid] .stc-label em { color: var(--es-bad) !important; }

/* ---- preview ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-card--preview { padding: 0 !important; overflow: hidden !important; background: #0E0E10 !important; border-color: var(--es-line) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-preview-stage { position: relative !important; width: 100% !important; aspect-ratio: 16 / 9 !important; background: #0E0E10 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-preview-stage iframe, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-preview-stage video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; display: block !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-preview-stage > div, html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-preview-stage > div i { font-size: 13px !important; color: rgba(255, 255, 255, 0.72) !important; }

/* ---- stream pass card ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-card { gap: 12px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-copy { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-copy strong { font-weight: 700 !important; color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-link {
    display: block !important; margin: 0 !important; padding: 12px 14px !important; border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important;
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important; word-break: break-all !important; text-decoration: none !important; color: var(--es-field-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-meta { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions--three { grid-template-columns: 1.2fr 1fr 0.8fr !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions button {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 10px !important;
    border: 1.5px solid var(--es-line) !important; border-radius: 12px !important; background: transparent !important;
    font-size: 14px !important; font-weight: 700 !important; color: var(--es-ink) !important;
}
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions button i { font-size: 13px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions button.is-primary { border-color: var(--es-btn) !important; background: var(--es-btn) !important; color: var(--es-on-btn) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stc-pass-actions button.is-danger { color: var(--es-bad) !important; }

/* ---- Go Live start progress under the button ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .mobile-stream-add-status { margin: 12px 0 0 !important; padding: 12px 14px !important; border: 1px solid var(--es-line) !important; border-radius: 12px !important; background: var(--es-card) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .mobile-stream-add-status[role="alert"] { border-color: var(--es-bad) !important; color: var(--es-bad) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .mobile-stream-add-status.is-starting { padding: 16px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-heading { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-heading::before { border-color: var(--es-line) !important; border-top-color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-steps { display: flex !important; gap: 8px !important; margin: 16px 0 10px !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-steps span { flex: 1 !important; padding-top: 8px !important; border-top: 3px solid var(--es-line) !important; font-size: 12px !important; font-weight: 500 !important; color: var(--es-faint) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-steps .is-done { border-top-color: var(--es-good) !important; color: var(--es-dim) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-steps .is-current { border-top-color: var(--es-ink) !important; font-weight: 700 !important; color: var(--es-ink) !important; }
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) .stream-start-hint { font-size: 13px !important; line-height: 1.5 !important; color: var(--es-dim) !important; }

/* ---- hidden wins over every display rule above ---- */
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) [hidden],
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) [hidden][hidden],
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) [style*="display: none"],
html body #mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal#mobileStreamModal:not(.stc--pass-golive) [style*="display:none"] { display: none !important; }

/* ================= unchanged: start progress base, pass Go Live screen, copied toast ================= */
#mobileStreamModal .stream-start-heading { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
#mobileStreamModal .stream-start-heading::before { content: ''; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid #D8DDD8; border-top-color: #158577; border-radius: 50%; animation: stream-start-spin 1s linear infinite; }
#mobileStreamModal .stream-start-steps { display: flex; gap: 8px; margin: 18px 0 12px; }
#mobileStreamModal .stream-start-steps span { flex: 1; border-top: 3px solid #DDE1DD; padding-top: 8px; color: #777E78; font-size: 11px; font-weight: 500; }
#mobileStreamModal .stream-start-steps .is-done { border-color: #158577; color: #158577; }
#mobileStreamModal .stream-start-steps .is-current { border-color: #158577; color: #111214; font-weight: 700; }
#mobileStreamModal .stream-start-hint { font-size: 12px; line-height: 1.5; font-weight: 400; color: #626962; }
@keyframes stream-start-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #mobileStreamModal .stream-start-heading::before { animation: none; } }

/* Stream-pass "GO LIVE" screen: a friend holding the phone gets one giant
   unmistakable button, not the owner's full New Stream form. Full-bleed
   photo of the app (window.pageAthleteData.image_data) with a dark gradient,
   matching the Athlete Streamer launch-screen mockup. */
#mobileStreamModal#mobileStreamModal.stc--pass-golive { background: #0A0A0C !important; }
#mobileStreamModal#mobileStreamModal .stc-golive {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 24px calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    background-color: #0A0A0C !important;
    background-size: cover !important;
    background-position: center 28% !important;
    box-sizing: border-box !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-brand { margin-top: 34px !important; text-align: center !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-tagline {
    margin-top: 8px !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-action { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 20px !important; }
/* Two rings, offset in time, each expanding out from the button and fading --
   reads as a steady live "signal" rather than a single flat glow. */
#mobileStreamModal#mobileStreamModal .stc-golive-action::before,
#mobileStreamModal#mobileStreamModal .stc-golive-action::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 168px !important;
    height: 168px !important;
    margin-left: -84px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 122, 105, 0.8) !important;
    pointer-events: none !important;
    animation: stc-golive-ring 2.6s cubic-bezier(.16, .84, .32, 1) infinite !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-action::after { animation-delay: 1.3s !important; }
@keyframes stc-golive-ring {
    0% { transform: scale(0.94); opacity: 0.55; }
    70% { opacity: 0.12; }
    100% { transform: scale(1.5); opacity: 0; }
}
#mobileStreamModal#mobileStreamModal .stc-golive-btn {
    position: relative !important;
    width: 168px !important;
    height: 168px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 46%, #FF6A5A 0%, #EE2E1E 55%, #B4140C 100%) !important;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        inset 0 -10px 18px rgba(0, 0, 0, 0.28),
        0 0 34px 4px rgba(233, 39, 27, 0.55),
        0 20px 44px -16px rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    cursor: pointer;
    transform-origin: 50% 50% !important;
    animation: stc-golive-pulse 2.6s cubic-bezier(.45, 0, .2, 1) infinite !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-btn::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    pointer-events: none !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-btn i { position: relative !important; font-size: 29px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-btn span {
    position: relative !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-btn.is-busy { animation: none !important; opacity: 0.85 !important; transform: none !important; }
@keyframes stc-golive-pulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 34px 4px rgba(233, 39, 27, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.28), 0 0 52px 10px rgba(233, 39, 27, 0.75), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    70% { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
    #mobileStreamModal#mobileStreamModal .stc-golive-btn { animation: none !important; }
    #mobileStreamModal#mobileStreamModal .stc-golive-action::before,
    #mobileStreamModal#mobileStreamModal .stc-golive-action::after { animation: none !important; display: none !important; }
}
#mobileStreamModal#mobileStreamModal .stc-golive-status {
    max-width: 280px !important;
    text-align: center !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-foot {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.65) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
    text-align: center !important;
}

/* The starting stages on the pass screen sit on the dark photo. Without
   these the light-theme sweep paints every line black and the whole block
   disappears against the picture. Same treatment as the owner's Go Live
   placeholder on the Stream tab (mobile-stream-empty.css). */
#mobileStreamModal#mobileStreamModal .stc-golive-status.is-starting { background: transparent !important; border: 0 !important; padding: 0 !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-heading {
    justify-content: center !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 13px !important; font-weight: 700 !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-heading::before { border-color: rgba(255, 255, 255, 0.25) !important; border-top-color: #6fe3c6 !important; width: 14px !important; height: 14px !important; flex-basis: 14px !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps { width: 240px !important; margin: 14px auto 10px !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps span {
    border-top-color: rgba(255, 255, 255, 0.22) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps .is-done { border-top-color: #6fe3c6 !important; color: #6fe3c6 !important; -webkit-text-fill-color: #6fe3c6 !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-steps .is-current { border-top-color: #FFFFFF !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#mobileStreamModal#mobileStreamModal .stc-golive-status .stream-start-hint {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 10.5px !important; font-weight: 500 !important; line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
}
#mobileStreamModal#mobileStreamModal .stc-golive-status[role="alert"] { color: #ffb4a8 !important; -webkit-text-fill-color: #ffb4a8 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important; }

/* Quiet dark confirmation for stream-pass copy/share -- a small centered
   pill instead of the loud green booking-toast gradient. */
body div.stc-copied-toast.stc-copied-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate(-50%, 10px) !important;
    z-index: 1000010 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: rgba(17, 18, 20, 0.94) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.55) !important;
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.2, .9, .2, 1) !important;
}
body div.stc-copied-toast.stc-copied-toast span {
    color: #FBFBF9 !important;
    -webkit-text-fill-color: #FBFBF9 !important;
}
body div.stc-copied-toast.stc-copied-toast.is-visible { opacity: 1 !important; transform: translate(-50%, 0) !important; }
body div.stc-copied-toast.stc-copied-toast i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border-radius: 50% !important;
    background: #24c26a !important;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
    font-size: 10px !important;
}
@media (prefers-reduced-motion: reduce) { body div.stc-copied-toast.stc-copied-toast { transition: opacity 120ms linear !important; } }

/* One quiet line under Go Live: school Wi-Fi is the usual reason a stream struggles.
   Doubled id beats the page's leaf-text repaint that forces black inside modal ids. */
#mobileStreamModal#mobileStreamModal .stc-golive-hint { margin-top: 12px; font-size: 12px; font-weight: 500 !important; line-height: 1.4; text-align: center; color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important; }

/* Meme Streamer (memes2apps apps): the pass Go Live screen in lime with dark
   type. Athlete Streamer and every other site keep the red above. */
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-action::before,
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-action::after {
    border-color: rgba(216, 255, 53, 0.8) !important;
}
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-btn {
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 32%),
        radial-gradient(circle at 50% 46%, #E8FF7A 0%, #C6F432 55%, #7FA300 100%) !important;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -10px 18px rgba(0, 0, 0, 0.2),
        0 0 34px 4px rgba(198, 244, 50, 0.5),
        0 20px 44px -16px rgba(0, 0, 0, 0.75) !important;
    animation-name: stc-golive-pulse-meme !important;
}
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-btn,
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-btn i,
#mobileStreamModal#mobileStreamModal[data-stream-brand="meme"] .stc-golive-btn span {
    color: #0B0B0C !important;
    -webkit-text-fill-color: #0B0B0C !important;
    text-shadow: none !important;
}
@keyframes stc-golive-pulse-meme {
    0%, 100% { transform: scale(1); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.2), 0 0 34px 4px rgba(198, 244, 50, 0.5), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    45% { transform: scale(1.045); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.2), 0 0 52px 10px rgba(198, 244, 50, 0.7), 0 20px 44px -16px rgba(0, 0, 0, 0.75); }
    70% { transform: scale(1.015); }
}