/* Header clearance tracks the real bar height. This was
   max(78px, calc(--mobile-app-header-height - 54px)), which clears a 74px
   header but not the 100px one the app renders when the header pill is active:
   the subtraction yields 46px, the floor picks 78px, and the top 22px of the
   owner's revenue figure sits behind the bar. The header already publishes its
   own height -- follow it rather than guessing at an offset from it. */
html body.market-active #market-main-area.market-owner-home-active,html body.market-active #market-main-area[data-market-role="owner"]{padding-top:calc(var(--mobile-app-header-height, 100px) + 8px)!important}#market-main-area.market-owner-home-active>.mobile-market-guest-view{display:none!important}.mobile-market-owner-home{display:none;position:relative;z-index:3;min-height:100%;padding:28px 18px 112px;color:#111;background:#f7f7f4;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif}#market-main-area.market-owner-home-active>.mobile-market-owner-home{display:block}.market-owner-home__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.market-owner-home__header span,.market-owner-home__title span,.market-owner-home__revenue>span{font-size:10px;font-weight:900;letter-spacing:.16em;color:#777}.market-owner-home__header h1{font-size:34px;line-height:1;margin:5px 0 0;letter-spacing:-.04em}.market-owner-home__header button{width:42px;height:42px;border:1px solid #ddd;border-radius:50%;background:#fff;color:#111}.market-owner-home__status{width:100%;display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;text-align:left;border:0;border-radius:19px;background:#111;color:#fff;padding:15px}.market-owner-home__status>i:first-child{width:40px;height:40px;border-radius:13px;background:#fff;color:#111;display:grid;place-items:center}.market-owner-home__status strong,.market-owner-home__status small{display:block}.market-owner-home__status strong{font-size:14px}.market-owner-home__status small{font-size:11px;color:#bbb;margin-top:4px}.market-owner-home__revenue{padding:28px 2px 20px}.market-owner-home__revenue>strong{display:block;font-size:52px;line-height:1;margin-top:7px;letter-spacing:-.06em}.market-owner-home__revenue small{display:block;color:#777;font-size:12px;font-weight:700;margin-top:8px}.market-owner-home__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border:0;padding:4px 0}.market-owner-home__metrics article{padding:14px 12px;border:0;border-radius:16px;background:#f6f6f7}.market-owner-home__metrics article:first-child{padding-left:12px}.market-owner-home__metrics article:last-child{border:0}.market-owner-home__metrics span{font-size:9px;font-weight:900;color:#777;text-transform:uppercase}.market-owner-home__metrics strong{display:block;font-size:20px;margin-top:7px}.market-owner-home__title{display:flex;align-items:end;justify-content:space-between;margin:26px 2px 11px}.market-owner-home__title h2{font-size:19px;margin:4px 0 0}.market-owner-home__title>button{border:0;background:transparent;color:#111;font-size:11px;font-weight:900}.market-owner-home__title-actions{display:flex;align-items:center;gap:8px}.market-owner-home__title-actions>button{border:0;background:transparent;color:#111!important;-webkit-text-fill-color:#111!important;font-size:11px;font-weight:900}html body.market-active #market-main-area .market-owner-home__title-actions>button[data-market-owner-reward-create],html body.market-active #market-main-area .market-owner-home__title-actions>button[data-market-owner-reward-create] *{padding:7px 13px;border-radius:999px;background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important}.market-owner-home__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.market-owner-home__actions button{height:88px;border:1px solid #ddd;border-radius:17px;background:#fff;color:#111;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:13px;text-align:left;font-size:11px;font-weight:900}.market-owner-home__actions i{font-size:17px}.market-owner-home__recent,.market-owner-home__rewards{border:0;border-radius:18px;background:#f6f6f7;overflow:hidden}.market-owner-home__recent>button{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #eee;background:#fff;color:#111;padding:14px;text-align:left}.market-owner-home__recent>button:last-child{border:0}.market-owner-home__recent strong,.market-owner-home__recent small{display:block}.market-owner-home__recent small{color:#777;margin-top:4px}.market-owner-home__recent>button>b{color:#16803a}.market-owner-home__empty{padding:22px;text-align:center;display:flex;flex-direction:column;gap:6px}.market-owner-home__empty span{color:#777;font-size:12px}.market-owner-home__rewards{display:grid;grid-template-columns:repeat(3,1fr);padding:15px}.market-owner-home__rewards article{text-align:center;border-right:1px solid #eee}.market-owner-home__rewards article:last-child{border:0}.market-owner-home__rewards strong,.market-owner-home__rewards span{display:block}.market-owner-home__rewards strong{font-size:22px}.market-owner-home__rewards span{font-size:10px;color:#777;margin-top:4px;font-weight:800}

/* Token launch offer -- the first Market screen a memes2apps app sees. Open
   space and the meme's own image, because the image is the pitch. */
/* Entering Market: the area used to paint the legacy Bucks form, then a blank
   sheet, then the chart -- three screens before the real one. While the entry
   screen is being decided, hide the legacy children and show one spinner. The
   spinner is a pseudo-element on purpose: the area's blanket `*` repaint rules
   never match ::after, so its colours survive. Same ring as the Bytes loader. */
html body.market-active #market-main-area.market-entering>.market-guest-home,
html body.market-active #market-main-area.market-entering>.mobile-market-guest-view,
html body.market-active #market-main-area.market-entering>.mobile-market-owner-home,
html body.market-active #market-main-area.market-entering>div:nth-child(2){display:none!important}
/* No spinner over a screen that is already up from the last visit: the
   launch offer and the coming-soon screen stay put while the state re-checks. */
html body.market-active #market-main-area.market-entering:not(.market-token-launch-active):not(:has(>#mobile-market-guest-waiting))::after{content:"";position:fixed;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:#111;animation:market-entering-spin .8s linear infinite;z-index:4}
/* The sheet's spinner sits exactly where the area's was, so the hand-off
   between them is invisible. */
.market-entry-spinner{position:fixed;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;padding:0}
.market-entry-spinner>i{display:block;width:40px;height:40px;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:#111;animation:market-entering-spin .8s linear infinite}
@keyframes market-entering-spin{to{transform:rotate(360deg)}}
html body.market-active #market-main-area.market-token-launch-active{padding-top:calc(var(--mobile-app-header-height, 100px) + 8px)!important}
html body.market-active #market-main-area.market-token-launch-active>.market-guest-home,
html body.market-active #market-main-area.market-token-launch-active>.mobile-market-guest-view,
html body.market-active #market-main-area.market-token-launch-active>div:nth-child(2){display:none!important}
.market-token-launch{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:100%;padding:22px 24px 120px;background:#fff;color:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif}
.market-token-launch__art{width:132px;height:132px;margin:64px 0 26px;border-radius:34px;overflow:hidden;background:#f2f2f4;display:grid;place-items:center}
.market-token-launch__art img{width:100%;height:100%;object-fit:cover;display:block}
.market-token-launch__art b{font-size:40px;font-weight:900;color:#9a9aa2!important;-webkit-text-fill-color:#9a9aa2!important}
.market-token-launch__eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#777!important;-webkit-text-fill-color:#777!important}
.market-token-launch h1{margin:7px 0 0;font-size:40px;line-height:1;letter-spacing:-.045em;color:#0a0a0a!important;-webkit-text-fill-color:#0a0a0a!important}
.market-token-launch p{margin:14px 0 0;max-width:320px;font-size:14px;line-height:1.5;font-weight:600;color:#6b6b73!important;-webkit-text-fill-color:#6b6b73!important}
html body.market-active #market-main-area .market-token-launch>button,
html body.market-active #market-main-area .market-token-launch>button *{width:100%;max-width:340px;min-height:58px;margin-top:26px;border:0;border-radius:999px;background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px;font-weight:850;letter-spacing:.01em}
.market-token-launch small{margin-top:12px;font-size:11px;font-weight:700;color:#9a9aa2!important;-webkit-text-fill-color:#9a9aa2!important}
.market-token-launch p a{font-weight:750;text-decoration:underline;text-underline-offset:2px}
/* The page paints every descendant of #market-main-area black with
   [data-theme] #market-main-area *{color:#000!important}, which outranks a
   plain class selector, so the link came out black. Matched here at the same
   specificity for each theme. */
html body.market-active #market-main-area .market-token-launch p a,
[data-theme="light"] #market-main-area .market-token-launch p a,
[data-theme="light-accent"] #market-main-area .market-token-launch p a,
[data-theme="dark"] #market-main-area .market-token-launch p a{color:#2563eb!important;-webkit-text-fill-color:#2563eb!important}

/* Token trading panel inside Activity. The coin sits above its own history:
   price, size, buy/sell. Colours are pinned because the market surface forces
   black onto every descendant. */
.market-trade{padding:0 0 22px;border-bottom:1px solid #ececec;margin-bottom:6px}
.market-trade__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.market-trade__head>div:first-child>span{display:block;font-size:10px;font-weight:900;letter-spacing:.16em;color:#777!important;-webkit-text-fill-color:#777!important}
.market-trade__head>div:first-child>strong{display:block;font-size:34px;line-height:1;margin-top:6px;letter-spacing:-.04em;color:#0a0a0a!important;-webkit-text-fill-color:#0a0a0a!important}
.market-trade__cap{text-align:right}
.market-trade__cap small{display:block;font-size:9px;font-weight:900;letter-spacing:.14em;color:#777!important;-webkit-text-fill-color:#777!important}
.market-trade__cap b{display:block;margin-top:5px;font-size:16px;color:#0a0a0a!important;-webkit-text-fill-color:#0a0a0a!important}
.market-trade__stage{margin-top:10px;font-size:11px;font-weight:750;color:#8a8a8f!important;-webkit-text-fill-color:#8a8a8f!important}
.market-trade__amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button{min-height:40px;border:1px solid #e4e4e7!important;border-radius:999px;background:#fff!important;color:#52525b!important;-webkit-text-fill-color:#52525b!important;font-size:11px;font-weight:900}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button.is-selected{border-color:transparent!important;background:#e4e4e7!important;color:#101010!important;-webkit-text-fill-color:#101010!important}
.market-trade__actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button{min-height:54px;border:0!important;border-radius:999px;font-size:15px;font-weight:900}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-buy,html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-buy *,html body #mobile-market-activity-modal .market-trade__actions>button.is-buy{background:#111!important;background-color:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-sell,html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-sell *,html body #mobile-market-activity-modal .market-trade__actions>button.is-sell{background:#f4f4f5!important;background-color:#f4f4f5!important;color:#3f3f46!important;-webkit-text-fill-color:#3f3f46!important}
html body.market-active #mobile-market-activity-modal .market-trade__link{display:block;margin-top:14px;text-align:center;font-size:11px;font-weight:800;color:#8a8a8f!important;-webkit-text-fill-color:#8a8a8f!important}

/* Activity chart, ported from the standalone design: candlesticks in a boxed
   frame with a volume histogram, hairline rules, and restrained up/down reds
   and greens. Colours are pinned because Market repaints descendants. */
.market-chart__top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-top:0}
.market-chart__coin{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;align-self:center;background:#F3F3F5;border:1px solid #EDEDEF}
.market-chart__top>span{font-size:11px;font-weight:600;letter-spacing:.1em;color:#8A8A8F!important;-webkit-text-fill-color:#8A8A8F!important}
.market-chart__top>strong{font-size:34px;line-height:1;letter-spacing:-1.2px;font-weight:600;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-chart__top>em{font-style:normal;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.market-chart__top>em.is-up,.market-stats b.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
.market-chart__top>em.is-down,.market-stats b.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
.market-chartbox{border:1px solid #EDEDEF;border-radius:14px;overflow:hidden;margin-top:0;padding-top:14px}
.market-chartbox .market-chart__svg{display:block;padding:0 6px 8px;width:100%;height:auto}
/* Canvas chart, ported from the blueprint. touch-action is pan-y rather than
   none: the chart is inside a scrolling modal, so a vertical swipe has to keep
   scrolling the page while a horizontal drag pans the candles. */
.market-chart__wrap{position:relative;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.market-chart__wrap>canvas{display:block;width:100%;height:250px}
.market-chart__hud{position:absolute;left:10px;top:9px;display:flex;gap:8px;align-items:center;pointer-events:none;font-size:9.5px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-chart__hud b{font-weight:600;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-chart__hud .o{color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-chart__foot{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 10px;border-top:1px solid #EDEDEF;font-size:10px;letter-spacing:.06em;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-chart__hint{color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-size:9px}
.market-chart__scales{margin-left:auto;display:flex;gap:2px}
html body.market-active #mobile-market-activity-modal .market-chart__scales>button{padding:4px 7px;border:0!important;border-radius:6px;background:transparent!important;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-size:10px;letter-spacing:.06em;font-weight:500}
html body.market-active #mobile-market-activity-modal .market-chart__scales>button.is-selected{background:#F3F3F5!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-weight:600}
html body.market-active #mobile-market-activity-modal .market-chart__scales>button:hover:not(.is-selected),
html body.market-active #mobile-market-activity-modal .market-chart__scales>button:active:not(.is-selected){color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
/* Buy follows the blueprint: the primary action turns red on hover. */
html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-buy:hover{background:#C8102E!important;background-color:#C8102E!important}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-sell:hover{border-color:#0E0E0F!important}
/* A pointer belongs on everything clickable here. */
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button,
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button,
html body.market-active #mobile-market-activity-modal .market-chart__scales>button,
html body.market-active #mobile-market-activity-modal .market-chart__fit{cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.market-chart__empty{height:200px;display:grid;place-items:center;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-size:12px;font-weight:600}
.market-chart__ranges{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:12px}
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button{padding:9px 0;border:1px solid #E2E2E5!important;border-radius:9px;background:#fff!important;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important;font-size:11px;font-weight:600;letter-spacing:.08em}
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button.is-selected{background:#0E0E0F!important;border-color:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button:hover:not(.is-selected),
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button:focus-visible:not(.is-selected){border-color:#0E0E0F!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
/* Touch has no hover, so the press itself has to acknowledge the tap. */
html body.market-active #mobile-market-activity-modal .market-chart__ranges>button:active:not(.is-selected){background:#F3F3F5!important;border-color:#0E0E0F!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px}
.market-stats article{border:1px solid #EDEDEF;border-radius:11px;padding:11px 12px;background:transparent}
.market-stats span{display:block;font-size:8.5px;font-weight:600;letter-spacing:.12em;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-stats b{display:block;margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-trade__amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:12px}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button{padding:10px 0;border:1px solid #E2E2E5!important;border-radius:9px;background:#fff!important;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important;font-size:10px;font-weight:600;letter-spacing:.06em}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button.is-selected{background:#F3F3F5!important;border-color:#0E0E0F!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button:hover:not(.is-selected),
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button:focus-visible:not(.is-selected){border-color:#0E0E0F!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body.market-active #mobile-market-activity-modal .market-trade__amounts>button:active:not(.is-selected){background:#F3F3F5!important;border-color:#0E0E0F!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
/* Buy and Sell dock to the bottom of the Activity surface instead of
   scrolling away with the page. The bar sits inside the modal, whose own
   bottom already stops at the app's bottom nav, so nothing overlaps it. The
   scroller gets padding equal to the bar so the last rows stay reachable. */
html body.market-active #mobile-market-activity-modal .market-trade__dock{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #EDEDEF}
html body.market-active #mobile-market-activity-modal .market-trade__dock .market-trade__actions{padding-top:0;margin-top:0}
html body.market-active #mobile-market-activity-modal .market-trade__dock .market-trade__quote{padding-top:0;padding-bottom:8px}
html body.market-active #mobile-market-activity-modal-list.has-trade-dock{padding-bottom:150px}
/* Stats / Audit panel and the market-cap-to-ATH bar, ported from the blueprint. */
.market-panel{border:1px solid #EDEDEF;border-radius:16px;margin-top:12px;padding:14px}
.market-panel__top{display:flex;align-items:center;gap:4px}
html body.market-active #mobile-market-activity-modal .market-panel__top>button{padding:6px 12px;border:0!important;border-radius:8px;background:transparent!important;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-size:13px;font-weight:600;letter-spacing:-.2px}
html body.market-active #mobile-market-activity-modal .market-panel__top>button.is-selected{background:#F3F3F5!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body.market-active #mobile-market-activity-modal .market-panel__top>button:hover:not(.is-selected){color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-panel__tf{margin-left:auto;display:flex;gap:2px}
html body.market-active #mobile-market-activity-modal .market-panel__tf>button{padding:5px 9px;border:0!important;border-radius:7px;background:transparent!important;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-size:10px;letter-spacing:.06em;font-weight:500}
html body.market-active #mobile-market-activity-modal .market-panel__tf>button.is-selected{background:#F3F3F5!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-weight:600}
html body.market-active #mobile-market-activity-modal .market-panel__tf>button:hover:not(.is-selected){color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-panel__kv{display:flex;align-items:baseline;justify-content:space-between;padding-top:14px;font-size:13px;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-panel__kv b{font-size:14px;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body #mobile-market-activity-modal .market-panel__kv .is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
html body #mobile-market-activity-modal .market-panel__kv .is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
html body #mobile-market-activity-modal .market-panel__kv b.tone-good{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
html body #mobile-market-activity-modal .market-panel__kv b.tone-warn{color:#B8860B!important;-webkit-text-fill-color:#B8860B!important}
html body #mobile-market-activity-modal .market-panel__kv b.tone-bad{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
.market-panel__pair{padding-top:14px}
.market-panel__pairtop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;letter-spacing:-.1px;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-panel__pairtop b{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}
html body #mobile-market-activity-modal .market-panel__pairtop b.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
html body #mobile-market-activity-modal .market-panel__pairtop b.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
.market-panel__bar{display:flex;gap:4px;padding-top:6px}
.market-panel__bar i{height:5px;border-radius:3px;display:block}
.market-panel__bar i.l{background:#18A957}
.market-panel__bar i.r{background:#C8102E;opacity:.75}
.market-panel__empty{padding-top:14px;font-size:12px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-mc{display:flex;align-items:center;gap:12px;border:1px solid #EDEDEF;border-radius:16px;margin-top:12px;padding:14px;font-size:13px;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-mc b{font-weight:600;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-mc__track{flex:1;height:6px;border-radius:3px;background:#F0F0F2;overflow:hidden}
.market-mc__track i{display:block;height:100%;background:#0E0E0F;border-radius:3px}
/* Sell size, and what the trade actually returns before you sign it. */
.market-trade__sell{padding-top:8px}
.market-trade__quote{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:12px;min-height:16px;font-size:11.5px;font-variant-numeric:tabular-nums;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-trade__quote b{font-weight:600;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-trade__quote--warn,.market-trade__quote--warn b{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
.market-trade__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button{padding:15px 0;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.2px;border:0!important}
html body.market-active #mobile-market-activity-modal .market-trade__actions>button.is-sell{border:1px solid #E2E2E5!important}
html body.market-active #mobile-market-activity-modal .market-trade__link{display:block;text-align:center;padding-top:14px;font-size:12px;font-weight:500;color:#8A8A8F!important;-webkit-text-fill-color:#8A8A8F!important;text-decoration:underline;text-underline-offset:3px}
.market-trades__head{display:flex;align-items:baseline;justify-content:space-between;padding-top:18px;margin-top:20px;border-top:1px solid #EDEDEF}
.market-trades__head>span:first-child{font-size:10px;font-weight:600;letter-spacing:.14em;color:#8A8A8F!important;-webkit-text-fill-color:#8A8A8F!important}
.market-trades__head>span:last-child{font-size:11px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-trade-row{display:grid;grid-template-columns:46px 1fr auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #F4F4F6}
.market-trade-row .side{font-size:10px;font-weight:600;letter-spacing:.06em}
.market-trade-row .who{font-size:13px;font-weight:500;letter-spacing:-.1px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-trade-row .usd{font-size:12.5px;font-variant-numeric:tabular-nums;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-trade-row .ago{font-size:11px;font-variant-numeric:tabular-nums;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;min-width:34px;text-align:right}
.market-trades__empty{padding:22px 0;text-align:center;font-size:12px;font-weight:600;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
/* Your holding, share of supply, and profit -- the coin's numbers made personal.
   Reuses the stat-card language above so it reads as one screen. */
.market-position__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:12px}
.market-position__grid article{border:1px solid #EDEDEF;border-radius:11px;padding:11px 12px;background:transparent}
.market-position__grid span{display:block;font-size:8.5px;font-weight:600;letter-spacing:.12em;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-position__grid b{display:block;margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-position__grid b.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
.market-position__grid b.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
.market-position__grid b.market-position__unknown{font-size:13px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-position__foot{display:flex;align-items:baseline;justify-content:space-between;padding-top:10px;font-size:11px;font-variant-numeric:tabular-nums;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-position__foot .is-up{font-weight:600;color:#18A957!important;-webkit-text-fill-color:#18A957!important}
.market-position__foot .is-down{font-weight:600;color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
/* Your own trade, so it can be found at a glance in a list of strangers. */
.market-trade-row.is-mine{background:#F7F7F9}
.market-trade-row.is-mine .who{font-weight:700;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}

/* The Market wallet is a crypto wallet: connect Phantom and read what it
   holds. No Bucks balance, no Stripe, no PIN -- the coin is the currency. */
/* The drawer starts at the top of the viewport, behind the fixed app header,
   so the wallet has to clear it -- otherwise the title renders underneath and
   reads as cut off. The safe-area inset covers the notch on real devices. */
html body #market-drawer #market-drawer-content .mobile-market-module.market-crypto-drawer{padding-top:calc(var(--mobile-app-header-height, 74px) + env(safe-area-inset-top, 0px) + 12px)!important}
.crypto-wallet{display:block}
.crypto-wallet__connect{padding:34px 4px 0;text-align:center}
.crypto-wallet__mark{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:#F3F3F5;display:grid;place-items:center;font-size:26px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.crypto-wallet__connect h1{margin:0;font-size:22px;letter-spacing:-.5px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.crypto-wallet__connect small{display:block;margin-top:12px;font-size:11px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.crypto-wallet__connect p{margin:10px auto 0;max-width:290px;font-size:13px;line-height:1.5;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
/* The owner drawer paints its own button colours, so these win explicitly. */
html body .crypto-wallet__connect>button,
html body #market-drawer .crypto-wallet__connect>button,
html body.market-active .crypto-wallet__connect>button{width:100%;margin-top:26px;padding:16px 0;border:0!important;border-radius:999px;background:#0E0E0F!important;background-color:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px;font-weight:600;letter-spacing:-.2px}
html body.market-active .crypto-wallet__connect>button[disabled]{opacity:.6!important}
.crypto-wallet__total{padding:26px 2px 20px;text-align:left}
.crypto-wallet__total>span{display:block;font-size:9px;font-weight:600;letter-spacing:.16em;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.crypto-wallet__total>strong{display:block;margin-top:8px;font-size:42px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body.market-active .crypto-wallet__total>button{margin-top:12px;padding:5px 11px;border:1px solid #EDEDEF!important;border-radius:999px;background:#fff!important;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.crypto-wallet__rows{border-top:1px solid #EDEDEF}
.crypto-wallet__row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid #F4F4F6}
.crypto-wallet__icon{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#F3F3F5;display:grid;place-items:center;font-size:15px;font-weight:700;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.crypto-wallet__icon img{width:100%;height:100%;object-fit:cover}
.crypto-wallet__icon--sol{background:#0E0E0F;color:#fff!important;-webkit-text-fill-color:#fff!important}
.crypto-wallet__name b{display:block;font-size:14px;font-weight:600;letter-spacing:-.2px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.crypto-wallet__name i{display:block;margin-top:2px;font-style:normal;font-size:11px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.crypto-wallet__amt{text-align:right}
.crypto-wallet__amt b{display:block;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.crypto-wallet__amt i{display:block;margin-top:2px;font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.crypto-wallet__actions{display:grid;gap:9px;padding-top:22px}
html body .crypto-wallet__actions>button,
html body #market-drawer .crypto-wallet__actions>button,
html body.market-active .crypto-wallet__actions>button{padding:15px 0;border:0!important;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.2px;background:#0E0E0F!important;background-color:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .crypto-wallet__actions>button[data-crypto-disconnect],
html body #market-drawer .crypto-wallet__actions>button[data-crypto-disconnect],
html body.market-active .crypto-wallet__actions>button[data-crypto-disconnect]{border:1px solid #E2E2E5!important;background:#fff!important;background-color:#fff!important;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}

.crypto-wallet__debug{margin-top:22px;padding:12px;border:1px solid #EDEDEF;border-radius:11px;background:#FBFBFC;font-size:10px;line-height:1.7;word-break:break-all;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.crypto-wallet__debug b{color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}

/* Shown in the browser after Phantom returns there: the app cannot be
   redirected into on iOS, so the hand-off has to be explained. */
.wallet-return{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px;background:rgba(14,14,15,.55)}
.wallet-return__card{width:100%;max-width:320px;padding:28px 22px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.wallet-return__tick{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:#18A957;color:#fff!important;-webkit-text-fill-color:#fff!important;display:grid;place-items:center;font-size:24px;font-weight:700}
.wallet-return__card h1{margin:0;font-size:20px;letter-spacing:-.4px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.wallet-return__card p{margin:10px 0 0;font-size:13px;line-height:1.5;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.wallet-return__card p b{color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-variant-numeric:tabular-nums}
html body .wallet-return__card>button{width:100%;margin-top:20px;padding:14px 0;border:0!important;border-radius:999px;background:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px;font-weight:600}

html body .crypto-wallet__connect>button[data-crypto-recheck]{background:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.crypto-wallet__connect small b[data-crypto-cancel]{text-decoration:underline;cursor:pointer;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}

/* Coin hero: what an owner running on a token actually needs on the home --
   price, how it moved, and the way into trading. Replaces the USD revenue
   block rather than sitting alongside it. */
.market-owner-home__coin{padding:26px 2px 8px}
.market-owner-home__coin-load{font-size:12px;color:#777}
.market-owner-home__coin-top{display:flex;align-items:center;gap:9px}
.market-owner-home__coin-top img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#f2f2f4}
.market-owner-home__coin-top span{font-size:11px;font-weight:900;letter-spacing:.14em;color:#777}
.market-owner-home__coin>strong{display:block;margin-top:10px;font-size:46px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.market-owner-home__coin-meta{display:flex;align-items:baseline;gap:14px;margin-top:10px;font-variant-numeric:tabular-nums}
.market-owner-home__coin-meta small{font-size:12px;font-weight:700;color:#777}
html body #market-main-area .market-owner-home__coin-meta small.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
html body #market-main-area .market-owner-home__coin-meta small.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}
html body.market-active #market-main-area .market-owner-home__coin>button{width:100%;margin-top:20px;padding:15px 0;border:0!important;border-radius:999px;background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px;font-weight:850}

/* Retry affordances on states that would otherwise sit on a placeholder. */
html body #mobile-market-activity-modal .market-panel__empty>button,
html body #market-main-area .market-owner-home__coin-load>button{display:block;margin:10px auto 0;padding:7px 16px;border:1px solid #E2E2E5!important;border-radius:999px;background:#fff!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-size:11px;font-weight:700}
/* Paste an existing coin instead of minting a new one. Sits under the launch
   button as the quieter of the two paths -- most owners are launching, and the
   ones who already have a coin are looking for exactly this. */
.market-token-launch__link{width:100%;max-width:340px;margin:26px auto 0;padding-top:22px;border-top:1px solid #ececec;display:flex;flex-direction:column;gap:10px}
.market-token-launch__link>span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8f!important;-webkit-text-fill-color:#8a8a8f!important}
html body.market-active #market-main-area .market-token-launch__link>input{width:100%;box-sizing:border-box;min-height:46px;padding:0 14px;border:1px solid #e2e2e5!important;border-radius:12px;background:#fff!important;color:#0e0e0f!important;-webkit-text-fill-color:#0e0e0f!important;font-size:13px;font-variant-numeric:tabular-nums}
html body.market-active #market-main-area .market-token-launch__link>button{width:100%;min-height:46px;margin:0;border:1px solid #0e0e0f!important;border-radius:999px;background:#fff!important;color:#0e0e0f!important;-webkit-text-fill-color:#0e0e0f!important;font-size:14px;font-weight:800}
html body.market-active #market-main-area .market-token-launch__link>button:disabled{opacity:.55}
.market-token-launch__link>em{font-style:normal;font-size:12px;font-weight:650;color:#8a8a8f!important;-webkit-text-fill-color:#8a8a8f!important;min-height:16px}
.market-token-launch__link>em.is-error{color:#c8102e!important;-webkit-text-fill-color:#c8102e!important}

/* Custom amount. Sits under the presets as the quieter option -- most trades
   are one of the four sizes, and this is for the one that is not. */
.market-trade__custom{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 12px;border:1px solid #E2E2E5;border-radius:9px;background:#fff}
html body.market-active #mobile-market-activity-modal .market-trade__custom>input{flex:1;min-width:0;height:40px;padding:0;border:0!important;background:transparent!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;outline:none}
html body.market-active #mobile-market-activity-modal .market-trade__custom>input::placeholder{color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;font-weight:500}
.market-trade__custom>span{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;color:#8A8A8F!important;-webkit-text-fill-color:#8A8A8F!important}




/* Wallet: white and open. The balance is the screen -- it gets the size, and
   the actions stay quiet underneath so they do not compete with it. Colours
   carry !important because the drawer repaints button text through rules
   that beat stylesheet order. */
.cw-hero{padding:18px 0 22px}
.cw-hero__label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.18em;color:#B4B4B9!important;-webkit-text-fill-color:#B4B4B9!important}
.cw-hero__figure{display:flex;align-items:baseline;gap:12px;margin-top:14px}
.cw-hero__figure>strong{font-size:66px;font-weight:600;line-height:.92;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
html body .cw-hero__figure>button,
html body.market-active .cw-hero__figure>button{flex:none;padding:0;border:0!important;border-radius:0;background:transparent!important;color:#C4C4C9!important;-webkit-text-fill-color:#C4C4C9!important;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;letter-spacing:.14em}
/* Only takes space when there is a change to show. */
.cw-hero__sub{display:block;margin-top:12px;font-size:13.5px;color:#8A8A8F!important;-webkit-text-fill-color:#8A8A8F!important}
.cw-hero__sub:empty{display:none}
.cw-hero__sub em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.cw-hero__sub em.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
.cw-hero__sub em.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}

/* Text-weight actions. Buy is the only filled one; the rest are just words. */
.cw-do{display:flex;align-items:center;gap:10px;padding-bottom:34px}
html body .cw-do>button,
html body #market-drawer .cw-do>button,
html body.market-active .cw-do>button{padding:11px 20px;border:1px solid #E8E8EB!important;border-radius:999px;background:#fff!important;background-color:#fff!important;color:#4A4A4F!important;-webkit-text-fill-color:#4A4A4F!important;font-size:13.5px;font-weight:500;letter-spacing:-.15px}
html body .cw-do>button.is-primary,
html body #market-drawer .cw-do>button.is-primary,
html body.market-active .cw-do>button.is-primary{padding:11px 30px;border:0!important;background:#0E0E0F!important;background-color:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:600}

.cw-low{margin:-18px 0 26px;font-size:12.5px;color:#8A6A12!important;-webkit-text-fill-color:#8A6A12!important}

.cw-tabs{display:flex;gap:20px;padding-bottom:0;border-bottom:1px solid #F2F2F4}
html body .cw-tabs>button,
html body #market-drawer .cw-tabs>button,
html body.market-active .cw-tabs>button{padding:0 0 11px;border:0!important;border-radius:0!important;background:transparent!important;background-color:transparent!important;box-shadow:none;color:#B4B4B9!important;-webkit-text-fill-color:#B4B4B9!important;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.14em}
html body .cw-tabs>button.is-on,
html body #market-drawer .cw-tabs>button.is-on,
html body.market-active .cw-tabs>button.is-on{background:transparent!important;background-color:transparent!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;box-shadow:inset 0 -2px 0 0 #0E0E0F}

.cw-cards{display:flex;flex-direction:column}
.cw-tk{display:flex;align-items:center;gap:14px;padding:20px 0;border-bottom:1px solid #F4F4F6}
.cw-tk__swatch{width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:600}
.cw-tk__swatch img{width:100%;height:100%;object-fit:cover}
.cw-tk__mid{flex:1;min-width:0}
.cw-tk__mid b{display:block;font-size:16px;font-weight:600;letter-spacing:-.25px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.cw-tk__mid i{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.cw-tk__end{flex:none;text-align:right}
.cw-tk__end b{font-size:17px;font-weight:600;letter-spacing:-.35px;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.cw-tk__flag{margin-left:7px;padding:2px 5px;border-radius:4px;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8px;font-weight:600;letter-spacing:.1em;vertical-align:1px}

.cw-acts{display:flex;flex-direction:column}
.cw-act{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid #F4F4F6}
.cw-act__glyph{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:14px}
.cw-act__glyph.is-buy{background:#ECF8F1;color:#128A45!important;-webkit-text-fill-color:#128A45!important}
.cw-act__glyph.is-sell{background:#F5F5F6;color:#6E6E73!important;-webkit-text-fill-color:#6E6E73!important}
.cw-act__mid{flex:1;min-width:0}
.cw-act__mid b{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.cw-act__mid i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-act__end{flex:none;text-align:right}
.cw-act__end b{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.cw-act__end i{display:none}
.cw-empty{padding:44px 2px;text-align:center;font-size:13.5px;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
/* Sits under the list, not floating in the middle of the page. */
.cw-foot{margin:22px 0 0;text-align:left;font-size:11.5px;color:#C4C4C9!important;-webkit-text-fill-color:#C4C4C9!important}

/* The wallet's own value across the day. Stretches to the column; the fixed
   viewBox means nothing has to be measured. */
.cw-chart{padding:10px 0 2px}
.cw-spark{display:block;width:100%;height:84px}
.cw-spark__axis{display:flex;align-items:center;justify-content:space-between;padding-top:9px}
.cw-spark__axis span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:.12em;color:#C4C4C9!important;-webkit-text-fill-color:#C4C4C9!important}
.cw-tk__end i{display:block;margin-top:4px;font-style:normal;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cw-tk__end i.is-up{color:#18A957!important;-webkit-text-fill-color:#18A957!important}
.cw-tk__end i.is-down{color:#C8102E!important;-webkit-text-fill-color:#C8102E!important}

/* Coming-soon screen: what a guest sees when the app has no coin yet. Shares
   the launch card's shape so the two read as one product from either side. */
.market-waiting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 26px 40px;max-width:420px;margin:0 auto}
.market-waiting__art{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#F3F3F5;font-size:34px;font-weight:700;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-waiting__art img{width:100%;height:100%;object-fit:cover}
.market-waiting__eyebrow{display:block;margin-top:22px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;font-weight:600;letter-spacing:.18em;color:#A8A8AD!important;-webkit-text-fill-color:#A8A8AD!important}
.market-waiting h1{margin:10px 0 0;font-size:38px;font-weight:600;letter-spacing:-.04em;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important}
.market-waiting p{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:#6C6C72!important;-webkit-text-fill-color:#6C6C72!important}
.market-waiting__form{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:26px}
html body .market-waiting__form input,
html body.market-active .market-waiting__form input{width:100%;padding:15px 18px;border:1px solid #E8E8EB!important;border-radius:999px;background:#fff!important;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-size:15px;text-align:center}
html body .market-waiting__form button,
html body #market-drawer .market-waiting__form button,
html body.market-active .market-waiting__form button,
html body.market-active #market-main-area .market-waiting__form button[data-market-notify-submit],
html body.market-active #market-main-area .market-waiting__form button[data-market-notify-submit] *{width:100%;padding:15px 0;border:0!important;border-radius:999px;background:#0E0E0F!important;background-color:#0E0E0F!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15px;font-weight:600}
html body .market-waiting__form button[disabled]{opacity:.6!important}
.market-waiting__count{display:block;margin-top:16px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;color:#C4C4C9!important;-webkit-text-fill-color:#C4C4C9!important}

/* Held while the server says whether this app has a token. Same white card as
   the launch offer it becomes, so the swap is a fade of the text and not a
   change of screen. */
.market-token-launch--pending{justify-content:center}
.market-token-launch--pending .market-owner-home__coin-load{font-size:13px;color:#8A8A8E}
/* A failed load offers a way out instead of a dead end. */
.cw-empty__retry{display:block;margin:12px auto 0;padding:7px 16px;border:1px solid #E2E2E5;border-radius:999px;background:#fff;color:#0E0E0F!important;-webkit-text-fill-color:#0E0E0F!important;font-size:11px;font-weight:700}

/* Buy and Sell are anchors when they point at Phantom's swap deeplink, which
   the docs require be tapped rather than navigated to. Same shape as the
   buttons they stand in for. */
html body.market-active #mobile-market-activity-modal .market-trade__actions>a{display:flex;align-items:center;justify-content:center;min-height:54px;border:0!important;border-radius:999px;font-size:15px;font-weight:900;text-decoration:none}
html body.market-active #mobile-market-activity-modal .market-trade__actions>a.is-buy,html body #mobile-market-activity-modal .market-trade__actions>a.is-buy{background:#111!important;background-color:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

/* Offered when paying in SOL from a browser Phantom cannot reach. The action
   is an anchor because Phantom requires its browse deeplink be tapped. */

/* Amount review stays inside Activity until the user continues to Phantom. */
html body.market-active #mobile-market-activity-modal .market-trade__quote{flex-wrap:wrap;gap:4px 12px}
.market-trade__usd-rate{display:block;flex-basis:100%;font-size:12px;color:#666}
html body #market-buy-picker.market-buy-picker{position:fixed;inset:0;z-index:130000;margin:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:rgba(9,9,12,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:24px 0 0;box-sizing:border-box;font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif}
html body #market-buy-picker.market-buy-picker *{box-sizing:border-box}
html body #market-buy-picker.market-buy-picker [hidden]{display:none!important}
html body #market-buy-picker .market-buy-picker__card{width:100%;max-width:460px;background:#fff;border-radius:30px 30px 0 0;padding:10px 20px max(24px,env(safe-area-inset-bottom));color:#0b0b0c;box-shadow:0 -12px 60px #0002;max-height:100%;overflow:auto;overscroll-behavior:contain;animation:market-buy-rise .2s ease-out}
html body #market-buy-picker .market-buy-picker__handle{width:36px;height:4px;margin:0 auto 22px;border-radius:4px;background:#dcdcE1}
html body #market-buy-picker.market-buy-picker button{cursor:pointer;font-family:inherit;box-shadow:none;color:#0b0b0c;-webkit-text-fill-color:currentColor}
html body #market-buy-picker.market-buy-picker button:disabled{cursor:default;opacity:.45}
html body #market-buy-picker.market-buy-picker button:focus-visible,html body #market-buy-picker.market-buy-picker a:focus-visible{outline:2px solid #12a150;outline-offset:3px}
html body #market-buy-picker .market-buy-picker__heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}
html body #market-buy-picker .market-buy-picker__coin{flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:#f2f2f4;display:grid;place-items:center;overflow:hidden;font-weight:700}
html body #market-buy-picker .market-buy-picker__coin img{width:100%;height:100%;object-fit:cover}
html body #market-buy-picker .market-buy-picker__brand{min-width:0;flex:1}
html body #market-buy-picker .market-buy-picker__title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
html body #market-buy-picker .market-buy-picker__heading h2{font-size:19px;letter-spacing:-.025em;line-height:1.2;margin:0;overflow-wrap:anywhere;font-weight:700}
html body #market-buy-picker.market-buy-picker [data-buy-change]{font-size:10px;font-weight:600;color:#0e7f41;background:#e8f6ed;border-radius:6px;padding:3px 5px}
html body #market-buy-picker.market-buy-picker [data-buy-change].is-negative{color:#b42336;background:#fff0f2}
html body #market-buy-picker.market-buy-picker [data-buy-rate]{font:10.5px/1.5 'Geist Mono',ui-monospace,monospace;color:#6a6a73;margin:4px 0 0;overflow-wrap:anywhere}
html body #market-buy-picker.market-buy-picker [data-buy-close]{border:0;border-radius:50%;background:#f2f2f4;flex:0 0 34px;width:34px;height:34px;padding:0;font-size:25px;font-weight:400;line-height:1}
html body #market-buy-picker .market-buy-picker__field{border:1.5px solid #dfdfe4;border-radius:28px;padding:13px 14px 15px;transition:border-color .15s}
html body #market-buy-picker .market-buy-picker__field:focus-within{border-color:#12a150;box-shadow:0 0 0 3px #12a15012}
html body #market-buy-picker .market-buy-picker__field-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
html body #market-buy-picker .market-buy-picker__field-top label{font-size:10px;font-weight:600;letter-spacing:.07em;color:#6a6a73;margin:0}
html body #market-buy-picker.market-buy-picker [data-buy-balance]{font-size:10.5px;color:#6a6a73}
html body #market-buy-picker.market-buy-picker [data-buy-max]{font-size:10px;font-weight:700;letter-spacing:.04em;border:0;border-radius:6px;background:#f2f2f4;padding:4px 6px;margin-left:3px}
html body #market-buy-picker .market-buy-picker__amount-row{display:flex;align-items:center;gap:4px;margin-top:9px;min-width:0}
html body #market-buy-picker.market-buy-picker [data-buy-prefix]{font-size:28px;color:#6a6a73;font-weight:500}
html body #market-buy-picker.market-buy-picker #market-buy-usd{flex:1;min-width:0;width:0;border:0!important;outline:none!important;box-shadow:none!important;background:transparent;color:#0b0b0c;-webkit-text-fill-color:#0b0b0c;font:700 44px/1.1 'Geist',-apple-system,sans-serif;letter-spacing:-.045em;padding:0;border-radius:0;caret-color:#12a150}
html body #market-buy-picker.market-buy-picker [data-buy-flip]{flex:0 1 auto;max-width:52%;border:0;border-radius:11px;padding:8px;background:#f2f2f4;font:600 10.5px/1.4 'Geist Mono',ui-monospace,monospace;overflow-wrap:anywhere}
html body #market-buy-picker .market-buy-picker__presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
html body #market-buy-picker .market-buy-picker__presets button{border:1px solid #e4e4e8;border-radius:12px;padding:11px 4px;background:#fafafb;font-size:13px;font-weight:600}
html body #market-buy-picker .market-buy-picker__presets button[aria-pressed=true]{background:#0b0b0c!important;color:#fff!important;border-color:#0b0b0c}
html body #market-buy-picker .market-buy-picker__estimate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px;padding:11px 12px;border:1px solid #eaeaec;border-radius:14px;background:#fafafb;font:11px/1.5 'Geist Mono',ui-monospace,monospace;color:#6a6a73;overflow-wrap:anywhere}
html body #market-buy-picker .market-buy-picker__quote-meta{display:flex;gap:8px;font-family:inherit}
html body #market-buy-picker.market-buy-picker [data-buy-impact]{font-weight:500;color:#0e7f41}
html body #market-buy-picker.market-buy-picker [data-buy-impact].is-high{color:#b45309}
html body #market-buy-picker .market-buy-picker__warning,html body #market-buy-picker .market-buy-picker__error{font-size:12px;line-height:1.5;padding:9px 12px;border-radius:12px;margin:10px 0 0}
html body #market-buy-picker .market-buy-picker__warning{color:#9a3412;background:#fff4e8}
html body #market-buy-picker .market-buy-picker__error{color:#b42336;background:#fff0f2}
html body #market-buy-picker .market-buy-picker__footer{padding-top:14px}
html body #market-buy-picker.market-buy-picker [data-buy-confirm],html body #market-buy-picker.market-buy-picker [data-buy-done]{width:100%;min-height:54px;padding:14px;border-radius:18px;border:0;background:#0b0b0c!important;color:#fff!important;font-size:16px;font-weight:600;box-shadow:0 12px 26px -12px #0b0b0c80}
html body #market-buy-picker .market-buy-picker__note{font-size:11px;line-height:1.5;color:#6a6a73;text-align:center;margin:10px 4px 0}
html body #market-buy-picker .market-buy-picker__phase{text-align:center;padding:12px 4px 6px}
html body #market-buy-picker .market-buy-picker__phase-icon{width:58px;height:58px;margin:0 auto 22px;border-radius:50%;border:3px solid #e8e8ec;border-top-color:#0b0b0c;animation:market-buy-spin .8s linear infinite}
html body #market-buy-picker .market-buy-picker__phase-icon.is-confirmed,html body #market-buy-picker .market-buy-picker__phase-icon.is-failed{animation:none;border:0;display:grid;place-items:center;font-size:30px;font-weight:600;background:#e8f6ed;color:#0e7f41}
html body #market-buy-picker .market-buy-picker__phase-icon.is-failed{background:#fff0f2;color:#b42336}
html body #market-buy-picker .market-buy-picker__phase h2{font-size:20px;letter-spacing:-.025em;margin:0 0 8px}
html body #market-buy-picker .market-buy-picker__phase p{font-size:13px;line-height:1.5;color:#6a6a73;margin:0 auto;max-width:290px}
html body #market-buy-picker .market-buy-picker__receipt{margin:20px 0 16px;border:1px solid #eaeaec;border-radius:16px;overflow:hidden}
html body #market-buy-picker .market-buy-picker__receipt:empty{display:none}
html body #market-buy-picker .market-buy-picker__receipt>div{display:flex;justify-content:space-between;gap:12px;text-align:left;padding:11px 12px;font-size:12px;border-bottom:1px solid #eee;color:#6a6a73}
html body #market-buy-picker .market-buy-picker__receipt strong{font:500 11px/1.5 'Geist Mono',ui-monospace,monospace;color:#0b0b0c;text-align:right;overflow-wrap:anywhere}
html body #market-buy-picker .market-buy-picker__receipt a{display:block;padding:12px;background:#fafafb;color:#0b0b0c;font-size:12px}
@keyframes market-buy-rise{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes market-buy-spin{to{transform:rotate(360deg)}}
@media(max-width:360px){html body #market-buy-picker .market-buy-picker__card{padding-left:14px;padding-right:14px}html body #market-buy-picker.market-buy-picker #market-buy-usd{font-size:36px}html body #market-buy-picker.market-buy-picker [data-buy-flip]{font-size:10px}}
@media(prefers-reduced-motion:reduce){html body #market-buy-picker .market-buy-picker__card,html body #market-buy-picker .market-buy-picker__phase-icon{animation:none}}

html body #market-buy-picker::backdrop{background:transparent}
html body #market-buy-picker .market-buy-picker__card{margin:0;flex-shrink:0}
html body #market-buy-picker [data-buy-confirm],html body #market-buy-picker [data-buy-done],html body #market-buy-picker [data-buy-amount][aria-pressed=true]{background:#0b0b0c!important;background-color:#0b0b0c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #market-buy-picker [data-buy-close],html body #market-buy-picker [data-buy-flip],html body #market-buy-picker [data-buy-max]{background:#f2f2f4!important;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important}
@media(max-width:600px){html body #market-buy-picker .market-buy-picker__card{max-width:none;width:100%}}
/* Keep the supplied sheet controls independent of the app theme's form reset. */
html body #market-buy-picker.market-buy-picker input#market-buy-usd{appearance:none!important;-webkit-appearance:none!important;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important;background-color:transparent!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important}
html body #market-buy-picker.market-buy-picker button{appearance:none!important;-webkit-appearance:none!important;background-image:none!important;text-transform:none!important}
html body #market-buy-picker.market-buy-picker [data-buy-close],html body #market-buy-picker.market-buy-picker [data-buy-flip],html body #market-buy-picker.market-buy-picker [data-buy-max],html body #market-buy-picker.market-buy-picker [data-buy-confirm],html body #market-buy-picker.market-buy-picker [data-buy-done]{border:0!important}
html body #market-buy-picker.market-buy-picker .market-buy-picker__presets button{border:1px solid rgba(10,10,14,.1)!important;background:#fafafb!important;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important;box-shadow:none!important}
html body #market-buy-picker.market-buy-picker .market-buy-picker__presets button[aria-pressed=true]{background:#0b0b0c!important;border-color:#0b0b0c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #market-buy-picker .market-buy-picker__field{padding:12px 16px 14px;border-color:rgba(10,10,14,.12)}
html body #market-buy-picker .market-buy-picker__field:focus-within{border-color:#0b0b0c;box-shadow:0 0 0 4px rgba(11,11,12,.06)}
html body #market-buy-picker [data-buy-prefix]{font-size:26px;font-weight:600;color:#9a9aa2!important;-webkit-text-fill-color:#9a9aa2!important}
html body #market-buy-picker [data-buy-rate]{font-size:12.5px}
html body #market-buy-picker .market-buy-picker__handle{width:38px;height:5px;margin-bottom:12px}
html body #market-buy-picker .market-buy-picker__heading{gap:12px;margin-bottom:16px}
html body #market-buy-picker .market-sell-position{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px;padding:11px 14px;border-radius:14px;background:#f6f6f8}
html body #market-buy-picker .market-sell-position>div:last-child{text-align:right}
html body #market-buy-picker .market-sell-position small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#6a6a73!important;-webkit-text-fill-color:#6a6a73!important}
html body #market-buy-picker .market-sell-position strong{display:block;margin-top:3px;font:700 14px/1.5 ui-monospace,monospace;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important}
html body #market-buy-picker[data-trade-side=sell] .market-buy-picker__presets button{background:#f2f2f4!important;border:0!important}
html body #market-buy-picker[data-trade-side=sell] .market-buy-picker__presets button[aria-pressed=true]{background:#0b0b0c!important}
/* Trade dock reference: side toggle, quick sizes, and one review action. */
html body.market-active #mobile-market-activity-modal #market-trade-dock{padding:12px 14px 10px;background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(10,10,14,.07);box-shadow:0 -14px 34px -18px rgba(9,9,12,.28);font-family:'Geist',-apple-system,sans-serif}
html body #market-trade-dock .trade-dock__top{display:flex;align-items:center;gap:10px}
html body #market-trade-dock .trade-dock__tabs{display:flex;padding:3px;background:#f0f0f3;border-radius:12px;flex:none}
html body #market-trade-dock button{appearance:none!important;-webkit-appearance:none!important;font-family:inherit;cursor:pointer;text-transform:none!important;background-image:none!important;letter-spacing:normal}
html body #market-trade-dock .trade-dock__tabs button{padding:7px 16px;border-radius:9px;border:0!important;background:transparent!important;color:#6a6a73!important;-webkit-text-fill-color:#6a6a73!important;font-size:13px;font-weight:600;box-shadow:none}
html body #market-trade-dock .trade-dock__tabs button[aria-pressed=true]{background:#fff!important;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important;box-shadow:0 1px 3px #09090c24}
html body #market-trade-dock .trade-dock__quote{flex:1;min-width:0;text-align:right}
html body #market-trade-dock .trade-dock__quote strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.4 ui-monospace,monospace;color:#0b0b0c!important;-webkit-text-fill-color:#0b0b0c!important}
html body #market-trade-dock .trade-dock__quote>div{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
html body #market-trade-dock [data-dock-input]{font-size:11px;color:#6a6a73!important;-webkit-text-fill-color:#6a6a73!important}
html body #market-trade-dock [data-dock-impact]{font:600 10.5px/1.4 ui-monospace,monospace;padding:2px 6px;border-radius:6px;background:#12a15019;color:#0e7f41!important;-webkit-text-fill-color:#0e7f41!important;white-space:nowrap}
html body #market-trade-dock [data-dock-impact]:empty{display:none}
html body #market-trade-dock [data-dock-impact].is-high{background:#c2410c19;color:#9a3412!important;-webkit-text-fill-color:#9a3412!important}
html body #market-trade-dock .trade-dock__presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:6px;margin-top:11px}
html body #market-trade-dock .trade-dock__presets button{height:36px;padding:0 8px;border:0!important;border-radius:11px;background:#f0f0f3!important;color:#3d3d42!important;-webkit-text-fill-color:#3d3d42!important;font-size:13px;font-weight:600;box-shadow:none}
html body #market-trade-dock .trade-dock__presets button[aria-pressed=true]{background:#0b0b0c!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #market-trade-dock .trade-dock__actions{display:flex;gap:9px;margin-top:11px}
html body #market-trade-dock [data-dock-submit]{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:52px;padding:10px;border:0!important;border-radius:16px;background:#0b0b0c!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:15.5px;font-weight:600;box-shadow:0 12px 24px -14px #0b0b0ccc}
html body #market-trade-dock [data-dock-submit] span{color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #market-trade-dock [data-dock-label]{overflow-wrap:anywhere}
html body #market-trade-dock [data-dock-usd]{opacity:.62;font-family:ui-monospace,monospace;white-space:nowrap}
html body #market-trade-dock[data-side=sell] [data-dock-submit]{background:#b42318!important;box-shadow:0 12px 24px -14px #b42318cc}
html body #market-trade-dock [data-dock-flip]{width:52px;flex:none;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(10,10,14,.12)!important;background:transparent!important;color:#3d3d42!important;-webkit-text-fill-color:#3d3d42!important;box-shadow:none}
html body #market-trade-dock button:disabled{opacity:.45;cursor:default}
html body #market-trade-dock button:focus-visible{outline:2px solid #0e7f41;outline-offset:2px}
html body #market-trade-dock .trade-dock__note{text-align:center;font-size:10.5px;line-height:1.5;color:#6a6a73!important;-webkit-text-fill-color:#6a6a73!important;margin:9px 0 0}
html body.market-active #mobile-market-activity-modal-list.has-trade-dock{padding-bottom:240px}
html body dialog.wp-transfer-dialog{max-width:360px;width:calc(100% - 40px);border:0;border-radius:28px;padding:24px;background:white;color:#111;box-sizing:border-box}
html body dialog.wp-transfer-dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
html body .wp-transfer-dialog p{font-size:14px;line-height:1.5}
html body .wp-transfer-dialog .wp-transfer-address{overflow-wrap:anywhere;font-family:ui-monospace,monospace;user-select:all}
html body .wp-transfer-dialog button{display:block;width:100%;margin-top:10px;padding:12px;border:0!important;border-radius:14px;background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Wallet owns the whole destination; only its content has a single gutter. */
html body.market-active #mobile-market-guest-wallet{left:0!important;right:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body.market-active #mobile-market-guest-wallet .market-guest-wallet__body,
html body.market-active #market-drawer #market-drawer-content .market-crypto-drawer .market-guest-wallet__body{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body.market-active #market-drawer #market-drawer-content .market-crypto-drawer{width:100%!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important}
html body.market-active #market-crypto-wallet{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important;padding:0!important}
html body.market-active #market-crypto-wallet .wallet-pro{width:100%;max-width:none;min-height:calc(100dvh - var(--market-guest-chrome-top,74px) - var(--market-guest-chrome-bottom,80px));box-sizing:border-box;padding:0 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif!important}

/* Begin Wallet directly below the visible brand row, without a second spacer. */
html body.market-active #market-drawer #market-drawer-content .market-crypto-drawer{padding-top:var(--market-guest-chrome-top,74px)!important}

/* Owners and guests use the same screen, without the legacy drawer spacer. */
html body.market-active #mobile-market-guest-wallet{position:fixed!important;top:var(--wallet-chrome-top,var(--market-guest-chrome-top,74px))!important;bottom:var(--wallet-chrome-bottom,var(--market-guest-chrome-bottom,80px))!important;z-index:10010;overflow-y:auto;overscroll-behavior:contain;background:#fff!important;color:#111}

html body.market-active:has(#mobile-market-guest-wallet) #mobile-app-header{height:auto!important;min-height:0!important;padding-bottom:0!important}

/* The global glass button rule (backdrop blur + saturate, 0 4px 12px shadow)
   reached the chart and panel controls: every "transparent" toggle painted a
   saturated square with a drop shadow behind its label. Flat controls. */
html body.market-active #mobile-market-activity-modal :is(.market-chart__ranges, .market-panel__top, .market-panel__tf, .market-chart__scale) button,
html body.market-active #mobile-market-activity-modal :is([data-chart-scale], [data-chart-range], [data-panel-tab], [data-panel-tf]) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Guest, no coin: the shared empty guide (empty-state.js). The area's
   [data-theme] #market-main-area * sweep paints every leaf black at id
   strength, so the guide's token colours are handed back from that height. */
/* The Market area stays a white surface in every theme (the old waiting
   screen hard-coded #0E0E0F ink for the same reason), so the guide takes the
   light tokens here unless Glass is on. */
html:not([data-appearance="glass"]) body #market-main-area .nst-es.nst-es{--es-ink:#111114;--es-dim:rgba(17,17,20,.58);--es-soft:rgba(17,17,20,.045);--es-line:rgba(17,17,20,.12);--es-btn:#111114;--es-on-btn:#ffffff;--es-glow:rgba(17,17,20,.07)}
html body #market-main-area .market-waiting.market-waiting--es{padding:14vh 0 40px;max-width:none;width:100%}
html body #market-main-area#market-main-area .nst-es .nst-es__title{color:var(--es-ink)!important;-webkit-text-fill-color:var(--es-ink)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__body{color:var(--es-dim)!important;-webkit-text-fill-color:var(--es-dim)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__art,html body #market-main-area#market-main-area .nst-es .nst-es__icon{color:var(--es-ink)!important;-webkit-text-fill-color:var(--es-ink)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__btn--primary{background:var(--es-btn)!important;border-color:var(--es-btn)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__btn--primary,html body #market-main-area#market-main-area .nst-es .nst-es__btn--primary *{color:var(--es-on-btn)!important;-webkit-text-fill-color:var(--es-on-btn)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__btn--notify{background:transparent!important;border-color:var(--es-line)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__btn--notify,html body #market-main-area#market-main-area .nst-es .nst-es__btn--notify *{color:var(--es-ink)!important;-webkit-text-fill-color:var(--es-ink)!important}
html body #market-main-area#market-main-area .nst-es .nst-es__icon,html body #market-main-area#market-main-area .nst-es .nst-es__icon *{color:var(--es-ink)!important;stroke:var(--es-ink)!important;fill:none!important}

/* Create — the compose screen: Create New / Add Link, PUBLISH TO, per-platform
   options and publish results.

   Lives in its own file because mobile.html is one huge template: two people
   editing it at once cannot merge, and the last save silently wins the whole
   file. Everything Create owns belongs here so it can be edited on its own. */

/* ---- Create New / Add Link mode toggle ----
   color-mix against --text-color keeps these correct in light and dark
   without a second set of rules. */
.bytes-source-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.bytes-source-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 12px 13px;
    border-radius: 14px;
    cursor: pointer;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.bytes-source-mode-btn.is-active {
    border-color: color-mix(in srgb, var(--primary-color) 65%, transparent);
    background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-color, var(--bg-primary)));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.bytes-source-mode-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
}
.bytes-source-mode-btn.is-active .bytes-source-mode-icon {
    background: var(--primary-color);
    color: var(--bg-primary);
}
.bytes-source-mode-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bytes-source-mode-title { font-size: 13px; font-weight: 800; }
.bytes-source-mode-btn.is-active .bytes-source-mode-title { color: var(--primary-color); }
.bytes-source-mode-meta { font-size: 11px; color: var(--text-secondary); }
.bytes-caption-count { float: right; font-size: 11px; color: var(--text-secondary); }

/* ---- staged media thumbnails (Create New) ----
   The mock shows attached media as tiles with a remove control and an
   "Add more" tile, rather than a text-only filename row. */
.bytes-media-tiles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.bytes-media-tile {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    flex: 0 0 auto;
}
.bytes-media-tile img,
.bytes-media-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bytes-media-tile-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
html body .bytes-media-tile-remove,
html body .bytes-media-tile-remove * {
    color: #fff !important;
    fill: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-media-tile-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    font-size: 10px;
    font-weight: 700;
}
html body .bytes-media-tile-badge {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-media-tile-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-style: dashed;
    border-width: 1.5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.bytes-media-tile-add i { font-size: 15px; }

/* ---- PUBLISH TO ---- */
.bytes-publish-section { margin-bottom: 30px; }
.bytes-publish-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bytes-publish-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.bytes-publish-selectall {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
}
.bytes-publish-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.bytes-publish-tile {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    transition: border-color 0.18s ease, background 0.18s ease;
}
/* Green rather than --primary-color: an athlete's brand colour can be
   white or near-background, which left selected looking unselected. */
.bytes-publish-tile.is-selected {
    border-color: #16a34a;
    background: color-mix(in srgb, #16a34a 12%, var(--surface-color, var(--bg-primary)));
}
.bytes-publish-tile.is-disconnected { cursor: pointer; }
.bytes-publish-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    overflow: hidden;
}
.bytes-publish-icon img { width: 100%; height: 100%; object-fit: cover; }
/* Marks are white in the SVG source (they sit on dark/branded chips).
   The light-accent theme forces `fill: #000 !important` on every
   descendant of body, which painted these black-on-black — so the
   publish chips opt out explicitly. */
.bytes-publish-icon svg { width: 17px; height: 17px; display: block; }
html body .bytes-publish-icon svg,
html body .bytes-publish-icon svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* Instagram is the one outline mark: stroke it, don't flood it. */
html body .bytes-publish-icon svg.pt-outline rect,
html body .bytes-publish-icon svg.pt-outline circle {
    fill: none !important;
    stroke: #fff !important;
}
html body .bytes-publish-icon svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.bytes-publish-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bytes-publish-name { font-size: 12.5px; font-weight: 700; }
.bytes-publish-handle {
    font-size: 10.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bytes-publish-handle.is-connect { color: var(--primary-color); font-weight: 700; }
/* Unselected is an empty ring — no glyph at all, so it can't read as
   already-ticked. Selected fills in and shows the check. */
.bytes-publish-check {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 26%, transparent);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.bytes-publish-check i { display: none; }
.bytes-publish-tile.is-selected .bytes-publish-check {
    background: #16a34a;
    border-color: #16a34a;
    transform: scale(1.04);
}
.bytes-publish-tile.is-selected .bytes-publish-check i { display: block; }
html body .bytes-publish-tile.is-selected .bytes-publish-check i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
/* Not-connected tiles get a chevron, not a checkbox — tapping them
   starts a connection rather than selecting a destination. */
.bytes-publish-go {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-secondary);
}
.bytes-publish-note {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.bytes-publish-note.is-warn { color: #f0a500; }

/* Media Type pills: two columns, five rows -- ten destinations read as a
   list, not a scattered six-across grid. */
/* #new-custom-modal rules in mobile.html target these buttons with an id, so
   match that weight here or the layout below never applies. */
#new-custom-modal .bytes-media-type-grid,
.bytes-media-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
/* Media Type reads like the PUBLISH TO tiles it sits under: the same surface,
   the same hairline, the same left-aligned mark-then-label. The markup ships
   inline styles and the modal targets these through #new-custom-modal, so the
   weight has to be matched and the inline background overridden outright. */
#new-custom-modal .bytes-media-type-grid > button,
.bytes-media-type-grid > button {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 11px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent) !important;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.18s ease, background 0.18s ease;
    /* The shared rule sets overflow:hidden, which clipped the marks away. */
    overflow: visible !important;
}

/* Selected: a tinted surface and a coloured edge in the platform's own colour,
   which the script hands over as --media-active-color. One quiet state rather
   than a 2px border, a triple shadow and a lift. */
#new-custom-modal .bytes-media-type-grid > button.is-media-selected,
.bytes-media-type-grid > button.is-media-selected {
    border-color: color-mix(in srgb, var(--media-active-color, #16a34a) 70%, transparent) !important;
    background: color-mix(in srgb, var(--media-active-color, #16a34a) 10%,
                          var(--surface-color, var(--bg-primary))) !important;
    font-weight: 700 !important;
}
/* Sized like the publish tiles' icon, just smaller: a fixed square that cannot
   be squeezed by a long label, with the glyph centred inside it. */
#new-custom-modal .byte-pill-mark,
.byte-pill-mark {
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex: 0 0 26px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
#new-custom-modal .byte-pill-mark svg,
.byte-pill-mark svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: block;
}
/* The marks are white in the SVG source because they sit on a brand colour,
   and the light-accent theme forces fill and stroke to #000 on every
   descendant of body. That painted the glyphs black on their own chips --
   TikTok and X, both black, went to solid squares. Opt out, the way the
   publish tiles already do. */
html body .byte-pill-mark svg,
html body .byte-pill-mark svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* The outline marks are drawn with strokes, so they need the stroke back. */
html body .byte-pill-mark svg.pt-outline,
html body .byte-pill-mark svg.pt-outline *,
html body .byte-pill-mark svg.pt-stroke,
html body .byte-pill-mark svg.pt-stroke * {
    fill: none !important;
    stroke: #fff !important;
}
html body .byte-pill-mark svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}

/* The way out of "you have 0 left" — inline in the sentence, so the
   instruction and the action are the same words. */
.byte-publish-buy-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Buy sheet.
 *
 * Plans are cards here rather than hairline rows: the sheet has to carry a
 * selected state and a sticky action, and a ring around the picked card says
 * that where a rule between rows cannot. The accent is the one saturated
 * colour on the screen, spent only on selection and the connected dots.
 *
 * Colours come from the theme vars, not the flat greys of the mock, so the
 * sheet holds up in dark as well as light.
 */
#bytes-store-sheet {
    --byte-store-accent: #0e9c8a;
    position: fixed;
    inset: 0;
    z-index: 140000;
    pointer-events: none;
}
#bytes-store-sheet.is-open { pointer-events: auto; }
#bytes-store-sheet.is-open .bytes-sheet-scrim { opacity: 1; }
#bytes-store-sheet.is-open .bytes-sheet-panel { transform: translateY(0); }

/* The panel is a column: head and tabs pinned, plans scrolling, CTA on the
   floor. Capped so a tall phone does not stretch the sheet to full height. */
#bytes-store-sheet .bytes-sheet-panel {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
#bytes-store-sheet .bytes-sheet-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#bytes-store-sheet .bytes-sheet-head {
    padding: 10px 20px 0;
    align-items: flex-start;
}
#bytes-store-sheet .bytes-sheet-head strong { font-size: 26px; letter-spacing: -0.02em; }
#bytes-store-sheet .bytes-sheet-head small { margin-top: 3px; font-size: 13px; }

.bytes-sheet-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bytes-sheet-close:active { opacity: 0.5; }

/* Connected accounts, six across. A live account gets the accent dot; one
   that is not connected keeps its slot but stays grey, so the row doubles as
   a reminder of what is still unhooked. */
.byte-store-strip {
    display: flex;
    gap: 6px;
    padding: 14px 20px 0;
}
.byte-store-chip {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.byte-store-chip .byte-store-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
}
/* The brand mark, in the platform's own colour when that account is hooked up.
   Not connected keeps the shape but drops to grey, so the row reads as status
   rather than as a logo strip. */
.byte-store-mark {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow must stay visible: these marks are drawn to the edge of their
       box and a hidden overflow shears them, the way it clipped the pills. */
    overflow: visible;
    background: color-mix(in srgb, var(--text-color) 25%, transparent);
}
/* A connected account carries its real brand colour; the rest stay muted, so
   the row reads as what is hooked up rather than as a strip of logos. */
/* Every mark keeps its brand colour. Which accounts are connected is carried by
   the dot under each one, not by draining the logos.
   TikTok, X and Threads are all black, which disappears against a dark sheet,
   so on dark the marks get a hairline to sit their shape against. */
[data-theme="dark"] .byte-store-mark,
[data-theme="dark-accent"] .byte-store-mark,
body[data-theme="dark"] .byte-store-mark,
body[data-theme="dark-accent"] .byte-store-mark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.byte-store-mark svg { width: 14px; height: 14px; display: block; }
/* Same treatment as the publish chips: these marks are white in the SVG source
   because they sit on a brand colour, and the themes force fill:#000 on every
   descendant of body -- which paints them black-on-black and floods the one
   outline mark into a solid blob. Opt out explicitly. */
html body .byte-store-mark svg,
html body .byte-store-mark svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
/* Instagram is the one outline mark: stroke it, don't flood it. */
html body .byte-store-mark svg.pt-outline rect,
html body .byte-store-mark svg.pt-outline circle {
    fill: none !important;
    stroke: #fff !important;
}
html body .byte-store-mark svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.byte-store-chip i {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 22%, transparent);
}
.byte-store-chip.is-live .byte-store-tag { color: var(--text-color); }
.byte-store-chip.is-live i { background: var(--byte-store-accent); }

/* Segmented control: one-time against monthly. */
.byte-store-tabs {
    margin: 16px 20px 0;
    padding: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.byte-store-tabs button {
    padding: 9px 0;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
html body .byte-store-tabs button.is-on {
    background: var(--bg-primary);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.byte-store-rows {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 20px 0;
    gap: 12px;
}
/* A badged card carries its own top margin. The badge is positioned above the
   card edge, so without this the scroller's overflow shears it in half --
   padding on the scroller cannot help, the badge escapes the card either way. */
.byte-store-plan:has(.byte-store-badge) { margin-top: 9px; }

.byte-store-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1.5px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: var(--bg-primary);
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.byte-store-plan:active { opacity: 0.7; }
html body .byte-store-plan.is-picked {
    border-color: var(--byte-store-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--byte-store-accent) 18%, transparent);
}
.byte-store-plan-top,
.byte-store-plan-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.byte-store-plan-top strong {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.byte-store-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.byte-store-plan-sub small {
    font-size: 13px;
    color: var(--text-secondary);
}
.byte-store-unit {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.byte-store-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--byte-store-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.byte-store-fine {
    padding: 4px 10px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

/* The action sits on the floor of the sheet, clear of the home indicator. */
.byte-store-foot {
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
    background: var(--bg-primary);
}
/* Deliberately not background:var(--text-color);color:var(--bg-primary). Those
   two do not move together -- the light theme overrides --text-color without
   restating --bg-primary, which leaves it black and paints black on black. The
   button is a solid dark slab with white on it in both themes. */
.byte-store-cta {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 15px;
    background: #111214;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.byte-store-cta:active { opacity: 0.75; }
/* The themes paint every element through a blanket [data-theme] * rule that
   sets -webkit-text-fill-color as well as color, and text-fill beats colour
   whatever the specificity. Matching that weight and setting both is what it
   takes to keep the label legible on its own slab. */
html body[data-theme] #bytes-store-sheet .byte-store-cta,
html [data-theme] #bytes-store-sheet .byte-store-cta,
html body #bytes-store-sheet .byte-store-cta {
    background: #111214;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* On a dark sheet the dark slab vanishes into it, so flip to white on black. */
html body[data-theme="dark"] #bytes-store-sheet .byte-store-cta,
html body[data-theme="dark-accent"] #bytes-store-sheet .byte-store-cta,
html [data-theme="dark"] #bytes-store-sheet .byte-store-cta,
html [data-theme="dark-accent"] #bytes-store-sheet .byte-store-cta {
    background: #ffffff;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
}


/* Pay step: wallet button, card fields, one solid action. */
.byte-pay-card { margin: 18px 0 0; }
/* Same trap as the buy sheet's action: --text-color and --bg-primary do not
   move together, and the themes paint through a blanket [data-theme] * rule
   that sets -webkit-text-fill-color, which beats colour whatever the
   specificity. State the colours outright, at that weight, both properties. */
.byte-pay-submit {
    width: 100%;
    margin: 18px 0 0;
    padding: 16px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
}
html body[data-theme] #bytes-store-sheet .byte-pay-submit,
html [data-theme] #bytes-store-sheet .byte-pay-submit,
html body #bytes-store-sheet .byte-pay-submit {
    background: #111214;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body[data-theme="dark"] #bytes-store-sheet .byte-pay-submit,
html body[data-theme="dark-accent"] #bytes-store-sheet .byte-pay-submit,
html [data-theme="dark"] #bytes-store-sheet .byte-pay-submit,
html [data-theme="dark-accent"] #bytes-store-sheet .byte-pay-submit {
    background: #ffffff;
    color: #111214 !important;
    -webkit-text-fill-color: #111214 !important;
}
.byte-pay-submit:disabled { opacity: 0.5; }
.byte-pay-status {
    margin: 12px 0 4px;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-align: center;
    min-height: 16px;
}
.byte-pay-status.is-error { color: #e5484d; }

/* ---- per-platform choices and scheduling ----
   Held apart by space rather than boxed: the only line drawn is the one
   separating one platform's choices from the next. */
.bytes-publish-options { margin-top: 26px; display: flex; flex-direction: column; gap: 24px; }
.bytes-publish-opt-group { display: flex; flex-direction: column; gap: 15px; }
.bytes-publish-opt-group + .bytes-publish-opt-group {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
/* Each platform's block arrives on its own beat, so choosing a platform
   reads as the options unfolding rather than the page jumping. */
.bytes-publish-opt-group {
    animation: bytesPublishRise 380ms cubic-bezier(.2,.8,.2,1) both;
}
.bytes-publish-opt-group:nth-child(2) { animation-delay: 60ms; }
.bytes-publish-opt-group:nth-child(3) { animation-delay: 120ms; }
.bytes-publish-opt-group:nth-child(4) { animation-delay: 180ms; }
@keyframes bytesPublishRise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bytes-publish-opt-group { animation: none; }
    .bytes-publish-opt-choice button,
    .bytes-publish-sched-times button,
    .bytes-publish-sched-days button { transition: none; }
}
.bytes-publish-opt-group h6 {
    margin: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bytes-publish-opt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13.5px;
}
.bytes-publish-opt-toggle input { width: 20px; height: 20px; accent-color: var(--text-color); }
.bytes-publish-opt-choice { display: flex; flex-direction: column; gap: 8px; }
.bytes-publish-opt-choice > span { font-size: 13.5px; }
.bytes-publish-opt-choice > div { display: flex; flex-wrap: wrap; gap: 7px; }
.bytes-publish-opt-choice button,
.bytes-publish-sched-times button,
.bytes-publish-sched-days button {
    /* The app styles buttons globally with a fill and a shadow; these
       are chips on an open page, so they carry neither. */
    box-shadow: none !important;
    text-shadow: none !important;
    appearance: none;
}
.bytes-publish-opt-choice button,
.bytes-publish-sched-times button {
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    border-radius: 999px;
    padding: 8px 13px;
    background: transparent;
    color: var(--text-color);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    /* Colour and border ease; the press is a quick spring. */
    transition: background-color 260ms cubic-bezier(.2,.8,.2,1),
                border-color 260ms cubic-bezier(.2,.8,.2,1),
                color 200ms ease,
                transform 140ms cubic-bezier(.2,.8,.2,1);
}
.bytes-publish-opt-choice button:active,
.bytes-publish-sched-times button:not(:disabled):active,
.bytes-publish-sched-days button:active { transform: scale(0.94); }
/* Qualified with html and the modal id to outrank the theme rule
   `html[data-theme="light"] body .modal *`, which paints every
   descendant black and would hide a white label on a black chip. */
html body #new-custom-modal .bytes-publish-opt-choice button.is-on,
html body #new-custom-modal .bytes-publish-sched-times button.is-on,
html body #new-custom-modal .bytes-publish-sched-days button.is-on,
html body #new-custom-modal .bytes-publish-sched-days button.is-on b,
html body .bytes-publish-opt-choice button.is-on,
html body .bytes-publish-sched-times button.is-on,
html body .bytes-publish-sched-days button.is-on,
html body .bytes-publish-sched-days button.is-on b {
    border-color: #16161c !important;
    background: #16161c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 800;
}
html body #new-custom-modal .bytes-publish-sched-days button.is-on i,
html body .bytes-publish-sched-days button.is-on i {
    color: rgba(255, 255, 255, 0.64) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.64) !important;
}
.bytes-publish-sched-times button:disabled { opacity: 0.3; cursor: default; }
.bytes-publish-opt-text { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
/* A rule underneath rather than a filled field. Qualified with the modal
   id because `#new-custom-modal input` paints a dark box, which reads
   as a container on a page built out of space. */
html[data-theme] body #new-custom-modal input[data-publish-field],
html[data-theme] body [id*="modal"] input[data-publish-field],
html body #new-custom-modal input[data-publish-field],
html body input[data-publish-field] {
    border: 0 !important;
    border-bottom: 1px solid rgba(127, 127, 137, 0.34) !important;
    border-radius: 0 !important;
    padding: 7px 0 !important;
    /* Explicit rather than themed: --text-color is black under the
       light theme, and a themed fill here paints the field solid. */
    background: none !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: inherit;
    font-size: 15px;
}
html[data-theme] body #new-custom-modal input[data-publish-field]:focus,
html[data-theme] body [id*="modal"] input[data-publish-field]:focus,
html body input[data-publish-field]:focus {
    outline: 0 !important;
    border-bottom-color: currentColor !important;
}
.bytes-publish-opt-text input:focus { outline: 0; border-bottom-color: var(--text-color); }

/* The "⋯" that opens a platform's own settings. */
.bytes-publish-slot { position: relative; display: flex; }
.bytes-publish-slot .bytes-publish-tile { flex: 1; }
.bytes-publish-more {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 27px;
    height: 27px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: var(--surface-color, var(--bg-primary));
    color: var(--text-secondary);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--text-color) 12%, transparent);
    z-index: 2;
}
.bytes-publish-more:active { transform: scale(0.92); }

/* ---- platform options sheet ---- */
#bytes-options-sheet {
    position: fixed;
    inset: 0;
    z-index: 140000;
    pointer-events: none;
}
#bytes-options-sheet.is-open { pointer-events: auto; }
.bytes-sheet-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 220ms ease;
}
#bytes-options-sheet.is-open .bytes-sheet-scrim { opacity: 1; }
.bytes-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1);
    max-height: 82vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);
}
#bytes-options-sheet.is-open .bytes-sheet-panel { transform: translateY(0); }
.bytes-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 18%, transparent);
    margin: 10px auto 4px;
}
.bytes-sheet-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px 16px;
}
.bytes-sheet-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bytes-sheet-head strong { font-size: 16px; font-weight: 800; }
.bytes-sheet-head small { font-size: 12px; color: var(--text-secondary); }
.bytes-sheet-done {
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    cursor: pointer;
    padding: 6px 2px;
}
.bytes-sheet-rows { padding: 0 18px; display: flex; flex-direction: column; }
.bytes-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    font-size: 15px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
}
.bytes-sheet-row.is-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.bytes-sheet-row.is-stack > span { font-size: 13px; color: var(--text-secondary); }
.bytes-sheet-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.bytes-sheet-choices button {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    background: color-mix(in srgb, var(--text-color) 4%, transparent);
    color: var(--text-color);
}
html body .bytes-sheet-choices button.is-on {
    background: #16161c !important;
    border-color: #16161c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.bytes-sheet-input {
    width: 100%;
    background: color-mix(in srgb, var(--text-color) 4%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent) !important;
    border-radius: 12px !important;
    padding: 12px 13px !important;
    font-size: 15px !important;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    box-sizing: border-box;
}
/* iOS-style switch: the checkbox itself is hidden behind it. */
.bytes-sheet-switch {
    position: relative;
    width: 49px;
    height: 30px;
    flex: 0 0 49px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color) 16%, transparent);
    transition: background 200ms ease;
}
.bytes-sheet-switch.is-on { background: #16a34a; }
.bytes-sheet-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.bytes-sheet-switch i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    transition: transform 200ms cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
}
.bytes-sheet-switch.is-on i { transform: translateX(19px); }

/* ---- per-platform publish results ---- */
.bytes-publish-results { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.bytes-publish-result {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    padding: 9px 11px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
}
.bytes-publish-result-name { font-weight: 700; flex: 0 0 auto; }
.bytes-publish-result-msg { color: var(--text-secondary); flex: 1; min-width: 0; }
.bytes-publish-result.is-ok .bytes-publish-result-icon { color: #22c55e; }
.bytes-publish-result.is-fail .bytes-publish-result-icon { color: #ef4444; }
.bytes-publish-result.is-pending .bytes-publish-result-icon { color: var(--text-secondary); }
.bytes-publish-result.is-pending { opacity: 0.85; }
.bytes-publish-result a { color: var(--primary-color); text-decoration: none; font-weight: 700; }

.bytes-bloc-dropdown {
    position: relative;
    width: 100%;
}
.bytes-bloc-dropdown-btn {
    width: 100%;
    text-align: left;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 18px;
    padding: 13px 46px 13px 14px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--text-color) 8%, transparent);
    position: relative;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.bytes-bloc-dropdown-btn::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-secondary);
    font-size: 11px;
    transform: translateY(-50%);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.bytes-bloc-dropdown.is-open .bytes-bloc-dropdown-btn {
    border-color: color-mix(in srgb, var(--text-color) 20%, transparent);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--text-color) 12%, transparent);
}
.bytes-bloc-dropdown.is-open .bytes-bloc-dropdown-btn::after {
    transform: translateY(-50%) rotate(180deg);
    background: var(--text-primary, var(--text-color));
    color: var(--bg-primary);
}
.bytes-bloc-dropdown-btn .bloc-drop-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bytes-bloc-dropdown-btn .bloc-drop-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bytes-bloc-dropdown-btn .bloc-drop-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    background: var(--text-primary, var(--text-color));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text-color) 12%, transparent);
    overflow: visible;
}
/* Same opt-out as the pills: white marks on a brand chip, and the light-accent
   theme paints fill and stroke black on every descendant of body. */
.bytes-bloc-dropdown-btn .bloc-drop-icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg * {
    fill: #fff !important;
    stroke: none !important;
    color: #fff !important;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline *,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-stroke,
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-stroke * {
    fill: none !important;
    stroke: #fff !important;
}
html body .bytes-bloc-dropdown-btn .bloc-drop-icon svg.pt-outline circle.pt-dot {
    fill: #fff !important;
    stroke: none !important;
}
.bytes-bloc-dropdown-btn .bloc-drop-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .bytes-bloc-dropdown-btn,
[data-theme="light-accent"] .bytes-bloc-dropdown-btn {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}
[data-theme="light"] .bytes-bloc-dropdown-btn::after,
[data-theme="light-accent"] .bytes-bloc-dropdown-btn::after {
    color: rgba(15,23,42,0.56);
}


/* ---- First-time Create: media, caption, Post. Everything else under
   More options, closed by default. ---- */
.bytes-post-note {
    margin: 10px 4px 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.bytes-more-options {
    margin: 18px 0 6px;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}
.bytes-more-options-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 14px 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
}
.bytes-more-options-summary::-webkit-details-marker { display: none; }
.bytes-more-options-summary i {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 160ms ease;
}
.bytes-more-options[open] .bytes-more-options-summary i { transform: rotate(180deg); }
.bytes-more-options-body { padding: 4px 0 8px; }
.bytes-more-group { margin-bottom: 22px; }
.bytes-more-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Add to Season keeps its own spacing once it lives here. */
#bytes-more-season-slot > #bytes-bloc-selector { margin-bottom: 22px; }

/* One row standing in for six "Connect" tiles. */
.bytes-publish-connect {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 13px;
    text-align: left;
    cursor: pointer;
    background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color);
    font-size: 13px;
    font-weight: 800;
}
.bytes-publish-connect > i:first-child {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 12px;
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-secondary);
}
.bytes-publish-connect > span { flex: 1; }
.bytes-publish-connect-go { font-size: 11px; color: var(--text-secondary); }

/* The caption is a bare textarea, which Chromium renders in monospace. */
#new-custom-modal #bytes-description { font-family: inherit; }

/* The way out of the sheet sits at the right end of the "Posting as" line. */
#new-custom-modal .bytes-posting-compact {
    display: flex;
    align-items: center;
}
#new-custom-modal .bytes-posting-dismiss {
    margin-left: auto;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#new-custom-modal .bytes-posting-dismiss i {
    font-size: 14px;
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

/* ---- Storage Plus offer ---- */
.bytes-storage-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bytes-storage-offer[hidden] { display: none; }
.bytes-storage-offer i { font-size: 11px; color: var(--text-secondary); }
.bytes-storage-offer.is-nudge {
    border-color: color-mix(in srgb, #0e9c8a 55%, transparent);
    background: color-mix(in srgb, #0e9c8a 8%, var(--surface-color, var(--bg-primary))) !important;
    color: var(--text-color);
}
.byte-storage-perks {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.byte-storage-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}
.byte-storage-perks i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: color-mix(in srgb, #0e9c8a 14%, transparent);
    color: #0e9c8a;
    font-size: 14px;
}

/* Video tiles: the poster image, and the one state where nothing could be drawn. */
.bytes-media-tile.is-video .bytes-media-tile-poster:not([src]) { opacity: 0; }
.bytes-media-tile.is-media-broken::before {
    content: "\f008";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Length badge on a staged video. The template paints every light-theme text
   black, dark pills included, which is why "Video" was unreadable. */
html body #new-custom-modal .bytes-media-tile .bytes-media-tile-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
html body #new-custom-modal .bytes-media-tile .bytes-media-tile-badge:empty { display: none; }

/* ---- Composer: warm paper, white section cards, mono eyebrows, sticky Post ---- */
html body #new-custom-modal.upload-only {
    background: #f6f4ef !important;
}
html body #new-custom-modal.upload-only #bytes-modal-scroll,
html body #new-custom-modal.upload-only #modal-content-wrapper {
    background: transparent !important;
}
html body #new-custom-modal.upload-only #modal-content-wrapper { padding: 12px 16px 0; }

.bytes-composer-head {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1002;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0;
    align-items: center;
    justify-content: space-between;
    background: #f6f4ef;
}
#new-custom-modal.upload-only .bytes-composer-head { display: flex; }
.bytes-composer-cancel,
.bytes-composer-head-spacer { width: 64px; flex: 0 0 64px; }
.bytes-composer-cancel {
    margin: 0; padding: 8px 0; border: 0;
    background: transparent !important; box-shadow: none !important;
    text-align: left; font-size: 15px; font-weight: 600;
    color: var(--text-color); cursor: pointer;
}
.bytes-composer-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

/* Posting as: a card with the app's own avatar. */
html body #new-custom-modal.upload-only #bytes-auth-section { margin-bottom: 18px; padding-right: 0; }
html body #new-custom-modal.upload-only .bytes-posting-compact {
    padding: 12px 14px !important;
    border: 1px solid rgba(17, 17, 17, 0.08) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-icon.has-avatar {
    overflow: hidden; padding: 0 !important; background: #111 !important;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-icon.has-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}

.bytes-composer-eyebrow {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 4px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(17, 17, 17, 0.55);
}
.bytes-composer-eyebrow span:last-child { letter-spacing: 0.04em; text-transform: none; }
.bytes-composer-eyebrow .bytes-caption-count { float: none; font-size: 10.5px; color: inherit; }

.bytes-composer-card {
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: #ffffff;
}
.bytes-composer-card--media > div { margin-bottom: 0 !important; }
#new-custom-modal .bytes-composer-card--media .bytes-file-upload-control {
    box-shadow: none;
    background: #fbfaf7;
}
.bytes-composer-card--caption { padding: 4px 6px; }
#new-custom-modal .bytes-composer-card--caption #bytes-description {
    width: 100%; min-height: 96px; margin: 0; padding: 12px 10px;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 16px; line-height: 1.45; resize: none; outline: none;
}

/* Post stays reachable while the sheet scrolls. */
.bytes-composer-foot {
    position: sticky;
    bottom: calc(var(--mobile-bottom-nav-height, 58px) + env(safe-area-inset-bottom, 0px) - 6px);
    z-index: 5;
    margin: 4px -16px 0;
    padding: 10px 16px 12px;
    background: linear-gradient(180deg, rgba(246, 244, 239, 0), #f6f4ef 28%);
}
.bytes-composer-foot .bytes-post-note { margin-top: 8px; }
.bytes-more-options { border-top-color: rgba(17, 17, 17, 0.1); }

/* Template-level button/textarea repaints outrank plain class rules; pin these. */
html body #new-custom-modal .bytes-composer-cancel,
html body #new-custom-modal .bytes-composer-cancel:hover,
html body #new-custom-modal .bytes-composer-cancel:active {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    transform: none !important;
}
html body #new-custom-modal .bytes-composer-card--caption #bytes-description,
html body #new-custom-modal .bytes-composer-card--caption #bytes-description:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
}
/* More options reads as one more card, not a bare line on the paper. */
html body #new-custom-modal.upload-only .bytes-more-options {
    margin: 6px 0 18px;
    padding: 0 14px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: #ffffff;
}
html body #new-custom-modal.upload-only .bytes-more-options-summary { padding: 14px 0; }
html body #new-custom-modal.upload-only #modal-content-wrapper,
html body #new-custom-modal.upload-only #modal-content-upload {
    background: transparent !important;
}
/* The template blurs and saturates behind every button; on paper that reads as a box. */
html body #new-custom-modal .bytes-composer-cancel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Composer tokens, from the Post Composer design ---- */
html body #new-custom-modal.upload-only {
    background: #FBFBF9 !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html body #new-custom-modal.upload-only #modal-content-wrapper { padding: 6px 18px 0; }
.bytes-composer-head { background: #FBFBF9; height: calc(52px + env(safe-area-inset-top, 0px)); }
html body #new-custom-modal .bytes-composer-cancel { font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
.bytes-composer-title { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #111214; }
.bytes-composer-title small {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #70706B;
}

html body #new-custom-modal.upload-only .bytes-posting-compact {
    gap: 12px !important; padding: 12px !important;
    border: 1px solid #EAEAE6 !important; border-radius: 18px !important;
    background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-icon { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
html body #new-custom-modal.upload-only .bytes-posting-compact-label {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; letter-spacing: 0.14em !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important;
    margin-bottom: 3px;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #111214 !important; }

.bytes-composer-eyebrow {
    margin: 14px 4px 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #70706B;
}
.bytes-composer-eyebrow span:last-child,
.bytes-composer-eyebrow .bytes-caption-count { font-size: 9px; letter-spacing: 0.08em; color: #70706B; }

.bytes-composer-card {
    margin: 0;
    padding: 10px;
    border: 1px solid #EAEAE6;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
}
#new-custom-modal .bytes-composer-card--media .bytes-file-upload-control {
    min-height: 74px; padding: 16px; gap: 14px;
    border: 1px dashed #D6D6D0; border-radius: 16px; background: #FFFFFF; box-shadow: none;
}
#new-custom-modal .bytes-composer-card--media .bytes-file-upload-icon {
    width: 42px; height: 42px; border-radius: 13px;
    background: #0FBFA4; color: #08322C; font-size: 18px;
    box-shadow: 0 6px 14px -6px rgba(15, 191, 164, 0.7);
}
#new-custom-modal .bytes-composer-card--media .bytes-file-upload-title { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #111214; }
#new-custom-modal .bytes-composer-card--media .bytes-file-upload-meta { font-size: 12px; font-weight: 500; color: #63635F; }
.bytes-storage-offer { font-size: 12px; font-weight: 600; color: #63635F; border-color: #EAEAE6; border-radius: 12px; }
.bytes-composer-card--caption { padding: 2px 4px; }
#new-custom-modal .bytes-composer-card--caption #bytes-description { padding: 14px 12px; font-size: 14px; line-height: 1.5; font-weight: 500; color: #111214; }
#new-custom-modal .bytes-composer-card--caption #bytes-description::placeholder { color: #A3A3A0; }

/* Post: 54px, spaced mono label, muted until there is something to post. */
html body #new-custom-modal #submit-new-byte-btn {
    height: 54px; padding: 0 !important; border-radius: 16px !important;
    background: #EDEDE8 !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase;
    box-shadow: none !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
html body #new-custom-modal #submit-new-byte-btn.is-ready {
    background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important;
    box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
}
html body #new-custom-modal #submit-new-byte-btn i { font-size: 11px; margin-right: 2px; }
.bytes-composer-foot { background: linear-gradient(180deg, rgba(251, 251, 249, 0), #FBFBF9 28%); padding-top: 12px; }
.bytes-composer-foot .bytes-post-note { margin-top: 9px; font-size: 11.5px; font-weight: 500; color: #63635F; letter-spacing: -0.01em; }

/* More options: a row, with how many places the post goes. */
html body #new-custom-modal.upload-only .bytes-more-options {
    margin: 4px 0 18px; padding: 0; border: 0; border-top: 1px solid #EAEAE6; border-radius: 0; background: transparent;
}
html body #new-custom-modal.upload-only .bytes-more-options-summary { padding: 16px 4px 14px; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: #111214; }
.bytes-more-options-meta { display: inline-flex; align-items: center; gap: 10px; }
/* The chevron alone, on a disc, so it reads as the thing to tap: the row
   used to carry a "1 destination" count beside it that only raised the
   question of what a destination was. */
html body #new-custom-modal.upload-only .bytes-more-options-meta i {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    background: #F1F1ED !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
    font-size: 11px !important; transition: transform 160ms ease, background 120ms ease !important;
}
html body #new-custom-modal.upload-only .bytes-more-options-summary:active .bytes-more-options-meta i { background: #E4E4DF !important; }
.bytes-more-options-meta em {
    font-style: normal; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #70706B;
}
.bytes-more-options-body { padding: 0 0 8px; }
.bytes-more-label {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #70706B; margin: 0 4px 8px;
}

/* ---- Source switch and media-type grid, from the design ---- */
html body #new-custom-modal.upload-only .bytes-source-mode {
    display: flex; gap: 6px; margin: 14px 0 0; padding: 4px;
    border-radius: 14px; background: #F1F1ED;
}
html body #new-custom-modal.upload-only .bytes-source-mode-btn {
    flex: 1; height: 38px; margin: 0; padding: 0; border: 0 !important; border-radius: 11px;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em;
    color: #63635F !important; -webkit-text-fill-color: #63635F !important;
    transition: all 0.16s ease; cursor: pointer;
}
html body #new-custom-modal.upload-only .bytes-source-mode-btn.is-active {
    background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(17, 18, 20, 0.10) !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #new-custom-modal.upload-only .bytes-media-type-section { margin: 0 !important; }
html body #new-custom-modal.upload-only .bytes-media-type-label {
    margin: 14px 4px 8px !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important;
}
html body #new-custom-modal.upload-only .bytes-media-type-grid > button {
    gap: 10px; padding: 9px 11px !important; border-radius: 14px !important;
    background: #FFFFFF !important; border: 1px solid #EAEAE6 !important;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    font-size: 13px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #new-custom-modal.upload-only .bytes-media-type-grid > button.is-media-selected {
    border-color: #111214 !important;
    box-shadow: 0 0 0 3px rgba(17, 18, 20, 0.06) !important;
}
html body #new-custom-modal.upload-only .byte-pill-mark { width: 30px; height: 30px; border-radius: 9px; }
/* Embed mode: the URL field sits in the media card like the upload control did. */
html body #new-custom-modal.upload-only .bytes-composer-card--media input[type="text"],
html body #new-custom-modal.upload-only .bytes-composer-card--media input[type="url"],
html body #new-custom-modal.upload-only .bytes-composer-card--media textarea {
    width: 100%; box-sizing: border-box; min-height: 50px; padding: 0 16px !important; margin: 0 !important;
    border: 1px solid #EAEAE6 !important; border-radius: 16px !important; background: #FFFFFF !important;
    font-size: 13.5px !important; font-weight: 500; color: #111214 !important; -webkit-text-fill-color: #111214 !important; outline: none;
}
html body #new-custom-modal.upload-only .bytes-composer-card--media textarea { padding: 14px 16px !important; min-height: 96px; resize: none; }

/* ---- Post settings panel inside the composer ---- */
html body #new-custom-modal .bytes-composer-settings {
    width: 64px; flex: 0 0 64px; margin: 0; padding: 8px 0; border: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    text-align: right; cursor: pointer;
}
html body #new-custom-modal .bytes-composer-settings i { font-size: 16px; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#new-custom-modal.upload-only.is-settings #modal-content-upload { display: none !important; }
#new-custom-modal.upload-only.is-settings #modal-content-settings { display: block !important; padding: 6px 0 24px !important; }
#new-custom-modal.upload-only.is-settings .bytes-composer-settings { visibility: hidden; }
html body #new-custom-modal.upload-only #modal-content-settings > h3 { display: none; }
html body #new-custom-modal.upload-only #modal-content-settings > div,
html body #new-custom-modal.upload-only #modal-content-settings .bytes-settings-card {
    margin: 0 0 12px !important;
    padding: 16px !important;
    border: 1px solid #EAEAE6 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important;
}
html body #new-custom-modal.upload-only #modal-content-settings h4 {
    margin: 0 0 6px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #111214 !important;
}
html body #new-custom-modal.upload-only #modal-content-settings h4 i { color: #0FBFA4; margin-right: 8px; }
html body #new-custom-modal.upload-only #modal-content-settings p { font-size: 12px !important; font-weight: 500; color: #63635F !important; margin: 0 0 12px !important; }
html body #new-custom-modal.upload-only #modal-content-settings label {
    padding: 10px 12px; border: 1px solid #EAEAE6; border-radius: 12px; background: #FBFBF9;
    font-size: 13px; font-weight: 600; color: #111214;
}
html body #new-custom-modal.upload-only #modal-content-settings label span { font-size: 13px !important; color: #111214 !important; }
html body #new-custom-modal.upload-only #modal-content-settings input[type="radio"],
html body #new-custom-modal.upload-only #modal-content-settings input[type="checkbox"] { accent-color: #0FBFA4; }
html body #new-custom-modal.upload-only #modal-content-settings h5 { font-size: 12px !important; color: #111214 !important; margin: 14px 0 8px !important; }

/* Comments switched off for this app: the ways in disappear for everyone. */
.bytes-comments-off [onclick^="openBytesComments"],
.bytes-comments-off .mcin__act--chat,
.bytes-comments-off .bytes-tv-comment-sheet { display: none !important; }
/* iOS draws small/abbr with a dotted underline in this template; the state line gets none. */
html body #new-custom-modal .bytes-composer-title small {
    text-decoration: none !important;
    border: 0 !important;
    -webkit-text-decoration: none !important;
}

html body #new-custom-modal.upload-only .bytes-posting-compact-icon.has-initial {
    background: #111214 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important;
    font-size: 13px; font-weight: 800; letter-spacing: -0.02em;
}
html body #new-custom-modal.upload-only .bytes-posting-compact-icon.has-initial span { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
/* Keep the gear's slot so the title stays centered when a member has no gear. */
html body #new-custom-modal .bytes-composer-settings[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
/* Post sits in the flow under the caption. Pinned to the bottom, it floated
   over the description as soon as Embed mode made the sheet taller than the
   screen, and the caption had to be scrolled out from under it. */
html body #new-custom-modal .bytes-composer-foot {
    position: static;
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
}
/* Engagement off also drops the view/like/comment counts on X-post detail. */
html.bytes-feed-stats-hidden .mobile-import-library__x-stats,
body.bytes-feed-stats-hidden .mobile-import-library__x-stats { display: none !important; }
/* The fullscreen viewer for embeds (YouTube, SoundCloud and the rest) keeps
   its engagement row in its own shell, outside the feed and the cinema. */
html.bytes-feed-stats-hidden #bloc-byte-engagement-shell,
body.bytes-feed-stats-hidden #bloc-byte-engagement-shell { display: none !important; }
html.bytes-comments-off #bloc-byte-engagement-shell [onclick^="handleBlocByteComment"],
body.bytes-comments-off #bloc-byte-engagement-shell [onclick^="handleBlocByteComment"] { display: none !important; }
/* The shell's display is set inline when the viewer opens, so hide it with
   properties an inline display cannot put back. */
html.bytes-feed-stats-hidden #bloc-byte-engagement-shell,
body.bytes-feed-stats-hidden #bloc-byte-engagement-shell {
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
html.bytes-comments-off #bloc-byte-engagement-shell [onclick^="handleBlocByteComment"],
body.bytes-comments-off #bloc-byte-engagement-shell [onclick^="handleBlocByteComment"] {
    visibility: hidden !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important;
}

/* ---- Access gate: by-request posting, before the composer ---- */
html body #new-custom-modal#new-custom-modal .bytes-gate { display: block; padding: 8px 0 0; }
html body #new-custom-modal#new-custom-modal .bytes-gate-icon { width: 56px; height: 56px; margin: 8px auto 14px; border-radius: 18px; background: #111214; display: grid; place-items: center; }
html body #new-custom-modal#new-custom-modal .bytes-gate-icon i { font-size: 20px; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-title { margin: 0 0 6px !important; text-align: center; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.03em; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-copy { margin: 0 auto 18px !important; max-width: 300px; text-align: center; font-size: 13px !important; font-weight: 500; line-height: 1.5; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-eyebrow, html body #new-custom-modal#new-custom-modal .bytes-gate-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-eyebrow { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; padding: 0 4px; }
html body #new-custom-modal#new-custom-modal .bytes-gate-eyebrow span:last-child:not(:first-child) { letter-spacing: 0.08em !important; text-transform: none !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-card { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 12px; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03); }
html body #new-custom-modal#new-custom-modal .bytes-gate-lock { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: #F1F1ED; display: grid; place-items: center; }
html body #new-custom-modal#new-custom-modal .bytes-gate-lock i { font-size: 13px; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal#new-custom-modal .bytes-gate-card input, html body #new-custom-modal#new-custom-modal .bytes-gate-card input:focus {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 8px !important;
    border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important;
}
html body #new-custom-modal#new-custom-modal .bytes-gate-card input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; letter-spacing: 0.04em; text-transform: none; }
html body #new-custom-modal#new-custom-modal .bytes-gate-card--rows { display: block; padding: 0; }
html body #new-custom-modal#new-custom-modal .bytes-gate-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; }
html body #new-custom-modal#new-custom-modal .bytes-gate-row + .bytes-gate-row { border-top: 1px solid #EFEFEB; }
html body #new-custom-modal#new-custom-modal .bytes-gate-row > span { flex: 0 0 56px; font-size: 13px !important; font-weight: 600; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-row input, html body #new-custom-modal#new-custom-modal .bytes-gate-row input:focus { text-align: right; font-family: inherit !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none; padding: 0 !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-row input[type="password"] { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; letter-spacing: 0.2em !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-error { margin: 10px 4px 0; font-size: 12px; font-weight: 600; color: #E24B3B !important; -webkit-text-fill-color: #E24B3B !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-error[hidden] { display: none !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-verify, html body #new-custom-modal#new-custom-modal button.bytes-gate-verify {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 14px 0 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; cursor: pointer;
}
html body #new-custom-modal#new-custom-modal .bytes-gate-verify::before, html body #new-custom-modal#new-custom-modal .bytes-gate-verify::after { content: none !important; display: none !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-verify.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-verify.is-busy { letter-spacing: 0.16em !important; }
html body #new-custom-modal#new-custom-modal .bytes-gate-note { margin: 9px 0 0 !important; text-align: center; font-size: 11.5px !important; font-weight: 500; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

/* Gated: only the header and the gate show. The guest auth cards share the gate styles. */
html body #new-custom-modal#new-custom-modal.is-gated #bytes-upload-form-content { display: none !important; }
html body #new-custom-modal#new-custom-modal.is-gated .bytes-composer-settings { visibility: hidden; }
html body #new-custom-modal#new-custom-modal .bytes-guest-auth { margin: 0 0 6px; }
html body #new-custom-modal#new-custom-modal .bytes-guest-auth .bytes-gate-eyebrow { margin-top: 0; }

/* More options is gone: its contents (channel, publish) always show. */
.bytes-more-options.is-always-open { border-top: 0 !important; margin-top: 8px !important; }
.bytes-more-options.is-always-open > .bytes-more-options-summary { display: none !important; }

/* The entire upload zone opens the picker; make that primary action obvious. */
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control {
    min-height: 104px;
    padding: 18px 20px;
    gap: 16px;
    border: 2px dashed #0b8f7d;
    background: #eefaf6;
    box-shadow: inset 0 0 0 1px rgba(15, 191, 164, .06);
}
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control:is(:hover, :focus-within) {
    border-color: #075f54;
    background: #e4f6ef;
    box-shadow: 0 8px 22px rgba(8, 101, 84, .1);
}
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #0d6f61;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 20px;
    box-shadow: none;
}
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-title {
    font-size: 17px;
    font-weight: 800;
}
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    background: #111214;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action i,
html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-icon i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
@media (max-width: 560px) {
    html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control {
        flex-wrap: wrap;
    }
    html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-copy {
        flex: 1 1 calc(100% - 72px);
    }
    html body #new-custom-modal:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action {
        width: 100%;
        margin-top: 3px;
    }
}

/* ============================================================
   Composer family (2026-09-28): Create, Community New Post and the
   map's New pin read as one set. Same --cx-* tokens as
   mobile-community-compose.css, restated per theme like the pin
   sheet (mobile-map-pins.css): light, dark, the owner's page colour
   and Glass. The modal colour fixer skips this sheet in upload-only
   mode (composerRoots in mobile-modal-color-fixer.js), so nothing
   stamps white text on it any more. Three ids outrank the rules
   above; Glass's six-id rules (mobile-glass-surfaces.css) still win.
   Story mode (Blips) keeps its own look: every rule excludes it.
   ============================================================ */
html body #new-custom-modal {
    --cx-page: #FBFBF9; --cx-card: #FFFFFF; --cx-line: #E6E6E3; --cx-edge: #D4D4CF;
    --cx-ink: #111214; --cx-dim: #5C5C63; --cx-faint: #8A8A92;
    --cx-fill: #EDEDE8; --cx-fill-ink: #8A8A84; --cx-soft: #F3F3F0;
    --cx-btn: #111214; --cx-on-btn: #FFFFFF; --cx-bad: #C2410C; --cx-good: #15803D;
    --cx-font: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme*="dark"] body #new-custom-modal {
    --cx-page: #0B0B0C; --cx-card: #161618; --cx-line: #26262B; --cx-edge: #3A3A41;
    --cx-ink: #F4F4F5; --cx-dim: #B4B4BB; --cx-faint: #8A8A92;
    --cx-fill: #1F1F23; --cx-fill-ink: #7A7A82; --cx-soft: #1B1B1F;
    --cx-btn: #F4F4F5; --cx-on-btn: #0B0B0C; --cx-bad: #F87171; --cx-good: #4ADE80;
}
html[data-page-color] body #new-custom-modal {
    --cx-page: var(--pc-page); --cx-card: var(--pc-card); --cx-line: var(--pc-line); --cx-edge: var(--pc-edge);
    --cx-ink: var(--pc-ink); --cx-dim: var(--pc-dim); --cx-faint: var(--pc-faint);
    --cx-fill: var(--pc-soft); --cx-fill-ink: var(--pc-faint); --cx-soft: var(--pc-soft);
    --cx-btn: var(--pc-btn); --cx-on-btn: var(--pc-on-btn); --cx-bad: var(--pc-bad); --cx-good: var(--pc-good);
}
html[data-appearance="glass"] body #new-custom-modal {
    --cx-page: transparent; --cx-card: rgba(255, 255, 255, 0.12); --cx-line: rgba(255, 255, 255, 0.24); --cx-edge: rgba(255, 255, 255, 0.4);
    --cx-ink: #FFFFFF; --cx-dim: rgba(255, 255, 255, 0.74); --cx-faint: rgba(255, 255, 255, 0.56);
    --cx-fill: rgba(255, 255, 255, 0.1); --cx-fill-ink: rgba(255, 255, 255, 0.5); --cx-soft: rgba(255, 255, 255, 0.1);
    --cx-btn: var(--gl-cta, rgba(255, 255, 255, 0.92)); --cx-on-btn: var(--gl-cta-ink, #0B0B0C); --cx-bad: #FCA5A5; --cx-good: #86EFAC;
}

/* Surface. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) {
    background: var(--cx-page) !important; background-color: var(--cx-page) !important;
    font-family: var(--cx-font) !important; color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(#bytes-upload-form-content, #bytes-composer-head, #bytes-auth-section) :is(span, p, small, strong, em, label, div, h3, h4, h5, button, textarea, input, select) { font-family: inherit !important; }

/* Header: Cancel | title + status | settings. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-head {
    background: var(--cx-page) !important; border-bottom: 1px solid var(--cx-line) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-cancel {
    min-height: 44px !important; font-size: 15px !important; font-weight: 600 !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-title {
    gap: 3px !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.01em !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; background: transparent !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-title span { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: transparent !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-title small {
    font-family: inherit !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important;
    color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important; background: transparent !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode):not(.is-settings):has(#submit-new-byte-btn.is-ready) .bytes-composer-title small { color: var(--cx-good) !important; -webkit-text-fill-color: var(--cx-good) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-settings { min-height: 44px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-settings i { color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; }

/* Posting as. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-posting-compact {
    padding: 12px 14px !important; border: 1px solid var(--cx-line) !important; border-radius: 14px !important;
    background: var(--cx-card) !important; box-shadow: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-posting-compact-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-posting-compact-label, .bytes-composer-eyebrow, .bytes-composer-eyebrow span, .bytes-media-type-label, .bytes-publish-label, .bytes-more-label) {
    font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; background: transparent !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-posting-compact-name {
    font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; background: transparent !important;
}

/* Upload media | Embed link: a quiet segmented control. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-source-mode {
    margin: 16px 0 0 !important; padding: 3px !important; gap: 3px !important; border-radius: 12px !important;
    background: var(--cx-fill) !important; border: 0 !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-source-mode-btn {
    height: 38px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600 !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-source-mode-btn.is-active {
    background: var(--cx-card) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important;
}

/* Eyebrow labels over each card; counts go right, in plain case. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-eyebrow { margin: 18px 2px 8px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-eyebrow span:last-child:not(:first-child) {
    font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: none !important; font-variant-numeric: tabular-nums;
    color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important;
}

/* Cards and fields. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card {
    padding: 10px !important; border: 1px solid var(--cx-line) !important; border-radius: 14px !important;
    background: var(--cx-card) !important; box-shadow: none !important; transition: border-color 0.15s ease;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption { padding: 0 !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption:focus-within { border-color: var(--cx-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption #bytes-description,
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption #bytes-description:focus {
    min-height: 120px !important; padding: 14px !important; border: 0 !important; background: transparent !important; background-color: transparent !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.45 !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; caret-color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #bytes-description::placeholder { color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important; }
/* Embed mode: the URL field fills the media card, 48px, 16px text. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media :is(input[type="text"], input[type="url"], input[type="number"], textarea) {
    min-height: 48px !important; padding: 0 14px !important; border: 1px solid var(--cx-line) !important; border-radius: 12px !important;
    background: var(--cx-card) !important; background-color: var(--cx-card) !important; box-shadow: none !important;
    font-size: 16px !important; font-weight: 500 !important; color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media textarea { padding: 12px 14px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media :is(input, textarea):focus { border-color: var(--cx-ink) !important; outline: none !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media :is(input, textarea)::placeholder { color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media [id^="bytes-section-"] > div:not([id$="-preview"]) { color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important; }

/* Media: a drop zone that says what it takes; the whole zone opens the picker. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control {
    min-height: 88px !important; padding: 16px !important; gap: 14px !important; flex-wrap: nowrap !important;
    border: 1.5px dashed var(--cx-edge) !important; border-radius: 12px !important;
    background: var(--cx-card) !important; box-shadow: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control:is(:hover, :focus-within, :active) {
    border-color: var(--cx-ink) !important; background: var(--cx-soft) !important; box-shadow: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-icon {
    width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 10px !important;
    background: var(--cx-soft) !important; border: 1px solid var(--cx-line) !important; box-shadow: none !important; font-size: 16px !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-icon i { color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-copy { flex: 1 1 auto !important; min-width: 0 !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-title {
    font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; background: transparent !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-meta {
    margin-top: 2px !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; background: transparent !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action {
    width: auto !important; min-height: 36px !important; margin: 0 !important; padding: 0 12px !important; gap: 7px !important; flex: 0 0 auto !important;
    border: 1px solid var(--cx-line) !important; border-radius: 10px !important; background: var(--cx-card) !important;
    font-size: 13px !important; font-weight: 700 !important; color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action i { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: 12px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-storage-offer {
    border-color: var(--cx-line) !important; background: transparent !important; color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important;
}

/* Helper text under a field; the media help swaps with the source mode. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-help {
    margin: 7px 2px 0 !important; padding: 0 !important; background: transparent !important;
    font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.4 !important;
    color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-help[hidden] { display: none !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode):has(#bytes-source-mode-link.is-active) #bytes-media-help-upload,
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode):not(:has(#bytes-source-mode-link.is-active)) #bytes-media-help-link { display: none !important; }

/* Inline validation: plain words in the error colour, not a pink box. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(#bytes-media-validation-msg, #new-byte-upload-error) {
    margin: 8px 2px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
    font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.4 !important;
    color: var(--cx-bad) !important; -webkit-text-fill-color: var(--cx-bad) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #new-byte-upload-error { margin: 12px 2px 0 !important; }

/* One primary action, muted until there is something to post. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-foot { margin: 22px 0 0 !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #submit-new-byte-btn {
    height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important;
    background: var(--cx-fill) !important; background-color: var(--cx-fill) !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: none !important;
    color: var(--cx-fill-ink) !important; -webkit-text-fill-color: var(--cx-fill-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #submit-new-byte-btn i { display: none !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #submit-new-byte-btn.is-ready {
    background: var(--cx-btn) !important; background-color: var(--cx-btn) !important;
    color: var(--cx-on-btn) !important; -webkit-text-fill-color: var(--cx-on-btn) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-post-note {
    margin: 10px 0 0 !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
    color: var(--cx-faint) !important; -webkit-text-fill-color: var(--cx-faint) !important; background: transparent !important;
}

/* Channel and Publish to (always open, the owner's call) on the same cards. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-publish-tile, .bytes-publish-connect, .bytes-media-type-grid > button) {
    min-height: 48px !important; border: 1px solid var(--cx-line) !important; border-radius: 12px !important;
    background: var(--cx-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-publish-tile.is-selected, .bytes-media-type-grid > button.is-media-selected) {
    border-color: var(--cx-ink) !important; box-shadow: inset 0 0 0 1px var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-publish-selectall { color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; background: transparent !important; box-shadow: none !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-publish-connect > i:first-child) { background: var(--cx-soft) !important; color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-publish-note, .bytes-publish-connect-go) { color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; }

/* Post settings and the access gate, on the same tokens. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(#modal-content-settings > div, #modal-content-settings .bytes-settings-card, .bytes-gate-card) {
    border: 1px solid var(--cx-line) !important; border-radius: 14px !important; background: var(--cx-card) !important; box-shadow: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #modal-content-settings :is(h4, h5, label span),
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-title { color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-card input { color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #modal-content-settings :is(p, small, h4 i, h5 i, label span i),
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-gate-copy, .bytes-gate-note, .bytes-gate-row > span, .bytes-gate-lock i) { color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #modal-content-settings label { border-color: var(--cx-line) !important; background: var(--cx-page) !important; min-height: 44px; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #modal-content-settings :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--cx-btn) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-icon,
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-verify.is-ready { background: var(--cx-btn) !important; box-shadow: none !important; color: var(--cx-on-btn) !important; -webkit-text-fill-color: var(--cx-on-btn) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-icon i { color: var(--cx-on-btn) !important; -webkit-text-fill-color: var(--cx-on-btn) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-verify {
    height: 52px !important; min-height: 52px !important; border-radius: 14px !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-verify:not(.is-ready) { background: var(--cx-fill) !important; color: var(--cx-fill-ink) !important; -webkit-text-fill-color: var(--cx-fill-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-lock { background: var(--cx-soft) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) :is(.bytes-gate-eyebrow, .bytes-gate-eyebrow span) {
    font-family: inherit !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-gate-error { color: var(--cx-bad) !important; -webkit-text-fill-color: var(--cx-bad) !important; }
/* The helper lines belong to the regular composer only (not Blips, not the manager). */
#new-custom-modal .bytes-composer-help { display: none; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-help { display: block; }
/* Post's label is written in capitals by several scripts (POST, POSTED,
   SAVE, POST & PUBLISH (3)); set it in sentence case like the family. The
   button is a block so ::first-letter applies. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #submit-new-byte-btn {
    display: block !important; width: 100% !important; line-height: 52px !important; text-align: center !important;
    text-transform: lowercase !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #submit-new-byte-btn::first-letter { text-transform: uppercase !important; }
/* Posting as: label over name, like New Post. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-posting-compact-copy {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; min-width: 0 !important;
}
/* The drop zone: icon and words on one line, Choose files under the words. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control { flex-wrap: wrap !important; align-items: center !important; row-gap: 10px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-copy { flex: 1 1 calc(100% - 60px) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action { margin-left: 54px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption { overflow: hidden !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--caption #bytes-description { border-radius: 0 !important; display: block !important; width: 100% !important; }
/* Add to Channel: an eyebrow and a 56px field like the rest. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #bytes-bloc-selector > div:first-child { margin: 18px 2px 8px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #bytes-bloc-selector > div:first-child > div {
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important;
    color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #bytes-new-bloc-btn {
    min-height: 32px !important; padding: 0 10px !important; border: 1px solid var(--cx-line) !important; border-radius: 8px !important;
    background: var(--cx-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    font-size: 12.5px !important; font-weight: 600 !important; color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-bloc-dropdown-btn {
    min-height: 56px !important; padding: 10px 46px 10px 12px !important; border: 1px solid var(--cx-line) !important; border-radius: 14px !important;
    background: var(--cx-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-bloc-dropdown-btn .bloc-drop-title { font-size: 15px !important; font-weight: 700 !important; color: var(--cx-ink) !important; -webkit-text-fill-color: var(--cx-ink) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-bloc-dropdown-btn .bloc-drop-meta { color: var(--cx-dim) !important; -webkit-text-fill-color: var(--cx-dim) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-bloc-dropdown-btn .bloc-drop-icon { box-shadow: none !important; border-radius: 10px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-bloc-dropdown-btn::after { background: transparent !important; color: var(--cx-dim) !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-publish-head { margin: 18px 2px 8px !important; }
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) #bytes-new-bloc-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    height: 32px !important; min-height: 32px !important; line-height: 1 !important; margin: 0 !important;
}

/* The upload card, centred: icon over the words over Choose files. */
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-control {
    flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important;
    text-align: center !important; row-gap: 10px !important; padding: 22px 16px !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-copy {
    flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important;
}
html body #new-custom-modal#new-custom-modal#new-custom-modal.upload-only:not(.story-mode) .bytes-composer-card--media .bytes-file-upload-action { margin-left: 0 !important; }
/* Storage Plus members see their plan, not an offer. */
html body #new-custom-modal .bytes-storage-offer.is-member { cursor: default; }
html body #new-custom-modal .bytes-storage-offer.is-member i { display: none; }
/* Create covers the page: no bottom nav over it. */
html body:has(#new-custom-modal.upload-only:not(.story-mode)[style*="display: block"]) #bottom-nav,
html body:has(#new-custom-modal.upload-only:not(.story-mode)[style*="display:block"]) #bottom-nav,
html body:has(#new-custom-modal.upload-only:not(.story-mode)[style*="display: flex"]) #bottom-nav { display: none !important; }

/* Final owner-Home contrast layer. Scoped to Market only. */
@media (max-width: 600px) {
  #market-main-area.market-owner-home-active {
    padding-top: max(132px, calc(var(--mobile-app-header-height, 100px) + 14px)) !important;
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
  }
}

#market-main-area.market-owner-home-active,
#market-main-area.market-owner-home-active > .mobile-market-owner-home {
  background: #ffffff !important;
}

#market-main-area.market-owner-home-active > .mobile-market-owner-home {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status,
#market-main-area.market-owner-home-active .market-owner-home__status * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status small {
  color: rgba(255, 255, 255, 0.72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status > i:first-child {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status {
  grid-template-columns: 40px minmax(0, 1fr) 14px !important;
  margin-top: 24px !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status > span {
  min-width: 0 !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status strong,
#market-main-area.market-owner-home-active .market-owner-home__status small {
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status strong {
  font-size: clamp(12px, 3.6vw, 14px) !important;
  line-height: 1.2 !important;
}

#market-main-area.market-owner-home-active .market-owner-home__status small {
  line-height: 1.35 !important;
}

#market-main-area.market-owner-home-active .market-owner-home__actions button,
#market-main-area.market-owner-home-active .market-owner-home__recent,
#market-main-area.market-owner-home-active .market-owner-home__rewards {
  background: #ffffff !important;
  border-color: rgba(10, 10, 10, 0.12) !important;
}

#market-main-area.market-owner-home-active .market-owner-home__revenue-head,
#market-main-area.market-owner-home-active .market-owner-home__revenue-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#market-main-area.market-owner-home-active .market-owner-home__periods {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  background: #f4f4f4;
}

#market-main-area.market-owner-home-active .market-owner-home__periods button {
  min-width: 38px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
  font-size: 10px;
  font-weight: 900;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#market-main-area.market-owner-home-active .market-owner-home__periods button:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}

#market-main-area.market-owner-home-active .market-owner-home__periods button.is-active {
  background: #111;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

#market-main-area.market-owner-home-active .market-owner-home__trend {
  color: #777;
  text-align: right;
}

#market-main-area.market-owner-home-active .market-owner-home__trend.is-up {
  color: #147a3b;
}

#market-main-area.market-owner-home-active .market-owner-home__trend.is-down {
  color: #b42318;
}

#market-main-area.market-owner-home-active .market-owner-home__recent > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
}

#market-main-area.market-owner-home-active .market-owner-home__buyer {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #111;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

#market-main-area.market-owner-home-active .market-owner-home__recent > button > span {
  min-width: 0;
}

.market-owner-dashboard{position:fixed;top:0;left:0;right:0;bottom:var(--market-guest-chrome-bottom,calc(env(safe-area-inset-bottom, 0px) + 58px));z-index:10010;background:#fff;color:#0a0a0a;-webkit-text-fill-color:#0a0a0a;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;overflow:hidden}.market-owner-dashboard__topbar{box-sizing:border-box;height:var(--market-owner-dashboard-topbar,60px);padding:9px 18px;display:grid;grid-template-columns:42px 1fr 42px;gap:12px;align-items:center;border-bottom:1px solid #ececec;background:#fff}.market-owner-dashboard__topbar>button{width:42px;height:42px;border:1px solid #e3e3e3;border-radius:50%;background:#fff;color:#111!important;-webkit-text-fill-color:#111!important}.market-owner-dashboard__topbar>div{text-align:center}.market-owner-dashboard__topbar span,.market-owner-dashboard__section span,.market-owner-dashboard__split>article>span{display:block;font-size:9px;font-weight:950;letter-spacing:.16em;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__topbar strong{display:block;font-size:16px;margin-top:3px}.market-owner-dashboard__body{height:100%;overflow-y:auto;padding:calc(var(--market-guest-chrome-top, calc(env(safe-area-inset-top, 0px) + 74px)) + 14px) 18px 28px;box-sizing:border-box}.market-owner-dashboard__refresh{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #e3e3e3;border-radius:50%;background:#fff;color:#111!important;-webkit-text-fill-color:#111!important;font-size:13px;cursor:pointer}.market-owner-dashboard .market-owner-dashboard__periods{margin-top:12px;margin-left:0}.market-owner-dashboard__periods{width:max-content;margin-left:auto;display:flex;gap:3px;padding:3px;border:1px solid #e3e3e3;border-radius:999px;background:#f4f4f4}.market-owner-dashboard__periods button{height:29px;min-width:42px;border:0;border-radius:999px;background:transparent;color:#666!important;-webkit-text-fill-color:#666!important;font-size:10px;font-weight:950}.market-owner-dashboard__periods button.is-active{background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important}.market-owner-dashboard__hero{margin-top:14px;padding:22px;border-radius:24px;background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.2),transparent 30%),linear-gradient(140deg,#1c1c1f,#09090a 56%,#222226);box-shadow:0 20px 46px rgba(0,0,0,.2)}.market-owner-dashboard__hero,.market-owner-dashboard__hero *{color:#fff!important;-webkit-text-fill-color:#fff!important}.market-owner-dashboard__hero>span{font-size:9px;font-weight:950;letter-spacing:.16em;opacity:.66}.market-owner-dashboard__hero>strong{display:block;font-size:45px;line-height:1;margin-top:12px;letter-spacing:-.05em}.market-owner-dashboard__hero>div{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.market-owner-dashboard__hero small{opacity:.72}.market-owner-dashboard__hero em{font-size:11px;font-style:normal;font-weight:950}.market-owner-dashboard__hero em.is-up{color:#7ee2a0!important;-webkit-text-fill-color:#7ee2a0!important}.market-owner-dashboard__hero em.is-down{color:#ff9b91!important;-webkit-text-fill-color:#ff9b91!important}.market-owner-dashboard__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;border:0;border-radius:0;overflow:visible}.market-owner-dashboard__metrics article{padding:14px 12px;border:0;border-radius:16px;background:#f6f6f7}.market-owner-dashboard__metrics article:last-child{border:0}.market-owner-dashboard__metrics span{font-size:8px;font-weight:950;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__metrics strong{display:block;font-size:19px;margin-top:7px}.market-owner-dashboard__section{margin-top:28px}.market-owner-dashboard__heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:13px}.market-owner-dashboard__heading h2{font-size:20px;margin:4px 0 0}.market-owner-dashboard__heading>small{font-size:11px;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__heading>button{border:0;background:transparent;font-size:11px;font-weight:950}.market-owner-dashboard__chart{height:150px;padding:16px 14px 14px;display:flex;align-items:end;gap:7px;border:0;border-radius:18px;background:#f6f6f7;overflow:hidden}.market-owner-dashboard__chart i{flex:1;min-height:6px;border-radius:999px;background:#18181b}.market-owner-dashboard__chart.is-empty{height:96px;align-items:center;justify-content:center;padding:16px}.market-owner-dashboard__chart.is-empty span{color:#8a8a8f!important;-webkit-text-fill-color:#8a8a8f!important;font-size:12px;font-weight:650}.market-owner-dashboard__split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.market-owner-dashboard__split>article{min-height:170px;padding:16px;border:0;border-radius:18px;background:#f6f6f7}.market-owner-dashboard__rank{margin-top:14px}.market-owner-dashboard__rank>span{display:flex;justify-content:space-between;letter-spacing:0}.market-owner-dashboard__rank b{font-size:11px}.market-owner-dashboard__rank small{font-size:10px;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__rank>i{display:block;height:5px;margin-top:7px;border-radius:999px;background:#eee;overflow:hidden}.market-owner-dashboard__rank>i>b{display:block;height:100%;border-radius:999px;background:#111}.market-owner-dashboard__buyer{display:flex;align-items:center;gap:9px;margin-top:13px}.market-owner-dashboard__buyer>i{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:9px;font-style:normal;font-weight:950}.market-owner-dashboard__buyer span{letter-spacing:0}.market-owner-dashboard__buyer b,.market-owner-dashboard__buyer small{display:block}.market-owner-dashboard__buyer b{font-size:11px}.market-owner-dashboard__buyer small{margin-top:2px;font-size:9px;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__recent{border:0;border-radius:0;overflow:visible}.market-owner-dashboard__recent>button{width:100%;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;padding:13px 2px;border:0;border-bottom:1px solid #f0f0f0;background:transparent;text-align:left}.market-owner-dashboard__recent>button:last-child{border:0}.market-owner-dashboard__recent>button>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#111;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:10px;font-style:normal;font-weight:950}.market-owner-dashboard__recent span{letter-spacing:0}.market-owner-dashboard__recent b,.market-owner-dashboard__recent small{display:block}.market-owner-dashboard__recent b{font-size:12px}.market-owner-dashboard__recent small{margin-top:4px;font-size:10px;color:#777!important;-webkit-text-fill-color:#777!important}.market-owner-dashboard__recent strong{font-size:12px;color:#147a3b!important;-webkit-text-fill-color:#147a3b!important}

.market-owner-dashboard {
  /* Under the app header (10020), not over it: at 11050 this panel covered the
     hamburger and the login/bell button with its own opaque background. */
  z-index: 10010 !important;
}

.market-owner-dashboard__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.market-owner-dashboard__intro span {
  display: block;
  color: #777 !important;
  -webkit-text-fill-color: #777 !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.market-owner-dashboard__intro h1 {
  margin: 5px 0 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__hero,
html body #mobile-market-owner-dashboard .market-owner-dashboard__hero * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__hero em.is-up {
  color: #7ee2a0 !important;
  -webkit-text-fill-color: #7ee2a0 !important;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__hero em.is-down {
  color: #ff9b91 !important;
  -webkit-text-fill-color: #ff9b91 !important;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__periods button {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__periods button.is-active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body #mobile-market-owner-dashboard .market-owner-dashboard__buyer > i,
html body #mobile-market-owner-dashboard .market-owner-dashboard__recent > button > i {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* The metric and split-card labels sit on light grey cards, but only the base
   stylesheet gave them a colour — a broad white-text rule elsewhere was winning
   on device and rendering PAYMENTS / BUYERS / AVERAGE / PAYMENT MIX / TOP BUYERS
   white-on-white. Pin them here, at the same specificity as the hero rules that
   already survive, so nothing outside this file can wash them out. */
html body #mobile-market-owner-dashboard .market-owner-dashboard__metrics span,
html body #mobile-market-owner-dashboard .market-owner-dashboard__split > article > span,
html body #mobile-market-owner-dashboard .market-owner-dashboard__section > span,
html body #mobile-market-owner-dashboard .market-owner-dashboard__heading > small,
html body #mobile-market-owner-dashboard .market-owner-dashboard__rank small,
html body #mobile-market-owner-dashboard .market-owner-dashboard__buyer small,
html body #mobile-market-owner-dashboard .market-owner-dashboard__recent small {
  color: #777 !important;
  -webkit-text-fill-color: #777 !important;
}

/* Values and headings on those same light cards. */
html body #mobile-market-owner-dashboard .market-owner-dashboard__metrics strong,
html body #mobile-market-owner-dashboard .market-owner-dashboard__split > article,
html body #mobile-market-owner-dashboard .market-owner-dashboard__heading h2,
html body #mobile-market-owner-dashboard .market-owner-dashboard__rank b,
html body #mobile-market-owner-dashboard .market-owner-dashboard__buyer b,
html body #mobile-market-owner-dashboard .market-owner-dashboard__recent b {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

/* Empty-state copy inside the chart and split cards. */
html body #mobile-market-owner-dashboard .market-owner-dashboard__chart.is-empty span,
html body #mobile-market-owner-dashboard .market-owner-dashboard__split > article > div {
  color: #8a8a8f !important;
  -webkit-text-fill-color: #8a8a8f !important;
}

.market-guest-dashboard{position:fixed;top:var(--market-guest-chrome-top,calc(env(safe-area-inset-top, 0px) + 74px));left:0;right:0;bottom:var(--market-guest-chrome-bottom,calc(env(safe-area-inset-bottom, 0px) + 58px));z-index:10010;background:#fff;color:#111;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;overflow:hidden}.market-guest-dashboard__topbar{height:var(--market-guest-dashboard-topbar,60px);padding:9px 18px;box-sizing:border-box;display:grid;grid-template-columns:42px 1fr 42px;gap:12px;align-items:center;border-bottom:1px solid #ececec;background:#fff}.market-guest-dashboard__topbar>button{width:42px;height:42px;border:1px solid #e3e3e3;border-radius:50%;background:#fff;color:#111}.market-guest-dashboard__topbar>div{text-align:center}.market-guest-dashboard__topbar span,.market-guest-dashboard__heading span{display:block;font-size:9px;font-weight:950;letter-spacing:.16em;color:#777}.market-guest-dashboard__topbar strong{display:block;font-size:16px;margin-top:3px}.market-guest-dashboard__topbar>i{justify-self:end;color:#111}.market-guest-dashboard__body{height:calc(100% - var(--market-guest-dashboard-topbar,60px));overflow-y:auto;padding:14px 18px 28px;box-sizing:border-box}.market-guest-dashboard__hero{padding:22px;border-radius:24px;background:#111;color:#fff;box-shadow:0 16px 34px rgba(0,0,0,.14)}.market-guest-dashboard__hero span{font-size:9px;letter-spacing:.16em;font-weight:950;color:#bbb}.market-guest-dashboard__hero strong{display:block;margin-top:10px;font-size:38px;line-height:1;letter-spacing:-.05em}.market-guest-dashboard__hero p{margin:12px 0 18px;color:#bdbdbd;font-size:12px;font-weight:650}.market-guest-dashboard__hero button,.market-guest-dashboard__empty button{border:0;border-radius:14px;background:#fff;color:#111;padding:12px 16px;font-size:12px;font-weight:900}.market-guest-dashboard__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;border:0;border-radius:0;overflow:visible}.market-guest-dashboard__metrics article{padding:14px 12px;border:0;border-radius:16px;background:#f6f6f7}.market-guest-dashboard__metrics article:last-child{border:0}.market-guest-dashboard__metrics span{font-size:8px;color:#777;font-weight:950}.market-guest-dashboard__metrics strong{display:block;margin-top:7px;font-size:18px}.market-guest-dashboard__section{margin-top:28px}.market-guest-dashboard__heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:13px}.market-guest-dashboard__heading h2{margin:4px 0 0;font-size:21px}.market-guest-dashboard__heading button{width:34px;height:34px;border:1px solid #e3e3e3;border-radius:50%;background:#fff;color:#111}.market-guest-dashboard__filters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.market-guest-dashboard__filters button{padding:10px 3px;border:0;border-radius:999px;background:#f4f4f5;color:#52525b;font-size:10px;font-weight:850}.market-guest-dashboard__filters button.is-active{background:#111;color:#fff;border-color:#111}.market-guest-dashboard__list{border:0;border-radius:0;overflow:visible}.market-guest-dashboard__row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:13px 2px;border-bottom:1px solid #f0f0f0}.market-guest-dashboard__row:last-child{border:0}.market-guest-dashboard__row>i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#f3f3f3;color:#111;font-size:13px}.market-guest-dashboard__row strong,.market-guest-dashboard__row small{display:block}.market-guest-dashboard__row strong{font-size:12px}.market-guest-dashboard__row small{margin-top:4px;color:#777;font-size:10px}.market-guest-dashboard__row>b{font-size:12px;color:#137a3a}.market-guest-dashboard__row>b.is-debit{color:#b42318}.market-guest-dashboard__loading,.market-guest-dashboard__empty{text-align:center;padding:34px 20px;color:#777;font-size:12px}.market-guest-dashboard__empty i{display:block;margin-bottom:10px;font-size:24px;color:#111}.market-guest-dashboard__empty strong{display:block;color:#111;font-size:16px}.market-guest-dashboard__empty span{display:block;margin:7px 0 16px}.market-guest-dashboard__empty button{background:#111;color:#fff}