* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--m9-gradient-selected); font-family: var(--m9-font-sans); font-size: 1.0rem; line-height: 1.5; }
button, input { font: inherit; }
button { color: inherit; }
.prototype-ribbon { min-height: 28px; padding: 5px 4vw; display: flex; justify-content: center; gap: 16px; color: var(--m9-on-primary); background: var(--m9-brand-navy); font-size: 0.75rem; letter-spacing: .05em; }
.prototype-ribbon span:first-child { color: var(--aqua); font-weight: 800; letter-spacing: .14em; }
.topbar { position: sticky; top: 0; z-index: 50; height: 74px; padding: 0 3.5vw; display: grid; grid-template-columns: 150px 1fr minmax(390px, auto); align-items: center; gap: 18px; background: var(--m9-surface); border-bottom: 1px solid var(--m9-border); backdrop-filter: blur(20px); }
.brand { display: inline-flex; width: 126px; }
.brand img { display: block; width: 100%; height: auto; }
.main-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; }
.nav-item { position: relative; min-width: 72px; border: 0; background: transparent; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.nav-item::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: var(--m9-radius-xs) var(--m9-radius-xs) 0 0; background: transparent; }
.nav-item:hover, .nav-item.is-active { color: var(--m9-primary); }
.nav-item.is-active::after { background:var(--m9-primary); color:var(--m9-on-primary);}
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.searchbox { width: min(31vw, 390px); height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: var(--m9-disabled-bg); border: 1px solid transparent; border-radius: var(--m9-radius-pill); color: var(--m9-text-muted); }
.searchbox:focus-within { border-color: var(--m9-border); box-shadow: var(--m9-shadow-surface); background: var(--m9-on-primary); }
.searchbox input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 0.8125rem; }
kbd { padding: 2px 7px; border: 1px solid var(--m9-border); border-radius: var(--m9-radius-xs); background: var(--m9-on-primary); font-size: 0.75rem; box-shadow: var(--m9-shadow-surface); }
.coin-pill, .icon-btn, .avatar { border: 0; background: var(--m9-on-primary); box-shadow: var(--m9-shadow-surface); cursor: pointer; }
.pitch-btn, .lang-btn { height: 42px; border: 1px solid var(--line); background: var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-weight: 800; cursor: pointer; }
.pitch-btn { padding: 0 13px; display: flex; align-items: center; gap: 6px; color: var(--m9-primary); font-size: 0.75rem; }
.pitch-btn span { font-size: 1.0rem; }
.lang-btn { width: 42px; padding: 0; font-size: 0.75rem; }
.coin-pill { height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border-radius: var(--m9-radius-pill); font-weight: 800; }
.coin-pill span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--m9-warning); background:var(--m9-primary); border: 2px solid var(--m9-warning-bg); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: var(--m9-radius-pill); }
.cart-btn b { position: absolute; right: -2px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--pink); border: 2px solid var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.avatar { width: 42px; height: 42px; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); font-weight: 800; }
main { width: min(1480px, 94vw); margin: 0 auto; padding: 22px 0 80px; }
.view { display: none; }
.view.is-active { display: block; animation: reveal .45s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.hero-wrap { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 16px; }
.hero-card { position: relative; min-height: 448px; padding: clamp(28px,4vw,58px); display: grid; grid-template-columns: minmax(340px,.9fr) minmax(380px,1.1fr); overflow: hidden; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.hero-card::before { content: ""; position: absolute; inset: 0; background-image: var(--m9-gradient-selected); background-size: 34px 34px; mask-image: linear-gradient(90deg,var(--m9-text),transparent); }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--m9-disabled-text); font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; }
.live-dot { width: 8px; height: 8px; background: var(--pink); border-radius: var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); }
.hero-copy h1 { margin: 18px 0 14px; font: var(--m9-type-page-title); line-height: 1.06; letter-spacing: -.045em; }
.hero-copy h1 span { color: transparent; background: var(--m9-gradient-brand); -webkit-background-clip: text; background-clip: text; }
.hero-copy p { max-width: 610px; margin: 0; color: var(--m9-input-border); font-size: 1.0rem; line-height: 1.8; }
.hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--m9-radius-pill); font-weight: 800; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--m9-brand-navy); background:var(--m9-surface-accent); box-shadow: var(--m9-shadow-surface); }
.btn-ghost { color: var(--m9-on-primary); background: var(--m9-surface); box-shadow: var(--m9-shadow-surface); }
.hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.hero-meta span { padding: 5px 9px; color: var(--m9-border); background: var(--m9-surface); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.hero-visual { position: relative; min-height: 320px; }
.hero-cinematic { position: absolute; left: 0; top: 11%; width: 82%; height: 74%; object-fit: cover; border-radius: var(--m9-radius-3xl); opacity: .68; filter: saturate(.9) contrast(1.06); box-shadow: var(--m9-shadow-surface); }
.hero-visual::after { content: ""; position: absolute; left: 0; top: 11%; width: 82%; height: 74%; border-radius: var(--m9-radius-3xl); background:var(--m9-primary); color:var(--m9-on-primary);}
.phone-preview { position: absolute; z-index: 2; right: 13%; top: -6%; width: min(250px,54%); aspect-ratio: .56; overflow: hidden; background: var(--m9-brand-navy); border: 7px solid var(--m9-surface); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); transform: rotate(5deg); }
.phone-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-orbit { position: absolute; border: 1px solid var(--m9-border); border-radius: var(--m9-radius-pill); }
.orbit-one { width: 360px; height: 360px; right: 0; top: -20px; }
.orbit-two { width: 240px; height: 240px; right: 56px; top: 38px; border-color: var(--m9-border); }
.floating-card { position: absolute; z-index: 4; padding: 12px 14px; display: grid; color: var(--ink); background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); backdrop-filter: blur(12px); }
.floating-card span { color: var(--teal); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.floating-card strong { font-size: 0.875rem; }
.floating-card small { color: var(--m9-text-muted); font-size: 0.75rem; }
.shop-float { left: 1%; bottom: 12%; }
.audience-float { right: -1%; bottom: 8%; grid-template-columns: 10px auto; column-gap: 7px; }
.audience-float .pulse { grid-row: 1 / span 2; align-self: center; width: 8px; height: 8px; background: var(--pink); border-radius: var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); }
.live-panel { padding: 16px; display: flex; flex-direction: column; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.panel-head { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.panel-head > div { display: flex; align-items: center; gap: 8px; }
.panel-head h2 { margin: 0; font-size: 1.0rem; }
.tag { padding: 4px 7px; border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; letter-spacing: .05em; }
.tag-live { color: var(--m9-on-primary); background: var(--pink); }
.tiny-link { padding: 0; border: 0; color: var(--m9-primary); background: transparent; font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.live-stage { position: relative; flex: 1; min-height: 292px; overflow: hidden; background: var(--m9-brand-navy); border-radius: var(--m9-radius-2xl); }
.live-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.live-stage::after { content: ""; position: absolute; inset: 45% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.stage-overlay { position: absolute; z-index: 2; left: 15px; bottom: 14px; display: grid; color: var(--m9-on-primary); }
.stage-overlay span { font-weight: 800; font-size: 1.0rem; }
.stage-overlay b { color: var(--m9-input-border); font-size: 0.75rem; }
.live-chat-preview { margin-top: 12px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; }
.live-chat-preview p { margin: 0; color: var(--m9-text-muted); font-size: 0.75rem; }
.live-chat-preview p strong { display: block; color: var(--ink); }
.live-chat-preview button { padding: 7px 10px; border: 0; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.flywheel { margin: 18px 0 36px; padding: 18px 22px; display: grid; grid-template-columns: 1.2fr repeat(3,1fr 42px) 1fr; align-items: center; gap: 10px; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-2xl); box-shadow: var(--m9-shadow-surface); }
.flywheel-title { display: grid; padding-right: 14px; border-right: 1px solid var(--m9-surface); }
.flywheel-title span { color: var(--aqua); font-size: 0.75rem; font-weight: 800; letter-spacing: .16em; }
.flywheel-title strong { font-size: 0.8125rem; }
.loop-step { display: flex; align-items: center; gap: 9px; }
.loop-step i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--m9-brand-navy); background:var(--m9-surface-accent); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-style: normal; font-weight: 800; }
.loop-step div { display: grid; }
.loop-step b { font-size: 0.8125rem; }
.loop-step small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.loop-line { height: 1px; background:var(--m9-primary); color:var(--m9-on-primary);}
.content-section { margin-top: 34px; }
.section-heading { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin: 3px 0 0; font: var(--m9-type-page-title); letter-spacing: -.02em; }
.section-kicker { color: var(--teal); font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; }
.channel-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.channel-card { position: relative; min-height: 108px; padding: 18px 14px; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; text-align: left; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-2xl); cursor: pointer; transition: .2s ease; }
.channel-card:hover { transform: translateY(-4px); border-color: var(--m9-border); box-shadow: var(--m9-shadow-surface); }
.channel-card div { display: grid; }
.channel-card b { font-size: 0.8125rem; }
.channel-card small { color: var(--m9-text-muted); font-size: 0.75rem; }
.channel-mark { width: 50px; height: 50px; display: grid; place-items: center; color: var(--m9-on-primary); border-radius: var(--m9-radius-xl); font-weight: 800; font-size: 0.75rem; letter-spacing: -.04em; }
.channel-mark.cyan { background:var(--m9-primary); color:var(--m9-on-primary);}
.channel-mark.violet { background:var(--m9-primary); color:var(--m9-on-primary);}
.channel-mark.pink { background:var(--m9-primary); color:var(--m9-on-primary);}
.channel-mark.gold { color: var(--m9-warning); background:var(--m9-primary); }
.channel-mark.navy { background:var(--m9-primary); color:var(--m9-on-primary);}
.on-air { position: absolute; right: 12px; top: 10px; color: var(--pink); font-size: 0.75rem; font-weight: 800; }
.innovation-grid { display: grid; grid-template-columns: 1.35fr .75fr .75fr; gap: 14px; }
.innovation-card { position: relative; min-height: 340px; overflow: hidden; color: var(--m9-on-primary); background: var(--m9-brand-navy); border-radius: var(--m9-radius-3xl); cursor: pointer; box-shadow: var(--m9-shadow-surface); }
.innovation-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 9%; transition: transform .6s ease; }
.innovation-card:hover img { transform: scale(1.04); }
.card-shade { position: absolute; inset: 20% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.innovation-copy { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.innovation-copy span { color: var(--m9-input-border); font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; }
.innovation-copy h3 { margin: 5px 0 5px; font: var(--m9-type-page-title); line-height: 1.16; }
.innovation-copy p { max-width: 480px; margin: 0; color: var(--m9-input-border); font-size: 0.75rem; }
.innovation-copy b { display: inline-block; margin-top: 10px; padding: 5px 8px; color: var(--m9-brand-navy); background: var(--m9-input-border); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.placeholder-view { min-height: 65vh; place-items: center; text-align: center; }
.placeholder-view.is-active { display: grid; }
.placeholder-view span { color: var(--teal); font-weight: 800; }
.product-view { grid-template-columns: 218px minmax(0,1fr); gap: 20px; }
.product-view.is-active { display: grid; }
.side-rail { position: sticky; top: 94px; align-self: start; max-height: calc(100vh - 118px); padding: 14px; overflow-y: auto; background: var(--m9-surface); border: 1px solid var(--line); border-radius: var(--m9-radius-2xl); box-shadow: var(--m9-shadow-surface); }
.side-title { padding: 8px 10px 12px; font-size: 1.0rem; font-weight: 800; }
.side-link { width: 100%; min-height: 42px; padding: 0 10px; display: grid; grid-template-columns: 26px 1fr; align-items: center; border: 0; color: var(--ink-2); background: transparent; border-radius: var(--m9-radius-md); text-align: left; font-size: 0.8125rem; cursor: pointer; }
.side-link span { color: var(--m9-text-muted); text-align: center; }
.side-link:hover, .side-link.is-active { color: var(--m9-primary); background:var(--m9-surface-accent); }
.side-link.is-active span { color: var(--teal); }
.side-divider { height: 1px; margin: 10px 8px; background: var(--line); }
.side-caption { display: block; margin: 13px 10px 8px; color: var(--m9-text-muted); font-size: 0.75rem; font-weight: 800; }
.side-tags { padding: 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.side-tags button { padding: 6px 8px; border: 1px solid var(--line); color: var(--ink-2); background: var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; cursor: pointer; }
.rail-card { margin-top: 14px; padding: 18px; display: grid; color: var(--ink); background: var(--m9-gradient-selected); border-radius: var(--m9-radius-xl); }
.rail-card-dark { color: var(--m9-on-primary); background:var(--m9-primary); }
.rail-card span { color: var(--teal); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.rail-card-dark span { color: var(--m9-disabled-text); }
.rail-card strong { margin: 8px 0 4px; font-size: 0.875rem; }
.rail-card small { color: var(--m9-text-muted); font-size: 0.75rem; }
.rail-card-dark small { color: var(--m9-disabled-text); }
.rail-card button { width: max-content; margin-top: 14px; padding: 7px 10px; border: 0; color: var(--m9-brand-navy); background: var(--m9-disabled-text); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.product-main { min-width: 0; }
.tv-feature { position: relative; min-height: 370px; overflow: hidden; color: var(--m9-on-primary); background: var(--m9-text); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.tv-feature-image, .tv-feature-shade { position: absolute; inset: 0; }
.tv-feature-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.tv-feature-shade { background:var(--m9-primary); color:var(--m9-on-primary);}
.tv-feature-copy { position: absolute; z-index: 2; left: clamp(24px,4vw,56px); top: 50%; max-width: 480px; transform: translateY(-50%); }
.tv-feature-copy h1 { margin: 12px 0 3px; font: var(--m9-type-page-title); line-height: 1.1; letter-spacing: -.05em; }
.tv-feature-copy p { margin: 0 0 15px; color: var(--m9-input-border); }
.detail-line { display: flex; gap: 8px; }
.detail-line span { padding: 4px 8px; color: var(--m9-info-bg); background: var(--m9-surface); border-radius: var(--m9-radius-xs); font-size: 0.75rem; }
.choice-teaser { position: absolute; z-index: 3; right: 20px; bottom: 18px; width: min(310px,42%); padding: 13px 15px; display: grid; background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-lg); backdrop-filter: blur(14px); }
.choice-teaser span { color: var(--m9-disabled-text); font-size: 0.75rem; font-weight: 800; letter-spacing: .09em; }
.choice-teaser strong { font-size: 0.75rem; }
.choice-teaser small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.compact-section { margin-top: 24px; }
.carousel-tools { display: flex; gap: 6px; }
.carousel-tools button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--m9-on-primary); border-radius: var(--m9-radius-pill); cursor: pointer; }
.channel-strip { display: grid; grid-template-columns: repeat(6,minmax(135px,1fr)); gap: 10px; overflow-x: auto; scrollbar-width: none; }
.mini-channel { position: relative; min-width: 135px; padding: 13px; display: grid; grid-template-columns: 44px 1fr; gap: 9px; align-items: center; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-xl); cursor: pointer; }
.mini-channel:hover { border-color: var(--m9-border); }
.mini-channel .channel-mark { width: 42px; height: 42px; border-radius: var(--m9-radius-lg); }
.mini-channel div { display: grid; }
.mini-channel b { font-size: 0.75rem; }
.mini-channel small { color: var(--m9-text-muted); font-size: 0.75rem; }
.mini-channel em { position: absolute; right: 7px; top: 6px; color: var(--pink); font-size: 0.75rem; font-style: normal; font-weight: 800; }
.filter-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.filter-chips button { padding: 7px 12px; border: 1px solid var(--line); color: var(--m9-text-muted); background: var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.filter-chips button.is-active { color: var(--m9-primary); background: var(--m9-success-bg); border-color: var(--m9-border); }
.poster-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.poster-card { padding: 0; border: var(--m9-border-default); text-align: left; position: relative; min-width: 0; overflow: hidden; background: var(--m9-brand-navy); border-radius: var(--m9-radius-xl); cursor: pointer; }
.poster-card .poster-image { aspect-ratio: .76; overflow: hidden; }
.poster-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: transform .45s ease; }
.poster-card:hover img { transform: scale(1.05); }
/* Poster metadata has its own surface; no layer may cover the artwork. */
.poster-info { position: absolute; z-index: 2; left: 12px; right: 10px; bottom: 10px; color: var(--m9-on-primary); }
.poster-info b { display: block; font-size: 0.75rem; line-height: 1.25; }
.poster-info small { color: var(--m9-input-border); font-size: 0.75rem; }
.poster-badge { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 4px 6px; color: var(--m9-text); background: var(--m9-disabled-text); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; }
.poster-quality { position: absolute; z-index: 2; right: 8px; top: 8px; padding: 3px 5px; color: var(--m9-on-primary); background: var(--m9-border); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; }
.shorts-view.is-active { display: grid; grid-template-columns: 210px minmax(380px,1fr) 300px; gap: 20px; min-height: calc(100vh - 135px); }
.shorts-stage-wrap { position: relative; min-width: 0; display: grid; place-items: center; }
.short-phone { position: relative; width: min(430px,100%); aspect-ratio: .72; max-height: calc(100vh - 150px); overflow: hidden; color: var(--m9-on-primary); background: var(--m9-brand-navy); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.short-phone > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.short-shade { position: absolute; inset: 28% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.short-top { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; }
.short-top button { width: 34px; height: 34px; color: var(--m9-on-primary); background: var(--m9-border); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-pill); cursor: pointer; }
.short-copy { position: absolute; z-index: 2; left: 18px; right: 80px; bottom: 78px; }
.creator-line { display: flex; align-items: center; gap: 8px; }
.mini-avatar { width: 31px; height: 31px; display: grid; place-items: center; background:var(--m9-primary); border: 2px solid var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; color:var(--m9-on-primary);}
.creator-line strong { font-size: 0.75rem; }
.creator-line button { padding: 5px 10px; color: var(--m9-on-primary); background: transparent; border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.creator-line button.is-following { color: var(--m9-brand-navy); background: var(--m9-disabled-text); border-color: var(--m9-disabled-text); }
.short-copy p { margin: 10px 0 3px; font-size: 0.8125rem; }
.short-copy small { color: var(--m9-input-border); font-size: 0.75rem; }
.short-actions { position: absolute; z-index: 3; right: 12px; bottom: 80px; display: grid; gap: 11px; }
.short-actions button { display: grid; place-items: center; gap: 1px; color: var(--m9-on-primary); background: transparent; border: 0; cursor: pointer; }
.short-actions span { width: 40px; height: 40px; display: grid; place-items: center; background: var(--m9-border); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-pill); font-size: 1.0rem; backdrop-filter: blur(10px); }
.short-actions b { font-size: 0.75rem; }
.short-actions button.is-liked span { color: var(--m9-on-primary); background: var(--pink); border-color: var(--pink); }
.sound-disc { position: absolute; z-index: 3; right: 17px; bottom: 25px; width: 35px; height: 35px; color: var(--m9-on-primary); background:var(--m9-primary); border: 3px solid var(--m9-surface); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; }
.shop-scene-card { position: absolute; z-index: 3; left: 18px; right: 70px; bottom: 18px; padding: 8px 10px; display: grid; text-align: left; color: var(--ink); background: var(--m9-surface); border: 0; border-radius: var(--m9-radius-md); cursor: pointer; backdrop-filter: blur(14px); }
.shop-scene-card span { color: var(--pink); font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; }
.shop-scene-card b { font-size: 0.75rem; }
.shop-scene-card small { color: var(--m9-text-muted); font-size: 0.75rem; }
.short-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--m9-surface); }
.short-progress span { display: block; width: 64%; height: 100%; background: var(--m9-on-primary); }
.short-switcher { position: absolute; right: max(8px,calc(50% - 250px)); display: grid; gap: 7px; }
.short-switcher button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-size: 1.0rem; cursor: pointer; box-shadow: var(--m9-shadow-surface); }
.trend-panel { align-self: start; padding: 16px; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-2xl); box-shadow: var(--m9-shadow-surface); }
.trend-panel .panel-head { align-items: center; }
.trend-panel .panel-head h2 { font-size: 1.0rem; }
.trend-panel .panel-head span { color: var(--teal); font-size: 0.75rem; font-weight: 800; }
.trend-list { display: grid; }
.trend-item { padding: 10px 0; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--m9-border-soft); }
.trend-item > b { color: var(--teal); font-size: 0.875rem; }
.trend-item div { display: grid; }
.trend-item div b { font-size: 0.75rem; }
.trend-item small { color: var(--m9-text-muted); font-size: 0.75rem; }
.trend-item > span { color: var(--pink); font-size: 0.75rem; font-weight: 800; }
.creator-cta { margin-top: 14px; padding: 18px; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-xl); }
.creator-cta > span { color: var(--m9-disabled-text); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.creator-cta h3 { margin: 7px 0 4px; font-size: 1.25rem; line-height: 1.25; }
.creator-cta p { margin: 0; color: var(--m9-input-border); font-size: 0.75rem; }
.creator-cta button { margin-top: 13px; padding: 8px 11px; color: var(--m9-brand-navy); background: var(--m9-disabled-text); border: 0; border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.price-filter { padding: 8px 10px; display: grid; gap: 8px; }
.price-filter > span { font-size: 0.75rem; font-weight: 800; }
.price-filter input { width: 100%; accent-color: var(--teal); }
.price-filter div { display: flex; justify-content: space-between; color: var(--m9-text-muted); font-size: 0.75rem; }
.shop-hero { position: relative; min-height: 220px; padding: clamp(28px,4vw,50px); display: flex; align-items: center; overflow: hidden; color: var(--m9-on-primary); background: var(--m9-gradient-selected); border-radius: var(--m9-radius-3xl); }
.shop-hero::after { content: "M9"; position: absolute; right: 12%; top: -44px; color: var(--m9-surface); font: var(--m9-type-page-title); font-weight: 800; letter-spacing: -.12em; transform: rotate(-7deg); }
.shop-hero > div:first-child { position: relative; z-index: 2; max-width: 560px; }
.shop-hero span { color: var(--m9-warning-bg); font-size: 0.75rem; font-weight: 800; letter-spacing: .14em; }
.shop-hero h1 { margin: 7px 0 2px; font: var(--m9-type-page-title); line-height: 1.08; letter-spacing: -.045em; }
.shop-hero p { margin: 0; color: var(--m9-danger-bg); }
.shop-cta { margin-top: 18px; color: var(--m9-danger); background: var(--m9-warning-bg); }
.deal-orb { position: absolute; z-index: 2; right: 4%; width: 175px; height: 175px; display: grid; place-items: center; align-content: center; color: var(--m9-danger); background:var(--m9-primary); border: 5px solid var(--m9-surface); border-radius: var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); transform: rotate(6deg); }
.deal-orb span { color: var(--m9-danger); font-size: 0.75rem; letter-spacing: 0; }
.deal-orb strong { font: var(--m9-type-page-title); line-height: 1; }
.deal-orb small { margin-top: 5px; font-size: 0.75rem; }
.benefit-strip { margin: 14px 0 24px; padding: 13px 18px; display: grid; grid-template-columns: repeat(4,1fr); background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-xl); }
.benefit-strip div { display: grid; grid-template-columns: 35px 1fr; align-items: center; column-gap: 8px; }
.benefit-strip div > span { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; color: var(--teal); background: var(--m9-surface-accent); border-radius: var(--m9-radius-pill); font-weight: 800; }
.benefit-strip b { font-size: 0.75rem; }
.benefit-strip small { color: var(--m9-text-muted); font-size: 0.75rem; }
.scene-commerce { display: grid; grid-template-columns: minmax(250px,.75fr) 1.25fr; overflow: hidden; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-2xl); }
.scene-media { position: relative; min-height: 290px; overflow: hidden; background: var(--m9-brand-navy); }
.scene-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.scene-media > span { position: absolute; left: 12px; bottom: 12px; padding: 5px 8px; color: var(--m9-on-primary); background: var(--m9-border); border-radius: var(--m9-radius-xs); font-size: 0.75rem; }
.scene-copy { padding: clamp(22px,3vw,40px); align-self: center; }
.scene-copy > span { color: var(--pink); font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; }
.scene-copy h3 { margin: 5px 0 4px; font: var(--m9-type-page-title); }
.scene-copy > p { max-width: 650px; margin: 0 0 18px; color: var(--m9-text-muted); font-size: 0.75rem; }
.scene-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.scene-product { padding: 10px; display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; background: var(--m9-row-hover); border: 1px solid var(--m9-border-soft); border-radius: var(--m9-radius-md); cursor: pointer; }
.scene-product .product-emoji { width: 42px; height: 42px; font-size: 1.25rem; }
.scene-product div { display: grid; }
.scene-product b { font-size: 0.75rem; }
.scene-product small { color: var(--pink); font-size: 0.75rem; font-weight: 800; }
.product-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.product-card { position: relative; min-width: 0; padding: 10px; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-xl); transition: .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--m9-shadow-surface); }
.product-visual { position: relative; aspect-ratio: 1.08; display: grid; place-items: center; overflow: hidden; background: var(--m9-gradient-selected); border-radius: var(--m9-radius-md); cursor: pointer; }
.product-emoji { width: 70%; height: 70%; display: grid; place-items: center; background: var(--m9-gradient-selected); border-radius: var(--m9-radius-pill); font: var(--m9-type-page-title); filter: drop-shadow(0 15px 12px var(--m9-border)); }
.discount { position: absolute; left: 7px; top: 7px; padding: 4px 6px; color: var(--m9-on-primary); background: var(--pink); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; }
.product-card h3 { min-height: 38px; margin: 9px 0 4px; font-size: 0.75rem; line-height: 1.35; }
.product-price { display: flex; align-items: baseline; gap: 5px; }
.product-price b { color: var(--pink); font-size: 0.875rem; }
.product-price del { color: var(--m9-disabled-text); font-size: 0.75rem; }
.product-bottom { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; }
.product-bottom small { color: var(--m9-text-muted); font-size: 0.75rem; }
.add-cart { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal); background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-sm); cursor: pointer; }
.chat-shell.is-active { min-height: calc(100vh - 135px); display: grid; grid-template-columns: 180px 260px minmax(360px,1fr) 250px; overflow: hidden; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.chat-nav, .conversation-list, .room-context { padding: 14px; border-right: 1px solid var(--line); }
.new-chat { width: 100%; height: 42px; margin-bottom: 10px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-md); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.chat-nav-link { width: 100%; height: 39px; padding: 0 8px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; border: 0; color: var(--ink-2); background: transparent; border-radius: var(--m9-radius-sm); text-align: left; font-size: 0.75rem; cursor: pointer; }
.chat-nav-link.is-active { color: var(--m9-primary); background: var(--m9-surface-accent); }
.chat-nav-link b { min-width: 19px; height: 19px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--pink); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.chat-connect-card { margin-top: 30px; padding: 16px; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-xl); }
.chat-connect-card span { color: var(--m9-disabled-text); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.chat-connect-card h3 { margin: 6px 0 4px; font-size: 0.875rem; }
.chat-connect-card p { margin: 0; color: var(--m9-input-border); font-size: 0.75rem; }
.conversation-search { height: 38px; padding: 0 9px; display: flex; align-items: center; gap: 7px; color: var(--m9-text-muted); background: var(--m9-page); border-radius: var(--m9-radius-sm); }
.conversation-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 0.75rem; }
.conversation-tabs { margin: 10px 0; display: flex; gap: 5px; }
.conversation-tabs button { padding: 5px 8px; border: 0; color: var(--m9-text-muted); background: transparent; border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.conversation-tabs button.is-active { color: var(--m9-primary); background: var(--m9-success-bg); }
.conversation-item { width: 100%; padding: 10px 8px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: var(--m9-radius-md); text-align: left; cursor: pointer; }
.conversation-item:hover, .conversation-item.is-active { background: var(--m9-surface-secondary); }
.conversation-avatar { position: relative; width: 38px; height: 38px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; }
.conversation-avatar::after { content: ""; position: absolute; right: -1px; bottom: 1px; width: 8px; height: 8px; background: var(--m9-primary); border: 2px solid var(--m9-on-primary); border-radius: var(--m9-radius-pill); }
.conversation-item > div:nth-child(2) { min-width: 0; display: grid; }
.conversation-item b { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item small { overflow: hidden; color: var(--m9-text-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { display: grid; justify-items: end; gap: 4px; color: var(--m9-text-muted); font-size: 0.75rem; }
.conversation-meta em { min-width: 17px; height: 17px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--teal); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-style: normal; }
.conversation-room { min-width: 0; display: grid; grid-template-rows: 66px 1fr 62px; }
.room-head { padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.room-avatar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; }
.room-head > div:nth-child(2) { flex: 1; }
.room-head h2 { margin: 0; font-size: 0.8125rem; }
.room-head span { color: var(--m9-text-muted); font-size: 0.75rem; }
.room-head span i { display: inline-block; width: 6px; height: 6px; background: var(--m9-primary); border-radius: var(--m9-radius-pill); }
.room-actions { display: flex; gap: 5px; }
.room-actions button { width: 32px; height: 32px; border: 0; color: var(--m9-text-muted); background: transparent; border-radius: var(--m9-radius-pill); cursor: pointer; }
.room-actions button:hover { background: var(--m9-disabled-bg); }
.message-stream { min-height: 0; padding: 18px; overflow-y: auto; background: var(--m9-gradient-selected); }
.message-group { margin-bottom: 15px; display: grid; grid-template-columns: 30px minmax(0,420px); gap: 8px; }
.message-group.mine { grid-template-columns: minmax(0,420px); justify-content: end; }
.message-group .mini-avatar { width: 30px; height: 30px; border: 0; }
.message-author { color: var(--m9-neutral); font-size: 0.75rem; font-weight: 800; }
.message-bubble { padding: 10px 12px; color: var(--ink-2); background: var(--m9-on-primary); border: 1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-xs) var(--m9-radius-xl) var(--m9-radius-xl) var(--m9-radius-xl); font-size: 0.75rem; box-shadow: var(--m9-shadow-surface); }
.message-group.mine .message-bubble { color: var(--m9-primary); background: var(--m9-success-bg); border-color: var(--m9-input-border); border-radius: var(--m9-radius-xl) var(--m9-radius-xs) var(--m9-radius-xl) var(--m9-radius-xl); }
.message-time { margin-top: 3px; color: var(--m9-disabled-text); font-size: 0.75rem; text-align: right; }
.shared-card { margin-top: 8px; padding: 8px; display: grid; grid-template-columns: 52px 1fr; gap: 8px; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-sm); cursor: pointer; }
.shared-card img { width: 52px; height: 48px; object-fit: cover; object-position: top; border-radius: var(--m9-radius-xs); }
.shared-card div { display: grid; align-content: center; }
.shared-card b { font-size: 0.75rem; }
.shared-card small { color: var(--teal); font-size: 0.75rem; }
.message-composer { padding: 10px 12px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); }
.message-composer > button:not(.send-message) { width: 35px; height: 35px; border: 0; color: var(--m9-text-muted); background: transparent; border-radius: var(--m9-radius-pill); cursor: pointer; }
.message-composer input { min-width: 0; flex: 1; height: 40px; padding: 0 13px; border: 1px solid var(--line); outline: 0; background: var(--m9-surface-soft); border-radius: var(--m9-radius-pill); font-size: 0.75rem; }
.message-composer input:focus { border-color: var(--m9-border); background: var(--m9-on-primary); }
.send-message { height: 38px; padding: 0 15px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.room-context { border-right: 0; border-left: 1px solid var(--line); }
.context-hero { padding: 16px 0; display: grid; justify-items: center; text-align: center; }
.room-avatar.large { width: 62px; height: 62px; }
.context-hero h3 { margin: 9px 0 1px; font-size: 0.8125rem; }
.context-hero small { color: var(--m9-text-muted); font-size: 0.75rem; }
.context-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.context-actions button { min-height: 34px; border: 0; color: var(--m9-primary); background: var(--m9-surface-accent); border-radius: var(--m9-radius-sm); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.shared-context, .context-stat { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.shared-context > span, .context-stat > span { display: block; margin-bottom: 8px; color: var(--m9-text-muted); font-size: 0.75rem; font-weight: 800; }
.shared-context button { width: 100%; padding: 7px; display: grid; grid-template-columns: 60px 1fr; gap: 7px; border: 1px solid var(--line); background: var(--m9-on-primary); border-radius: var(--m9-radius-md); text-align: left; cursor: pointer; }
.shared-context img { width: 60px; height: 50px; object-fit: cover; object-position: top; border-radius: var(--m9-radius-xs); }
.shared-context button div { display: grid; align-content: center; }
.shared-context b { font-size: 0.75rem; }
.shared-context small { color: var(--m9-text-muted); font-size: 0.75rem; }
.context-stat { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.context-stat > span { grid-column: 1 / -1; }
.context-stat div { display: grid; text-align: center; }
.context-stat b { font-size: 0.75rem; }
.context-stat small { color: var(--m9-text-muted); font-size: 0.75rem; }
.wallet-view.is-active { display: grid; grid-template-columns: 218px minmax(0,1fr); gap: 20px; }
.wallet-hero { position: relative; min-height: 250px; padding: clamp(28px,4vw,50px); display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; overflow: hidden; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); }
.wallet-balance { position: relative; z-index: 2; display: grid; }
.wallet-balance > span { font-size: 0.8125rem; font-weight: 800; }
.wallet-balance > span button { color: var(--m9-on-primary); background: transparent; border: 0; cursor: pointer; }
.wallet-balance > strong { margin: 4px 0; font: var(--m9-type-page-title); line-height: 1; letter-spacing: -.04em; }
.wallet-balance > small { color: var(--m9-success-bg); font-size: 0.75rem; }
.coin-balance { position: absolute; z-index: 3; left: 50%; bottom: 28px; padding-left: 24px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--m9-surface); }
.coin-large { width: 48px; height: 48px; display: grid; place-items: center; color: var(--m9-warning); background:var(--m9-primary); border: 4px solid var(--m9-warning-bg); border-radius: var(--m9-radius-pill); font-weight: 800; box-shadow: var(--m9-shadow-surface); }
.coin-balance div { display: grid; }
.coin-balance small { font-size: 0.75rem; }
.coin-balance strong { font-size: 1.25rem; }
.coin-balance div span { color: var(--m9-success-bg); font-size: 0.75rem; }
.wallet-orbit { position: absolute; right: 5%; width: 190px; height: 190px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border: 8px solid var(--m9-surface); border-radius: var(--m9-radius-pill) var(--m9-radius-pill) var(--m9-radius-pill) var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); transform: rotate(-5deg); }
.wallet-orbit::before { content: ""; position: absolute; width: 80%; height: 24%; top: 12%; background: var(--m9-border); border-radius: var(--m9-radius-xl); }
.wallet-orbit > span { font: var(--m9-type-page-title); font-weight: 800; transform: rotate(5deg); }
.wallet-orbit i { position: absolute; border: 1px solid var(--m9-border); border-radius: var(--m9-radius-pill); }
.wallet-orbit i:first-child { width: 290px; height: 290px; }
.wallet-orbit i:nth-child(2) { width: 350px; height: 350px; }
.quick-actions { margin: 16px 0 24px; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.quick-actions button { min-height: 100px; padding: 12px 8px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); background: var(--m9-on-primary); border-radius: var(--m9-radius-xl); cursor: pointer; transition: .2s ease; }
.quick-actions button:hover { transform: translateY(-3px); border-color: var(--m9-border); box-shadow: var(--m9-shadow-surface); }
.quick-actions span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--teal); background: var(--m9-surface-accent); border-radius: var(--m9-radius-lg); font-size: 1.0rem; }
.quick-actions b { margin-top: 4px; font-size: 0.75rem; }
.quick-actions small { color: var(--m9-text-muted); font-size: 0.75rem; }
.wallet-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 16px; }
.wallet-services, .transaction-panel { min-width: 0; }
.service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.service-grid button { min-height: 130px; padding: 14px; display: grid; align-content: start; text-align: left; background:var(--m9-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-xl); cursor: pointer; color:var(--m9-on-primary);}
.service-grid span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-lg); font-size: 1.0rem; }
.service-grid b { margin-top: 9px; font-size: 0.75rem; }
.service-grid small { color: var(--m9-text-muted); font-size: 0.75rem; }
.wallet-banner { margin-top: 12px; min-height: 155px; padding: 24px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-2xl); }
.wallet-banner span { color: var(--m9-disabled-text); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.wallet-banner h3 { margin: 5px 0 10px; font-size: 1.25rem; line-height: 1.25; }
.wallet-banner button { padding: 7px 11px; color: var(--m9-brand-navy); background: var(--m9-disabled-text); border: 0; border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.wallet-badge { position: relative; width: 90px; height: 90px; display: grid; place-items: center; color: var(--m9-warning); background:var(--m9-primary); border: 7px solid var(--m9-surface); border-radius: var(--m9-radius-pill); font: var(--m9-type-page-title); font-weight: 800; box-shadow: var(--m9-shadow-surface); }
.wallet-badge span { position: absolute; right: -9px; top: 4px; padding: 4px 6px; color: var(--m9-on-primary); background: var(--pink); border-radius: var(--m9-radius-pill); letter-spacing: 0; }
.transaction-panel { padding: 15px; background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-2xl); }
.transaction-panel .panel-head { margin-bottom: 8px; }
.transaction-panel .panel-head h2 { font-size: 0.875rem; }
.transaction-filter { display: flex; gap: 5px; margin-bottom: 6px; }
.transaction-filter button { padding: 5px 8px; color: var(--m9-text-muted); background: transparent; border: 0; border-radius: var(--m9-radius-pill); font-size: 0.75rem; cursor: pointer; }
.transaction-filter button.is-active { color: var(--m9-primary); background: var(--m9-success-bg); }
.transaction-item { padding: 10px 0; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--m9-border-soft); }
.transaction-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--m9-primary); background: var(--m9-surface-accent); border-radius: var(--m9-radius-md); }
.transaction-item > div:nth-child(2) { display: grid; }
.transaction-item b { font-size: 0.75rem; }
.transaction-item small { color: var(--m9-text-muted); font-size: 0.75rem; }
.transaction-amount { font-size: 0.75rem; font-weight: 800; }
.transaction-amount.positive { color: var(--m9-primary); }
.transaction-amount.negative { color: var(--pink); }
.pitch-drawer, .modal-layer { position: fixed; z-index: 300; inset: 0; visibility: hidden; opacity: 0; transition: opacity .25s ease,visibility .25s; }
.pitch-drawer.is-open, .modal-layer.is-open { visibility: visible; opacity: 1; }
.drawer-scrim, .modal-scrim { position: absolute; inset: 0; background: var(--m9-border); backdrop-filter: blur(5px); }
.drawer-panel { position: absolute; top: 0; right: 0; width: min(680px,94vw); height: 100%; padding: 28px; overflow-y: auto; color: var(--m9-on-primary); background:var(--m9-primary); box-shadow: var(--m9-shadow-surface); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pitch-drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-panel header { display: flex; align-items: flex-start; justify-content: space-between; }
.drawer-panel header span { color: var(--aqua); font-size: 0.75rem; font-weight: 800; letter-spacing: .15em; }
.drawer-panel header h2 { margin: 4px 0 0; font: var(--m9-type-page-title); }
.drawer-panel header button, .modal-close { width: 40px; height: 40px; color: var(--m9-on-primary); background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-pill); font-size: 1.5625rem; cursor: pointer; }
.drawer-intro { max-width: 570px; color: var(--m9-input-border); font-size: 0.8125rem; line-height: 1.75; }
.engine-map { position: relative; min-height: 315px; margin: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.engine-map::before, .engine-map::after { content: ""; position: absolute; left: 50%; top: 50%; background:var(--m9-primary); transform: translate(-50%,-50%); color:var(--m9-on-primary);}
.engine-map::before { width: 58%; height: 1px; }
.engine-map::after { width: 1px; height: 58%; }
.engine-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 126px; height: 126px; display: grid; place-items: center; align-content: center; gap: 5px; background:var(--m9-primary); border: 7px solid var(--m9-brand-navy); border-radius: var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); transform: translate(-50%,-50%); color:var(--m9-on-primary);}
.engine-core img { width: 86px; }
.engine-core span { color: var(--m9-input-border); font-size: 0.75rem; }
.engine-map > button { position: relative; z-index: 2; padding: 18px; display: grid; place-items: center; align-content: center; color: var(--m9-on-primary); background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-xl); cursor: pointer; }
.engine-map > button b { color: var(--m9-input-border); font-size: 0.75rem; letter-spacing: .1em; }
.engine-map > button small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.engine-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.engine-pillars article { padding: 15px; background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-lg); }
.engine-pillars span { display: inline-block; margin-bottom: 7px; color: var(--aqua); font-size: 0.75rem; font-weight: 800; }
.engine-pillars b { display: block; font-size: 0.75rem; }
.engine-pillars p { margin: 3px 0 0; color: var(--m9-disabled-text); font-size: 0.75rem; }
.revenue-row { margin-top: 18px; display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.revenue-row div { padding: 10px 7px; display: grid; text-align: center; background: var(--m9-surface); border-radius: var(--m9-radius-sm); }
.revenue-row b { color: var(--m9-warning-bg); font-size: 0.75rem; }
.revenue-row small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.drawer-panel footer { margin-top: 20px; padding: 14px; color: var(--m9-disabled-text); background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-md); }
.drawer-panel footer span { color: var(--m9-pink); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.drawer-panel footer p { margin: 3px 0 0; font-size: 0.75rem; }
.modal-layer { display: grid; place-items: center; padding: 20px; }
.modal-card { position: relative; width: min(880px,96vw); max-height: min(720px,92vh); overflow-y: auto; color: var(--ink); background: var(--m9-on-primary); border-radius: var(--m9-radius-3xl); box-shadow: var(--m9-shadow-surface); transform: translateY(18px) scale(.98); transition: transform .25s ease; }
.modal-layer.is-open .modal-card { transform: translateY(0) scale(1); }
.modal-close { position: absolute; z-index: 5; right: 14px; top: 14px; color: var(--ink); background: var(--m9-surface); border-color: var(--line); }
.player-modal { display: grid; grid-template-columns: 1.4fr .6fr; background: var(--m9-text); color: var(--m9-on-primary); }
.player-area { position: relative; min-height: 500px; overflow: hidden; }
.player-area > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .8; }
.player-area::after { content: ""; position: absolute; inset: 45% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.play-circle { position: absolute; z-index: 2; left: 50%; top: 43%; width: 66px; height: 66px; display: grid; place-items: center; color: var(--m9-brand-navy); background: var(--m9-border); border-radius: var(--m9-radius-pill); font-size: 1.5625rem; transform: translate(-50%,-50%); }
.player-caption { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; }
.player-caption span { color: var(--aqua); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.player-caption h2 { margin: 5px 0 4px; font-size: 1.5625rem; }
.player-caption p { margin: 0; color: var(--m9-input-border); font-size: 0.75rem; }
.player-side { padding: 70px 18px 20px; }
.player-side h3 { margin: 0 0 12px; font-size: 0.875rem; }
.player-side .choice-option { width: 100%; margin-bottom: 8px; padding: 12px; display: grid; text-align: left; color: var(--m9-on-primary); background: var(--m9-surface); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-md); cursor: pointer; }
.choice-option b { font-size: 0.75rem; }
.choice-option small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.choice-option.is-selected { background: var(--m9-border); border-color: var(--m9-border); }
.vote-results { margin-top: 12px; padding: 12px; background: var(--m9-surface); border-radius: var(--m9-radius-md); }
.vote-bar { margin-top: 7px; }
.vote-bar div { display: flex; justify-content: space-between; color: var(--m9-input-border); font-size: 0.75rem; }
.vote-bar i { display: block; height: 6px; margin-top: 4px; background: var(--m9-brand-navy); border-radius: var(--m9-radius-pill); overflow: hidden; }
.vote-bar i span { display: block; height: 100%; background:var(--m9-primary); color:var(--m9-on-primary);}
.product-modal { padding: 28px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; }
.product-modal-visual { min-height: 380px; display: grid; place-items: center; background:var(--m9-primary); border-radius: var(--m9-radius-2xl); color:var(--m9-on-primary);}
.product-modal-visual .product-emoji { width: 70%; height: 70%; font: var(--m9-type-page-title); }
.product-modal-copy { padding: 30px 20px 20px 0; }
.product-modal-copy > span { color: var(--teal); font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; }
.product-modal-copy h2 { margin: 6px 0; font: var(--m9-type-page-title); line-height: 1.2; }
.product-modal-copy .rating { color: var(--m9-warning); font-size: 0.75rem; }
.product-modal-copy .modal-price { margin: 14px 0; display: flex; align-items: baseline; gap: 8px; }
.modal-price b { color: var(--pink); font: var(--m9-type-page-title); }
.modal-price del { color: var(--m9-disabled-text); }
.product-modal-copy p { color: var(--m9-text-muted); font-size: 0.75rem; }
.variant-row { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 7px; }
.variant-row button { padding: 8px 11px; color: var(--ink-2); background: var(--m9-on-primary); border: 1px solid var(--line); border-radius: var(--m9-radius-sm); font-size: 0.75rem; cursor: pointer; }
.variant-row button.is-active { color: var(--m9-primary); background: var(--m9-success-bg); border-color: var(--m9-border); }
.modal-actions { display: flex; gap: 8px; }
.modal-actions button { flex: 1; min-height: 44px; border: 0; border-radius: var(--m9-radius-pill); font-weight: 800; cursor: pointer; }
.modal-actions button:first-child { color: var(--m9-primary); background: var(--m9-success-bg); }
.modal-actions button:last-child { color: var(--m9-on-primary); background:var(--m9-primary); }
.wallet-modal { padding: 36px; text-align: center; }
.wallet-modal > span { width: 66px; height: 66px; margin: 0 auto 12px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-2xl); font: var(--m9-type-page-title); }
.wallet-modal h2 { margin: 0; }
.wallet-modal p { margin: 5px auto 18px; max-width: 480px; color: var(--m9-text-muted); font-size: 0.75rem; }
.amount-input { max-width: 360px; margin: 0 auto; padding: 12px; display: flex; align-items: baseline; justify-content: center; gap: 7px; background: var(--m9-page); border: 1px solid var(--line); border-radius: var(--m9-radius-lg); }
.amount-input span { color: var(--m9-text-muted); }
.amount-input input { width: 170px; border: 0; outline: 0; background: transparent; font: var(--m9-type-page-title); font-weight: 800; text-align: center; }
.wallet-modal .mock-warning { margin: 12px auto; padding: 9px; color: var(--m9-warning); background: var(--m9-warning-bg); border-radius: var(--m9-radius-sm); font-size: 0.75rem; }
.wallet-modal > button { min-width: 200px; height: 44px; color: var(--m9-on-primary); background: var(--m9-primary); border: 0; border-radius: var(--m9-radius-pill); font-weight: 800; cursor: pointer; }
.fan-modal { color: var(--m9-on-primary); background:var(--m9-primary); }
.fan-cover { min-height: 220px; padding: 38px; display: flex; align-items: end; background:var(--m9-primary); color:var(--m9-on-primary);}
.fan-cover span { color: var(--aqua); font-size: 0.75rem; font-weight: 800; letter-spacing: .12em; }
.fan-cover h2 { margin: 5px 0 0; font: var(--m9-type-page-title); }
.fan-booking { padding: 25px; }
.fan-booking > p { color: var(--m9-input-border); font-size: 0.75rem; }
.seat-map { margin: 18px 0; padding: 20px; display: grid; grid-template-columns: repeat(10,1fr); gap: 7px; background: var(--m9-surface); border-radius: var(--m9-radius-xl); }
.stage-label { grid-column: 2 / 10; margin-bottom: 10px; padding: 7px; color: var(--m9-brand-navy); background:var(--m9-surface-accent); border-radius: var(--m9-radius-pill) var(--m9-radius-pill) var(--m9-radius-sm) var(--m9-radius-sm); text-align: center; font-size: 0.75rem; font-weight: 800; }
.seat { aspect-ratio: 1; border: 0; background: var(--m9-text-secondary); border-radius: var(--m9-radius-xs) var(--m9-radius-xs) var(--m9-radius-sm) var(--m9-radius-sm); cursor: pointer; }
.seat:hover, .seat.is-selected { background: var(--aqua); }
.seat.is-taken { background: var(--m9-brand-navy); opacity: .5; cursor: not-allowed; }
.fan-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fan-summary div { display: grid; }
.fan-summary small { color: var(--m9-disabled-text); font-size: 0.75rem; }
.fan-summary b { color: var(--m9-on-primary); }
.fan-summary button { padding: 10px 16px; color: var(--m9-brand-navy); background: var(--aqua); border: 0; border-radius: var(--m9-radius-pill); font-weight: 800; cursor: pointer; }
.mobile-nav { display: none; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; padding: 12px 18px; color: var(--m9-on-primary); background: var(--m9-brand-navy); border: 1px solid var(--m9-surface); border-radius: var(--m9-radius-pill); box-shadow: var(--m9-shadow-surface); opacity: 0; pointer-events: none; transform: translate(-50%,18px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 1120px) {
.topbar { grid-template-columns: 120px 1fr auto; }
.pitch-btn { width: 42px; padding: 0; justify-content: center; font-size: 0; }
.pitch-btn span { font-size: 1.0rem; }
.lang-btn { display: none; }
.searchbox { width: 42px; justify-content: center; }
.searchbox input, .searchbox kbd { display: none; }
.hero-wrap { grid-template-columns: 1fr; }
.live-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.live-panel .panel-head, .live-panel .live-chat-preview { grid-column: 1; }
.live-stage { grid-column: 2; grid-row: 1 / span 2; min-height: 190px; }
.flywheel { grid-template-columns: 1fr repeat(4,1fr); }
.flywheel-title { border-right: 0; }
.loop-line { display: none; }
.channel-grid { grid-template-columns: repeat(3,1fr); }
.poster-grid { grid-template-columns: repeat(4,1fr); }
.product-grid { grid-template-columns: repeat(4,1fr); }
.shorts-view.is-active { grid-template-columns: 180px minmax(350px,1fr) 260px; }
.chat-shell.is-active { grid-template-columns: 165px 235px minmax(340px,1fr); }
.room-context { display: none; }
.wallet-grid { grid-template-columns: 1fr 300px; }
.service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
.product-view.is-active, .wallet-view.is-active { grid-template-columns: 1fr; }
.product-view > .side-rail, .wallet-view > .side-rail { display: none; }
.shorts-view.is-active { grid-template-columns: minmax(350px,1fr) 260px; }
.shorts-view > .side-rail { display: none; }
.chat-shell.is-active { grid-template-columns: 220px minmax(340px,1fr); }
.chat-nav { display: none; }
.benefit-strip { grid-template-columns: repeat(2,1fr); row-gap: 12px; }
.quick-actions { grid-template-columns: repeat(3,1fr); }
.wallet-grid { grid-template-columns: 1fr; }
.transaction-panel { order: -1; }
}
@media (max-width: 820px) {
body { padding-bottom: 74px; }
.prototype-ribbon { justify-content: space-between; font-size: 0.75rem; }
.topbar { height: 64px; padding: 0 16px; grid-template-columns: 108px 1fr auto; }
.main-nav { display: none; }
.top-actions { grid-column: 3; }
.coin-pill { height: 36px; padding: 0 8px; font-size: 0.75rem; }
.pitch-btn, .lang-btn { display: none; }
.icon-btn, .avatar { width: 36px; height: 36px; }
.searchbox { grid-column: 2; width: 36px; height: 36px; margin-left: auto; }
.cart-btn, .avatar { display: none; }
main { width: 100%; padding: 12px 12px 34px; }
.hero-card { min-height: 610px; padding: 28px 22px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: var(--m9-radius-3xl); }
.hero-copy h1 { font: var(--m9-type-page-title); }
.hero-copy p { font-size: 0.875rem; }
.hero-visual { min-height: 270px; }
.phone-preview { width: 42%; right: 11%; top: 4%; border-width: 5px; border-radius: var(--m9-radius-3xl); }
.orbit-one { width: 290px; height: 290px; }
.shop-float { left: 0; bottom: 4%; }
.audience-float { right: 0; bottom: 18%; }
.live-panel { display: flex; border-radius: var(--m9-radius-3xl); }
.live-stage { min-height: 280px; }
.flywheel { padding: 17px; grid-template-columns: repeat(2,1fr); }
.flywheel-title { grid-column: 1 / -1; padding-bottom: 10px; }
.channel-grid { grid-template-columns: repeat(2,1fr); }
.channel-card:nth-child(5) { display: none; }
.innovation-grid { grid-template-columns: 1fr; }
.innovation-card { min-height: 310px; }
.tv-feature { min-height: 520px; }
.tv-feature-shade { background:var(--m9-primary); color:var(--m9-on-primary);}
.tv-feature-copy { left: 22px; right: 22px; top: auto; bottom: 26px; transform: none; }
.choice-teaser { display: none; }
.poster-grid { grid-template-columns: repeat(2,1fr); }
.shorts-view.is-active { display: grid; grid-template-columns: 1fr; }
.trend-panel { display: none; }
.short-phone { width: min(430px,92vw); max-height: none; }
.short-switcher { right: 4px; }
.shop-hero { min-height: 320px; align-items: start; }
.deal-orb { width: 130px; height: 130px; right: 5%; bottom: 16px; top: auto; }
.deal-orb strong { font: var(--m9-type-page-title); }
.benefit-strip { grid-template-columns: 1fr 1fr; }
.scene-commerce { grid-template-columns: 1fr; }
.scene-media { min-height: 240px; }
.scene-products { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: repeat(2,1fr); }
.chat-shell.is-active { min-height: calc(100vh - 170px); grid-template-columns: 112px minmax(0,1fr); border-radius: var(--m9-radius-xl); }
.conversation-list { padding: 8px; }
.conversation-search, .conversation-tabs { display: none; }
.conversation-item { padding: 8px 4px; grid-template-columns: 34px 1fr; }
.conversation-avatar { width: 34px; height: 34px; }
.conversation-item > div:nth-child(2) small, .conversation-meta { display: none; }
.conversation-item b { font-size: 0.75rem; }
.room-head { padding: 0 9px; }
.room-head h2 { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-actions button:nth-child(-n+2) { display: none; }
.message-stream { padding: 12px 9px; }
.message-group { grid-template-columns: 25px minmax(0,1fr); }
.message-group.mine { grid-template-columns: minmax(0,90%); }
.message-composer { padding: 8px; }
.message-composer > button:not(.send-message) { display: none; }
.send-message { padding: 0 11px; }
.wallet-hero { min-height: 390px; padding: 28px 22px; grid-template-columns: 1fr; align-items: start; }
.wallet-balance > strong { font: var(--m9-type-page-title); }
.coin-balance { left: 22px; bottom: 22px; }
.wallet-orbit { right: 8%; bottom: 24px; width: 130px; height: 130px; }
.quick-actions { grid-template-columns: repeat(3,1fr); }
.service-grid { grid-template-columns: repeat(2,1fr); }
.player-modal { grid-template-columns: 1fr; }
.player-area { min-height: 360px; }
.player-side { padding: 22px; }
.product-modal { padding: 18px; grid-template-columns: 1fr; gap: 5px; }
.product-modal-visual { min-height: 240px; }
.product-modal-visual .product-emoji { font: var(--m9-type-page-title); }
.product-modal-copy { padding: 16px 4px 6px; }
.product-modal-copy h2 { font-size: 1.5625rem; }
.drawer-panel { padding: 22px 18px; }
.engine-map { min-height: 280px; }
.engine-core { width: 110px; height: 110px; }
.engine-pillars { grid-template-columns: 1fr; }
.revenue-row { grid-template-columns: repeat(2,1fr); }
.seat-map { gap: 4px; padding: 12px; }
.fan-cover { min-height: 180px; padding: 24px; }
.fan-cover h2 { font-size: 1.5625rem; }
.mobile-nav { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; height: 70px; padding: 6px 5px max(6px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6,1fr); background: var(--m9-surface); border-top: 1px solid var(--line); box-shadow: var(--m9-shadow-surface); backdrop-filter: blur(18px); }
.mobile-nav button { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; color: var(--m9-text-muted); background: transparent; font-size: 0.75rem; font-weight: 800; }
.mobile-nav span { font-size: 1.0rem; }
.mobile-nav button.is-active { color: var(--teal); }
.mobile-nav button.is-active::before { content: ""; position: absolute; top: -6px; width: 28px; height: 3px; background: var(--aqua); border-radius: 0 0 var(--m9-radius-xs) var(--m9-radius-xs); }
}
@media (max-width: 560px) {
.prototype-ribbon span:last-child { display: none; }
.hero-actions .btn { width: 100%; }
.hero-card { min-height: 650px; }
.hero-meta { display: none; }
.channel-grid { grid-template-columns: 1fr; }
.channel-card:nth-child(n+4) { display: none; }
.flywheel { grid-template-columns: 1fr; }
.section-heading { align-items: center; }
.section-heading h2 { font-size: 1.25rem; }
.filter-chips { display: none; }
.poster-grid, .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.poster-info { left: 8px; right: 6px; bottom: 7px; }
.poster-info b { font-size: 0.75rem; }
.product-card { padding: 8px; }
.product-card h3 { font-size: 0.75rem; }
.product-price b { font-size: 0.75rem; }
.benefit-strip { padding: 12px; }
.benefit-strip b { font-size: 0.75rem; }
.quick-actions { gap: 7px; }
.quick-actions button { min-height: 88px; }
.service-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
.wallet-banner { padding: 18px; }
.wallet-badge { width: 68px; height: 68px; font-size: 1.5625rem; }
.conversation-list { width: 96px; }
.chat-shell.is-active { grid-template-columns: 96px minmax(0,1fr); }
.conversation-item { grid-template-columns: 32px 1fr; }
.conversation-item b { white-space: normal; line-height: 1.1; }
.modal-layer { padding: 8px; }
.modal-card { border-radius: var(--m9-radius-2xl); }
.wallet-modal { padding: 30px 18px; }
.amount-input input { width: 135px; }
.mobile-nav button { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Reference-faithful desktop system — web1.png through web6.png */
body { background: var(--m9-on-primary); color: var(--ink); font-size: 0.875rem; }
.topbar { position: sticky; top: 0; z-index: 100; height: 74px; padding: 0 2.35vw; grid-template-columns: 188px minmax(430px,1fr) auto; gap: 10px; background: var(--m9-surface); border-bottom: 1px solid var(--m9-chart-grid); box-shadow: var(--m9-shadow-surface); }
.brand { width: 145px; }
.main-nav { gap: 13px; }
.nav-item { min-width: 68px; font-size: 0.875rem; font-weight: 700; }
.nav-item::after { left: 18%; right: 18%; height: 2px; background: transparent; }
.nav-item:hover, .nav-item.is-active { color: var(--m9-primary); }
.nav-item.is-active::after { background: var(--m9-primary); }
.top-actions { gap: 12px; }
.searchbox { width: min(25vw,365px); height: 44px; padding: 0 17px; border: 0; background: var(--m9-disabled-bg); color: var(--m9-text-muted); }
.searchbox > span { font-size: 1.5625rem; line-height: 1; transform: rotate(-18deg); }
.searchbox input { font-size: 0.8125rem; }
.coin-pill { height: 44px; min-width: 92px; justify-content: center; box-shadow: var(--m9-shadow-surface); }
.icon-btn { width: 42px; height: 42px; box-shadow: var(--m9-shadow-surface); font-size: 1.25rem; }
.notification-btn { position: relative; font-size: 0; }
.notification-btn::before { content: ''; position: absolute; left: 13px; top: 10px; width: 14px; height: 17px; border: 2px solid var(--m9-brand-navy); border-radius: var(--m9-radius-sm) var(--m9-radius-sm) var(--m9-radius-xs) var(--m9-radius-xs); }
.notification-btn::after { content: ''; position: absolute; left: 18px; top: 29px; width: 6px; height: 3px; background: var(--m9-brand-navy); border-radius: 0 0 var(--m9-radius-xs) var(--m9-radius-xs); }
.notification-btn b { position: absolute; right: -1px; top: -2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--pink); border: 2px solid var(--m9-on-primary); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; }
.avatar { position: relative; width: 44px; height: 44px; color: transparent; background: url('assets/reference-web6.png') 95.91% 2.04% / 3413.33% 2275.56% no-repeat; box-shadow: var(--m9-shadow-surface); font-size: 0; }
.avatar span { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--m9-primary); border: 2px solid white; border-radius: var(--m9-radius-pill); }
.pitch-btn, .concept-badge { display: none !important; }
main { width: min(1460px,94.8vw); margin: 0 auto; padding: 12px 0 52px; }
.view.is-active { animation: refReveal .25s ease both; }
@keyframes refReveal { from { opacity: 0; } }
.content-section { margin-top: 22px; }
.section-heading { min-height: 28px; margin-bottom: 11px; align-items: center; }
.section-heading h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.015em; }
.section-heading h2 span { color: var(--m9-primary); }
.tiny-link, .home-section-head > button, .shorts-page-head > button { color: var(--m9-brand-navy); font-weight: 500; font-size: 0.8125rem; }
.filter-chips button { padding: 6px 18px; color: var(--m9-brand-navy); border-color: var(--m9-border); font-size: 0.75rem; }
.filter-chips button.is-active { color: var(--m9-on-primary); background:var(--m9-primary); border-color: transparent; box-shadow: var(--m9-shadow-surface); }
/* Home */
.reference-home { padding: 2px 4px 0; }
.home-sale-banner { position: relative; height: 229px; overflow: hidden; background: url('assets/reference-web1.png') center -89px / 1536px 1024px no-repeat; border-radius: var(--m9-radius-xl); cursor: pointer; }
.home-sale-banner > * { opacity: 0; }
.banner-dots { height: 21px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.banner-dots i { width: 11px; height: 8px; background: var(--m9-input-border); border-radius: var(--m9-radius-3xl); }
.banner-dots i.is-active { width: 15px; background: var(--m9-primary); }
.home-section { margin-top: 1px; }
.home-section + .home-section { margin-top: 17px; }
.home-section-head { min-height: 29px; margin: 0 8px 7px; display: flex; align-items: center; justify-content: space-between; }
.home-section-head h2 { margin: 0; font-size: 1.25rem; }
.home-section-head h2 span { color: var(--m9-primary); margin-right: 7px; }
.home-section-head > button { border: 0; background: transparent; cursor: pointer; }
.split-head { display: grid; grid-template-columns: 200px 1fr auto; }
.split-head .filter-chips { justify-content: start; }
.home-channel-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.home-channel-card { position: relative; min-height: 164px; padding: 14px 10px 9px; display: grid; justify-items: center; align-content: start; background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-lg); box-shadow: var(--m9-shadow-surface); }
.home-channel-card > em { position: absolute; left: 10px; top: 9px; padding: 3px 7px; color: var(--m9-on-primary); background: var(--m9-danger); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-style: normal; font-weight: 800; }
.station-logo { width: 59px; height: 59px; display: grid; place-items: center; color: var(--m9-on-primary); border: 4px solid var(--m9-on-primary); border-radius: var(--m9-radius-pill); font: var(--m9-type-page-title); font-weight: 800; box-shadow: var(--m9-shadow-surface); }
.station-3 { background:var(--m9-primary); color:var(--m9-on-primary);}
.station-7 { background:var(--m9-primary); color:var(--m9-on-primary);}
.station-8 { color:var(--m9-on-primary); background:var(--m9-primary); box-shadow: var(--m9-shadow-surface); border: 0; }
.station-gmm, .station-one { width: 91px; height: 40px; margin-top: 9px; border: 0; border-radius: var(--m9-radius-xs); box-shadow: var(--m9-shadow-surface); font-size: 1.0rem; background:var(--m9-primary); color:var(--m9-on-primary);}
.station-one { background: var(--m9-text); }
.home-channel-card > b { margin-top: 4px; font-size: 0.8125rem; }
.home-channel-card > small { color: var(--m9-text-muted); font-size: 0.75rem; line-height: 1.45; }
.home-channel-card > button { width: 112px; height: 27px; margin-top: 4px; color: var(--m9-primary); background: var(--m9-on-primary); border: 1px solid var(--m9-disabled-text); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; cursor: pointer; }
.home-channel-card > button.is-following { color: var(--m9-on-primary); background: var(--m9-primary); }
.home-show-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.home-show-card { position: relative; min-width: 0; height: 194px; overflow: hidden; color:var(--m9-on-primary); background: var(--m9-text); border-radius: var(--m9-radius-sm); cursor: pointer; }
.home-show-card::after { content: ''; position: absolute; inset: 35% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.home-show-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.home-show-card > span { position: absolute; z-index: 2; left: 7px; top: 7px; padding: 3px 6px; color: var(--m9-text); background: var(--m9-warning-bg); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; }
.home-show-card > span.hot { color: var(--m9-on-primary); background: var(--m9-danger); }
.home-show-card > span.new { color: var(--m9-on-primary); background: var(--m9-primary); }
.home-show-card > i { position: absolute; z-index: 2; right: 6px; top: 6px; padding: 1px 4px; background: var(--m9-text); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-style: normal; }
.home-show-card > div { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 7px; display: grid; justify-items: center; text-align: center; }
.home-show-card > div b { font-size: 0.875rem; line-height: 1.15; }
.home-show-card > div small { margin: 1px 0 6px; font-size: 0.75rem; }
.home-show-card > div button { width: 100%; height: 26px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-3xl); font-size: 0.75rem; font-weight: 800; }
.home-show-card { background-image: url('assets/reference-web1.png'); background-size: 662.1% 527.8%; background-repeat: no-repeat; }
.home-show-card > * { opacity: 0; }
.home-show-card:nth-child(1) { background-position: 3.83% 70.24%; }
.home-show-card:nth-child(2) { background-position: 23.24% 70.24%; }
.home-show-card:nth-child(3) { background-position: 42.18% 70.24%; }
.home-show-card:nth-child(4) { background-position: 59.89% 70.24%; }
.home-show-card:nth-child(5) { background-position: 77.68% 70.24%; }
.home-show-card:nth-child(6) { background-position: 94.79% 70.24%; }
.merchant-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.merchant-row article { min-height: 117px; padding: 13px 20px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-lg); }
.merchant-row strong { grid-row: 1 / span 2; font: var(--m9-type-page-title); letter-spacing: -.06em; }
.merchant-advice { color: var(--m9-primary); font-style: italic; }
.merchant-jib { color: var(--m9-text-secondary); }
.merchant-have { color: var(--m9-text); }
.merchant-banana { color: var(--m9-text); font-size: 1.25rem !important; }
.merchant-mercular { color: var(--m9-text); font-size: 1.25rem !important; }
.merchant-row article div { display: grid; }
.merchant-row article div b { font-size: 0.75rem; }
.merchant-row article div small { color: var(--m9-text-muted); font-size: 0.75rem; }
.merchant-row article button { grid-column: 2; height: 28px; color: var(--m9-primary); background: var(--m9-on-primary); border: 1px solid var(--m9-input-border); border-radius: var(--m9-radius-xs); font-size: 0.75rem; }
.home-live-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.home-live-row > button { position: relative; min-width: 0; padding: 0 0 12px; display: grid; overflow: hidden; text-align: left; background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-lg); }
.home-live-row img { width: 100%; height: 145px; object-fit: cover; object-position: center 13%; }
.home-live-row em { position: absolute; left: 9px; top: 9px; padding: 4px 8px; color: var(--m9-on-primary); background: var(--m9-danger); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-style: normal; }
.home-live-row b, .home-live-row small { padding: 0 11px; }
.home-live-row b { margin-top: 8px; font-size: 0.8125rem; }
.home-live-row small { color: var(--m9-text-muted); }
/* Shared left rails */
.product-view { grid-template-columns: 225px minmax(0,1fr); gap: 20px; }
.side-rail { top: 86px; max-height: calc(100vh - 99px); padding: 11px 10px; background: var(--m9-on-primary); border-color: var(--m9-chart-grid); border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); }
.side-title { padding: 8px 9px; font-size: 0.875rem; }
.side-link { min-height: 39px; grid-template-columns: 28px 1fr auto; color: var(--m9-brand-navy); border-radius: var(--m9-radius-sm); font-size: 0.8125rem; }
.side-link i { color: var(--m9-disabled-text); font-style: normal; }
.side-link:hover, .side-link.is-active { color: var(--m9-primary); background: var(--m9-gradient-selected); }
.side-divider { margin: 9px; }
/* TV / VDO */
.tv-feature { min-height: 219px; background: url('assets/reference-web2.png') -289px -86px / 1536px 1024px no-repeat; border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); }
.tv-feature > * { opacity: 0; }
.tv-feature .tv-feature-copy, .tv-feature .hero-actions, .tv-feature .hero-actions button { pointer-events: auto; }
.tv-main .compact-section { margin-top: 13px; }
.tv-main .section-heading { margin-bottom: 8px; }
.tv-main .section-heading h2 { font-size: 1.0rem; }
.rail-device-card { position: relative; min-height: 307px; margin-top: 16px; padding: 20px; overflow: hidden; display: grid; align-content: start; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-lg); }
.rail-device-card b { font-size: 1.0rem; }
.rail-device-card small { margin-top: 7px; line-height: 1.65; }
.rail-device-card button { width: 110px; height: 35px; margin-top: 16px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-3xl); }
.rail-device-card > span { position: absolute; right: 15px; bottom: 26px; color: var(--m9-input-border); font: var(--m9-type-page-title); transform: rotate(-8deg); }
.channel-strip { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.mini-channel { min-width: 0; min-height: 138px; padding: 14px 10px 9px; grid-template-columns: 1fr; justify-items: center; align-content: start; text-align: center; border-radius: var(--m9-radius-md); }
.mini-channel .channel-mark { width: 64px; height: 58px; font-size: 0.8125rem; border-radius: var(--m9-radius-xl); }
.mini-channel div { justify-items: center; }
.mini-channel b { font-size: 0.75rem; }
.mini-channel small { font-size: 0.75rem; }
.mini-channel em { left: 9px; right: auto; top: 8px; padding: 2px 5px; color: var(--m9-on-primary); background: var(--m9-danger); border-radius: var(--m9-radius-xs); font-size: 0.75rem; }
.mini-channel::after { content: ''; width: 100%; height: 3px; margin-top: 8px; background:var(--m9-primary); border-radius: var(--m9-radius-3xl); color:var(--m9-on-primary);}
.poster-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.tv-main .poster-card { min-height: 145px; border-radius: var(--m9-radius-md); }
.tv-main .poster-card .poster-image { aspect-ratio: 1.55; }
.tv-main .poster-card img { object-position: center 18%; }
.tv-main .poster-info { left: 8px; right: 7px; bottom: 6px; }
.tv-main .poster-info b { font-size: 0.75rem; }
.tv-main .poster-info small { font-size: 0.75rem; }
.tv-main .poster-badge, .tv-main .poster-quality { font-size: 0.75rem; }
.tv-main #vodGrid .poster-card { background-image: url('assets/reference-web2.png'); background-size: 808.4% 706.2%; background-repeat: no-repeat; }
.tv-main #vodGrid .poster-card > * { opacity: 0; }
.tv-main #vodGrid .poster-card:nth-child(1) { background-position: 21.55% 61.21%; }
.tv-main #vodGrid .poster-card:nth-child(2) { background-position: 36.40% 61.21%; }
.tv-main #vodGrid .poster-card:nth-child(3) { background-position: 51.26% 61.21%; }
.tv-main #vodGrid .poster-card:nth-child(4) { background-position: 66.12% 61.21%; }
.tv-main #vodGrid .poster-card:nth-child(5) { background-position: 81.05% 61.21%; }
.tv-main #vodGrid .poster-card:nth-child(6) { background-position: 95.91% 61.21%; }
.static-media-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.static-media-row article { position: relative; min-width: 0; height: 115px; overflow: hidden; display: grid; align-content: end; padding: 8px; color: var(--m9-on-primary); background: var(--m9-text); border-radius: var(--m9-radius-sm); cursor: pointer; }
.static-media-row article::after { content: ''; position: absolute; inset: 30% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.static-media-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.static-media-row b, .static-media-row small { position: relative; z-index: 2; }
.static-media-row b { font-size: 0.75rem; }
.static-media-row small { font-size: 0.75rem; }
/* Shorts */
.shorts-view.is-active { grid-template-columns: 218px minmax(0,1fr); gap: 20px; min-height: auto; }
.shorts-main { min-width: 0; }
.shorts-page-head { height: 68px; display: flex; align-items: flex-start; justify-content: space-between; }
.shorts-page-head h1 { margin: 0; font: var(--m9-type-page-title); }
.shorts-page-head p { margin: 0; color: var(--m9-text-muted); font-size: 0.875rem; }
.shorts-page-head > button { margin-top: 11px; border: 0; background: transparent; }
.short-card-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.short-grid-card { position: relative; min-width: 0; aspect-ratio: .57; overflow: hidden; color: var(--m9-on-primary); background: var(--m9-text); border-radius: var(--m9-radius-md); cursor: pointer; }
.short-grid-card::after { content: ''; position: absolute; inset: 42% 0 0; background:var(--m9-primary); color:var(--m9-on-primary);}
.short-grid-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: .35s; }
.short-grid-card:hover > img { transform: scale(1.03); }
.short-grid-card > em, .short-grid-card > time { position: absolute; z-index: 2; top: 9px; padding: 3px 6px; border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-style: normal; }
.short-grid-card > em { left: 9px; background: var(--m9-primary); }
.short-grid-card > em.popular { background: var(--m9-warning); }
.short-grid-card > time { right: 7px; background: var(--m9-border); }
.short-grid-card > div { position: absolute; z-index: 3; left: 10px; right: 8px; bottom: 10px; display: grid; }
.short-grid-card > div b { min-height: 39px; font-size: 0.875rem; line-height: 1.32; }
.short-grid-card > div small { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; white-space: nowrap; }
.short-grid-card > div i { width: 22px; height: 22px; display: grid; place-items: center; background:var(--m9-primary); border: 1px solid var(--m9-on-primary); border-radius: var(--m9-radius-pill); font-style: normal; color:var(--m9-on-primary);}
.short-grid-card { background-image: url('assets/reference-web3.png'); background-size: 853.33% 323.03%; background-repeat: no-repeat; }
.short-grid-card > * { opacity: 0; }
.shorts-main > .short-card-row .short-grid-card:nth-child(1) { background-position: 21.61% 23.62%; }
.shorts-main > .short-card-row .short-grid-card:nth-child(2) { background-position: 36.06% 23.62%; }
.shorts-main > .short-card-row .short-grid-card:nth-child(3) { background-position: 50.74% 23.62%; }
.shorts-main > .short-card-row .short-grid-card:nth-child(4) { background-position: 65.41% 23.62%; }
.shorts-main > .short-card-row .short-grid-card:nth-child(5) { background-position: 80.09% 23.62%; }
.shorts-main > .short-card-row .short-grid-card:nth-child(6) { background-position: 94.76% 23.62%; }
.short-feed-section .short-grid-card:nth-child(1) { background-position: 21.61% 78.78%; }
.short-feed-section .short-grid-card:nth-child(2) { background-position: 36.06% 78.78%; }
.short-feed-section .short-grid-card:nth-child(3) { background-position: 50.74% 78.78%; }
.short-feed-section .short-grid-card:nth-child(4) { background-position: 65.41% 78.78%; }
.short-feed-section .short-grid-card:nth-child(5) { background-position: 80.09% 78.78%; }
.short-feed-section .short-grid-card:nth-child(6) { background-position: 94.76% 78.78%; }
.short-feed-section { margin-top: 29px; }
.short-feed-section .section-heading { margin-bottom: 12px; }
.trending-band { margin-top: 30px; }
.trend-cards { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.trend-cards button { min-height: 68px; padding: 8px 12px; display: grid; grid-template-columns: 28px 1fr; align-items: center; text-align: left; background: var(--m9-on-primary); border: 1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-md); }
.trend-cards button > b { color: var(--m9-primary); font-size: 1.5625rem; }
.trend-cards span { display: grid; }
.trend-cards span small { color: var(--m9-text-muted); }
.followed-creators { display: grid; gap: 3px; }
.followed-creators button { min-height: 35px; padding: 2px 8px; display: flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 0; font-size: 0.75rem; }
.followed-creators span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); }
.sr-data { display: none !important; }
/* Shop */
#view-shop.product-view { grid-template-columns: 235px minmax(0,1fr); }
.shop-rail { padding: 0; background: transparent; border: 0; box-shadow: var(--m9-shadow-surface); }
.shop-rail .rail-panel { padding: 11px 10px; background: var(--m9-on-primary); border: 1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); }
.shop-rail .rail-panel + .rail-panel { margin-top: 13px; }
.shop-hero { min-height: 164px; padding: 0; background: url('assets/reference-web4.png') -295px -85px / 1536px 1024px no-repeat; border-radius: var(--m9-radius-xl); }
.shop-hero > * { opacity: 0; }
.shop-main > .banner-dots { height: 18px; margin-top: -17px; position: relative; z-index: 4; }
.shop-main .benefit-strip { min-height: 84px; margin: 18px 0 14px; padding: 12px 20px; grid-template-columns: repeat(7,1fr); border-radius: var(--m9-radius-xl); }
.benefit-strip div { grid-template-columns: 39px 1fr; }
.benefit-strip div > span { width: 36px; height: 36px; }
.benefit-strip b { font-size: 0.75rem; }
.benefit-strip small { font-size: 0.75rem; }
.brand-filter { padding: 8px 10px; display: grid; gap: 9px; }
.brand-filter > b { font-size: 0.75rem; }
.brand-filter label { display: flex; align-items: center; gap: 7px; color: var(--m9-text-secondary); font-size: 0.75rem; }
.brand-filter input { appearance: none; width: 15px; height: 15px; border: 1px solid var(--m9-input-border); border-radius: var(--m9-radius-xs); }
.brand-filter input:checked { background: var(--m9-primary); box-shadow: var(--m9-shadow-surface); }
.brand-filter button { justify-self: start; padding: 3px 0; color: var(--m9-text-muted); background: transparent; border: 0; font-size: 0.75rem; }
.price-filter div b { min-width: 88px; padding: 7px 10px; color: var(--m9-disabled-text); background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-xs); font-weight: 400; }
.price-filter div b:last-child { text-align: right; }
.shop-main .content-section { margin-top: 14px; }
.shop-main .section-heading h2 { font-size: 1.0rem; }
.product-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.product-card { min-height: 232px; padding: 9px; border-radius: var(--m9-radius-md); }
.product-visual { aspect-ratio: 1.27; background:var(--m9-primary); border-radius: var(--m9-radius-sm); color:var(--m9-on-primary);}
.product-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; border-radius: inherit; }
.product-emoji { font: var(--m9-type-page-title); }
.product-card h3 { height: 31px; margin: 7px 0 2px; overflow: hidden; font-size: 0.75rem; line-height: 1.35; }
.product-price b { font-size: 0.8125rem; }
.product-price del { font-size: 0.75rem; }
.discount { left: 4px; top: 4px; font-size: 0.75rem; }
.product-bottom small { font-size: 0.75rem; }
.add-cart { width: 29px; height: 29px; border-radius: var(--m9-radius-xs); }
.deal-progress { height: 4px; margin: 7px 0 3px; overflow: hidden; background: var(--m9-border); border-radius: var(--m9-radius-3xl); }
.deal-progress span { display: block; width: 22%; height: 100%; background: var(--m9-danger); }
.deal-meta { display: flex; justify-content: space-between; color: var(--m9-text-muted); font-size: 0.75rem; }
.shop-main #productGrid .product-card, .shop-main #recommendedGrid .product-card { background-image: url('assets/reference-web4.png'); background-size: 858.1% 441.4%; background-repeat: no-repeat; cursor: pointer; }
.shop-main #productGrid .product-card > *, .shop-main #recommendedGrid .product-card > * { opacity: 0; }
.shop-main #productGrid .product-card:nth-child(1) { background-position: 21.74% 51.14%; }
.shop-main #productGrid .product-card:nth-child(2) { background-position: 35.81% 51.14%; }
.shop-main #productGrid .product-card:nth-child(3) { background-position: 49.82% 51.14%; }
.shop-main #productGrid .product-card:nth-child(4) { background-position: 63.89% 51.14%; }
.shop-main #productGrid .product-card:nth-child(5) { background-position: 77.89% 51.14%; }
.shop-main #productGrid .product-card:nth-child(6) { background-position: 91.97% 51.14%; }
.shop-main #recommendedGrid .product-card:nth-child(1) { background-position: 21.74% 88.12%; }
.shop-main #recommendedGrid .product-card:nth-child(2) { background-position: 35.81% 88.12%; }
.shop-main #recommendedGrid .product-card:nth-child(3) { background-position: 49.82% 88.12%; }
.shop-main #recommendedGrid .product-card:nth-child(4) { background-position: 63.89% 88.12%; }
.shop-main #recommendedGrid .product-card:nth-child(5) { background-position: 77.89% 88.12%; }
.shop-main #recommendedGrid .product-card:nth-child(6) { background-position: 91.97% 88.12%; }
.recommended-products .discount { background: var(--m9-primary); }
.shop-scene-secondary { margin-top: 27px; }
.scene-commerce { border-radius: var(--m9-radius-lg); }
.scene-media { min-height: 245px; }
.shop-trust-row { min-height: 58px; margin-top: 20px; padding: 12px 24px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; color: var(--m9-primary); background:var(--m9-surface-accent); border-radius: var(--m9-radius-lg); }
.shop-trust-row div { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.25rem; }
.shop-trust-row b { color: var(--m9-brand-navy); font-size: 0.75rem; }
/* Chat */
#view-chat.chat-shell.is-active { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 216px 333px minmax(500px,1fr) 270px; margin: 0 calc((94.8vw - min(1460px,94.8vw)) / -2); background: var(--m9-on-primary); border: 1px solid var(--m9-chart-grid); border-radius: 0; box-shadow: var(--m9-shadow-surface); overflow: hidden; }
.chat-nav { padding: 11px 26px 14px; border-right: 1px solid var(--m9-chart-grid); }
.new-chat { height: 45px; margin-bottom: 8px; border-radius: var(--m9-radius-xs); }
.chat-nav-link { min-height: 39px; font-size: 0.75rem; }
.recent-people { margin-top: 11px; padding-top: 12px; display: grid; gap: 3px; border-top: 1px solid var(--m9-chart-grid); }
.recent-people > small { margin-bottom: 5px; color: var(--m9-text-muted); }
.recent-people button { min-height: 38px; padding: 0; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 7px; text-align: left; background: transparent; border: 0; }
.recent-people button > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); }
.recent-people button b { font-size: 0.75rem; }
.recent-people button em { min-width: 17px; height: 17px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--m9-primary); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; font-style: normal; }
.chat-connect-card { margin-top: auto; min-height: 235px; padding: 18px; align-content: start; color: var(--m9-brand-navy); background: var(--m9-gradient-selected); border-radius: var(--m9-radius-lg); }
.chat-connect-card b { font-size: 0.875rem; }
.chat-connect-card p { color: var(--m9-brand-navy); line-height: 1.65; }
.chat-connect-card button { width: 111px; height: 32px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-3xl); font-size: 0.75rem; }
.conversation-list { padding: 10px 0; }
.conversation-search { margin: 0 12px 9px; }
.conversation-search button { width: 33px; border: 0; background: transparent; }
.conversation-group-label { padding: 4px 12px 6px; color: var(--m9-text-muted); font-size: 0.75rem; }
.conversation-item { padding: 9px 12px; grid-template-columns: 43px 1fr auto; border-radius: 0; }
.conversation-item.is-active { background:var(--m9-primary); color:var(--m9-on-primary);}
.conversation-avatar { width: 39px; height: 39px; }
.conversation-item b { font-size: 0.75rem; }
.conversation-item small, .conversation-meta { font-size: 0.75rem; }
.conversation-room { min-width: 0; }
.room-head { height: 74px; padding: 0 17px; }
.room-avatar { width: 46px; height: 46px; font-size: 1.25rem; }
.room-head h2 { font-size: 0.875rem; }
.room-head h2 small { color: var(--m9-warning); }
.room-head span { font-size: 0.75rem; }
.room-actions { margin-left: auto; gap: 5px; }
.room-actions button { width: 31px; height: 31px; font-size: 0.875rem; }
.message-stream { padding: 24px 18px; }
.message-group { max-width: 75%; }
.message-bubble { font-size: 0.75rem; }
.attachment-card { min-width: 305px; margin-top: 9px; padding: 9px 11px; display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 10px; text-align: left; color: var(--m9-brand-navy); background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-sm); }
.attachment-card > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--m9-danger); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-weight: 800; }
.attachment-card > div { display: grid; }
.attachment-card b { font-size: 0.75rem; }
.attachment-card small { color: var(--m9-text-muted); font-size: 0.75rem; }
.attachment-card i { color: var(--m9-text-muted); font-style: normal; }
.message-reactions { width: max-content; margin-top: 5px; padding: 3px 8px; color: var(--m9-neutral); background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; }
.message-composer { min-height: 57px; padding: 7px 10px; }
.message-composer > button { width: 31px; height: 31px; }
.send-message { width: 42px !important; height: 42px !important; padding: 0; font-size: 1.0rem; }
.room-context { padding: 20px 18px; }
.context-hero b { margin-top: 4px; font-size: 0.75rem; }
.context-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.context-actions button { min-height: 54px; display: grid; place-items: center; align-content: center; background: var(--m9-surface-soft); border: 0; border-radius: var(--m9-radius-sm); font-size: 1.0rem; }
.context-actions small { display: block; color: var(--m9-brand-navy); font-size: 0.75rem; }
.group-about, .group-media, .member-list { margin: 16px -18px 0; padding: 16px 18px; border-top: 1px solid var(--m9-chart-grid); }
.group-about > b, .group-media > b, .member-list > b { font-size: 0.75rem; }
.group-about p, .group-about small { margin: 6px 0 0; color: var(--m9-neutral); font-size: 0.75rem; }
.group-media > b, .member-list > b { display: flex; justify-content: space-between; }
.group-media img { width: 65px; height: 48px; margin: 8px 3px 0 0; object-fit: cover; border-radius: var(--m9-radius-xs); }
.member-list p { margin: 9px 0; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; font-size: 0.75rem; }
.member-list p span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); border-radius: var(--m9-radius-pill); }
.member-list p em { color: var(--m9-primary); font-size: 0.75rem; font-style: normal; }
/* Wallet */
.wallet-view.is-active { grid-template-columns: 240px minmax(0,1fr); gap: 22px; }
.wallet-dashboard { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) 414px; gap: 22px; }
.wallet-primary { min-width: 0; }
.wallet-hero { min-height: 225px; padding: 0; display: block; background: url('assets/reference-web6.png') -300px -103px / 1536px 1024px no-repeat; border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); }
.wallet-balance { position: absolute; left: 0; top: 0; bottom: 0; width: 63%; padding: 29px; display: grid; align-content: start; color: var(--m9-on-primary); background:var(--m9-primary); }
.wallet-balance > span { font-size: 0.875rem; }
.wallet-balance > strong { margin: 4px 0 17px; font: var(--m9-type-page-title); }
.wallet-substats { padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--m9-surface); }
.wallet-substats > div { display: grid; }
.wallet-substats > div + div { padding-left: 22px; border-left: 1px solid var(--m9-surface); }
.wallet-substats small { color: var(--m9-on-primary); font-size: 0.75rem; }
.wallet-substats b { color: var(--m9-on-primary); font-size: 1.0rem; }
.coin-mini { width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--m9-warning); background: var(--m9-warning); border: 2px solid var(--m9-warning-bg); border-radius: var(--m9-radius-pill); font-size: 0.75rem; font-style: normal; }
.wallet-orbit { display: none; }
.quick-title { margin: 17px 0 6px; }
.quick-title h2 { font-size: 1.0rem; }
.quick-actions { margin: 0 0 19px; grid-template-columns: repeat(6,1fr); gap: 12px; }
.quick-actions button { position: relative; min-height: 106px; border-radius: var(--m9-radius-lg); }
.quick-actions span { width: 40px; height: 40px; font-size: 1.25rem; }
.quick-actions b { font-size: 0.75rem; }
.quick-actions button.recommended { border-color: var(--m9-primary); }
.quick-actions button > em { position: absolute; top: -14px; padding: 3px 12px; color: var(--m9-on-primary); background: var(--m9-primary); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; font-style: normal; }
.wallet-services .section-heading { margin-bottom: 10px; }
.wallet-services .section-heading h2 { font-size: 1.0rem; }
.service-grid { grid-template-columns: repeat(4,1fr); gap: 10px; }
.service-grid button { position: relative; min-height: 201px; padding: 16px; overflow: hidden; background:var(--m9-primary); border-radius: var(--m9-radius-lg); color:var(--m9-on-primary);}
.service-grid button > b { margin: 0; color: var(--m9-brand-navy); font-size: 0.75rem; }
.service-grid button > small { color: var(--m9-neutral); font-size: 0.75rem; }
.service-grid button > span { width: auto; height: auto; margin: 20px 0 12px; color: inherit; background: transparent; font: var(--m9-type-page-title); }
.service-grid button > em { position: absolute; left: 14px; bottom: 11px; padding: 5px 9px; background: var(--m9-on-primary); border-radius: var(--m9-radius-3xl); font-size: 0.75rem; font-style: normal; }
.wallet-banner { min-height: 140px; margin-top: 20px; padding: 20px 36px; border-radius: var(--m9-radius-xl); background:var(--m9-primary); color:var(--m9-on-primary);}
.wallet-banner h3 { margin: 0 0 5px; font-size: 1.25rem; }
.wallet-banner p { margin: 0; font-size: 0.75rem; }
.wallet-banner > button { min-width: 168px; height: 43px; color: var(--m9-on-primary); background:var(--m9-primary); }
.wallet-phone { font: var(--m9-type-page-title); }
.wallet-phone span { display: inline-grid; width: 33px; height: 33px; place-items: center; color: var(--m9-on-primary); background: var(--m9-primary); border-radius: var(--m9-radius-md); font-size: 1.25rem; }
.wallet-trust { min-height: 78px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.wallet-trust > div { display: grid; grid-template-columns: 31px 1fr; align-items: center; color: var(--m9-primary); font-size: 1.5625rem; }
.wallet-trust span { display: grid; }
.wallet-trust b { color: var(--m9-brand-navy); font-size: 0.75rem; }
.wallet-trust small { color: var(--m9-text-muted); font-size: 0.75rem; }
.wallet-right { display: grid; align-content: start; gap: 14px; }
.bank-security, .transaction-panel, .coupon-panel { padding: 17px 23px; background: var(--m9-on-primary); border: 1px solid var(--m9-border); border-radius: var(--m9-radius-xl); box-shadow: var(--m9-shadow-surface); }
.bank-security { min-height: 259px; }
.bank-security > small { color: var(--m9-text-muted); }
.bank-security h2 { margin: 9px 0 16px; text-align: center; font-family: var(--m9-font-sans); font-size: 1.5625rem; }
.bank-security h2 span { color: var(--m9-info); }
.bank-security > div { padding: 10px 13px; background: var(--m9-surface-soft); border: 1px solid var(--m9-border-soft); border-radius: var(--m9-radius-lg); }
.bank-security p { margin: 6px 0; font-size: 0.75rem; }
.bank-security p::first-letter { color: var(--m9-primary); }
.bank-security button { margin-top: 7px; padding: 0; color: var(--m9-info); background: transparent; border: 0; font-size: 0.75rem; }
.wallet-right .transaction-panel { min-height: 365px; padding: 14px 22px; }
.wallet-right .transaction-item { padding: 10px 0; }
.wallet-right .transaction-icon { width: 34px; height: 34px; }
.wallet-right .transaction-item b, .wallet-right .transaction-amount { font-size: 0.75rem; }
.wallet-right .transaction-item small { font-size: 0.75rem; }
.coupon-panel { min-height: 171px; }
.coupon-panel .panel-head h2 { font-size: 0.8125rem; }
.coupon-panel > button { width: 100%; min-height: 91px; padding: 0; display: grid; grid-template-columns: 70px 1fr 58px; align-items: center; overflow: hidden; text-align: left; background: var(--m9-on-primary); border: 1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-md); }
.coupon-panel > button > span { height: 100%; display: grid; place-items: center; color: var(--m9-on-primary); background:var(--m9-primary); font-size: 1.0rem; font-weight: 800; }
.coupon-panel > button div { padding: 10px; display: grid; }
.coupon-panel > button div b { font-size: 0.75rem; }
.coupon-panel > button div small, .coupon-panel > button div em { color: var(--m9-text-muted); font-size: 0.75rem; font-style: normal; }
.coupon-panel > button > i { padding: 5px; color: var(--m9-on-primary); background: var(--m9-primary); border-radius: var(--m9-radius-xs); font-size: 0.75rem; font-style: normal; }
.bank-connect-card, .wallet-help-card { margin-top: 16px; padding: 18px; display: grid; background:var(--m9-primary); border: 1px solid var(--m9-chart-grid); border-radius: var(--m9-radius-xl); color:var(--m9-on-primary);}
.bank-connect-card { min-height: 251px; }
.bank-connect-card b, .wallet-help-card b { font-size: 0.8125rem; }
.bank-connect-card p, .wallet-help-card p { margin: 5px 0; color: var(--m9-text-secondary); font-size: 0.75rem; }
.bank-connect-card > span { margin: 15px auto; font: var(--m9-type-page-title); }
.bank-connect-card button { height: 34px; color: var(--m9-on-primary); background:var(--m9-primary); border: 0; border-radius: var(--m9-radius-md); }
.wallet-help-card { min-height: 136px; }
.wallet-help-card button { justify-self: start; padding: 7px 11px; color: var(--m9-brand-navy); background: var(--m9-disabled-bg); border: 0; border-radius: var(--m9-radius-3xl); font-size: 0.75rem; }
@media (max-width: 1380px) {
.topbar { grid-template-columns: 155px 1fr auto; padding: 0 20px; }
.main-nav { gap: 3px; }
.searchbox { width: 240px; }
main { width: calc(100% - 32px); }
.home-sale-banner { background-size: 1536px 1024px; background-position: center -89px; }
.home-channel-row, .merchant-row { grid-template-columns: repeat(5,minmax(190px,1fr)); overflow-x: auto; }
.home-show-row, .short-card-row, .poster-grid, .static-media-row, .product-grid { grid-template-columns: repeat(6,minmax(170px,1fr)); overflow-x: auto; }
.wallet-dashboard { grid-template-columns: minmax(0,1fr) 340px; gap: 14px; }
#view-chat.chat-shell.is-active { grid-template-columns: 190px 280px minmax(420px,1fr); }
#view-chat .room-context { display: none; }
}
@media (max-width: 1120px) {
.topbar { grid-template-columns: 138px 1fr auto; }
.main-nav { display: none; }
.top-actions { grid-column: 3; }
.product-view.is-active, .wallet-view.is-active { grid-template-columns: 1fr; }
.product-view > .side-rail, .wallet-view > .side-rail { display: none; }
.wallet-dashboard { grid-template-columns: 1fr; }
.wallet-right { grid-template-columns: 1fr 1fr; }
.wallet-right .coupon-panel { grid-column: 1 / -1; }
.shop-main .benefit-strip { grid-template-columns: repeat(4,1fr); }
.shorts-view.is-active { grid-template-columns: 1fr; }
.chat-nav { display: none; }
#view-chat.chat-shell.is-active { grid-template-columns: 270px minmax(0,1fr); }
}
@media (max-width: 820px) {
body { padding-bottom: 70px; }
.topbar { height: 64px; padding: 0 14px; grid-template-columns: 112px 1fr auto; }
.brand { width: 109px; }
.searchbox { width: 38px; height: 38px; padding: 0; justify-content: center; }
.searchbox input { display: none; }
.notification-btn, .cart-btn, .avatar { display: none; }
.coin-pill { height: 38px; min-width: 78px; }
main { width: 100%; padding: 10px 11px 30px; }
.reference-home { padding: 0; }
.home-sale-banner { height: 180px; background-image: none; background:var(--m9-primary); cursor: default; color:var(--m9-on-primary);}
.home-sale-banner > * { opacity: 1; }
.sale-copy { padding: 23px; }
.sale-copy > span { font-size: 1.25rem; font-weight: 800; font-style: italic; }
.sale-copy h1 { margin: 0; color: var(--m9-primary); font: var(--m9-type-page-title); line-height: .9; }
.sale-copy h1 sup, .sale-copy h1 b { font-size: 1.25rem; }
.sale-copy p { margin: 7px 0; font-size: 1.0rem; }
.sale-copy > button { padding: 8px 18px; color: var(--m9-on-primary); background: var(--m9-text); border: 0; border-radius: var(--m9-radius-3xl); }
.sale-art { position: absolute; right: 12px; bottom: 14px; display: flex; align-items: end; }
.sale-art > div { margin-left: -8px; display: grid; place-items: center; color: var(--m9-on-primary); background: var(--m9-ai); border-radius: var(--m9-radius-sm); }
.sale-art .bag { width: 62px; height: 75px; }
.sale-art .small { width: 44px; height: 57px; background: var(--m9-primary); }
.sale-art .gift { width: 52px; height: 50px; background: var(--m9-warning); }
.sale-art .cart-art { width: auto; height: auto; background: transparent; font: var(--m9-type-page-title); }
.banner-arrow { display: none; }
.split-head { grid-template-columns: 1fr auto; }
.split-head .filter-chips { display: none; }
.home-channel-row, .merchant-row, .home-live-row { grid-template-columns: repeat(5,210px); overflow-x: auto; }
.home-show-row { grid-template-columns: repeat(6,170px); }
.home-show-card { height: 215px; }
.home-show-card, .tv-main #vodGrid .poster-card, .short-grid-card, .shop-main #productGrid .product-card, .shop-main #recommendedGrid .product-card { background-image: none; }
.home-show-card > *, .tv-main #vodGrid .poster-card > *, .short-grid-card > *, .shop-main #productGrid .product-card > *, .shop-main #recommendedGrid .product-card > * { opacity: 1; }
.tv-feature, .shop-hero { background-image: none; }
.tv-feature { min-height: 390px; }
.tv-feature > * { opacity: 1; }
.tv-feature-image img { opacity: 1; }
.tv-feature-copy { left: 22px; right: 22px; top: auto; bottom: 26px; }
.tv-feature-copy h1 { font-size: 1.5625rem; }
.shop-hero { min-height: 220px; padding: 28px 22px; }
.shop-hero > * { opacity: 1; }
.shop-main > .banner-dots { margin: 0; }
.shop-gift-art { display: none; }
.shop-main .benefit-strip { grid-template-columns: repeat(2,1fr); }
.product-grid { grid-template-columns: repeat(5,170px); }
.short-card-row { grid-template-columns: repeat(6,178px); overflow-x: auto; }
.trend-cards { grid-template-columns: repeat(6,180px); overflow-x: auto; }
#view-chat.chat-shell.is-active { min-height: calc(100vh - 145px); grid-template-columns: 110px minmax(0,1fr); }
.conversation-list { width: auto; }
.conversation-search, .conversation-group-label { display: none; }
.conversation-item { padding: 8px 5px; grid-template-columns: 36px 1fr; }
.conversation-item small, .conversation-meta { display: none; }
.conversation-avatar { width: 34px; height: 34px; }
.room-actions button:nth-child(-n+4) { display: none; }
.wallet-hero { min-height: 300px; background-image: none; background:var(--m9-primary); color:var(--m9-on-primary);}
.wallet-balance { width: 100%; padding: 28px 22px; background: transparent; }
.wallet-substats { margin-top: 10px; }
.quick-actions { grid-template-columns: repeat(3,1fr); }
.service-grid { grid-template-columns: repeat(2,1fr); }
.wallet-right { grid-template-columns: 1fr; }
.wallet-right .coupon-panel { grid-column: auto; }
.wallet-trust { grid-template-columns: repeat(2,1fr); row-gap: 12px; }
.mobile-nav { display: grid; }
}
/* Readability lift — two type steps for small interface copy. */
body { font-size: var(--read-body); line-height: 1.6; }
.nav-item { font-size: var(--read-body); }
.searchbox input, .conversation-search input { font-size: var(--read-copy); }
.coin-pill span, .cart-btn b, .notification-btn b, kbd { font-size: var(--read-meta); }
.tag, .pitch-btn, .lang-btn { font-size: var(--read-label); }
.tiny-link, .home-section-head > button, .shorts-page-head > button { font-size: var(--read-copy); }
.filter-chips button, .side-tags button { font-size: var(--read-label); }
.side-title { font-size: var(--read-body); }
.side-link { min-height: 44px; font-size: var(--read-copy); }
.side-caption { font-size: var(--read-label); }
.home-channel-card { min-height: 176px; }
.home-channel-card > em { font-size: var(--read-meta); }
.home-channel-card > b { font-size: var(--read-copy); }
.home-channel-card > small { font-size: var(--read-detail); }
.home-channel-card > button { height: 31px; font-size: var(--read-label); }
.home-show-card > span, .home-show-card > i { font-size: var(--read-meta); }
.home-show-card > div b { font-size: var(--read-body); }
.home-show-card > div small { font-size: var(--read-detail); }
.home-show-card > div button { height: 30px; font-size: var(--read-detail); }
.merchant-row article { min-height: 125px; }
.merchant-row article div b, .merchant-row article button { font-size: var(--read-label); }
.merchant-row article div small { font-size: var(--read-detail); }
.merchant-row article button { height: 32px; }
.home-live-row em { font-size: var(--read-meta); }
.home-live-row b { font-size: var(--read-copy); }
.home-live-row small { font-size: var(--read-detail); }
.mini-channel { min-height: 150px; }
.mini-channel b { font-size: var(--read-label); }
.mini-channel small { font-size: var(--read-detail); }
.mini-channel em { font-size: var(--read-meta); }
.tv-main .poster-info b { font-size: var(--read-label); }
.tv-main .poster-info small { font-size: var(--read-meta); }
.tv-main .poster-badge, .tv-main .poster-quality { font-size: var(--read-meta); }
.static-media-row b { font-size: var(--read-detail); }
.static-media-row small { font-size: var(--read-meta); }
.short-grid-card > em, .short-grid-card > time { font-size: var(--read-meta); }
.short-grid-card > div b { font-size: var(--read-body); line-height: 1.42; }
.short-grid-card > div small { font-size: var(--read-meta); }
.trend-cards span { font-size: var(--read-label); }
.trend-cards span small { font-size: var(--read-detail); }
.followed-creators button { min-height: 39px; font-size: var(--read-detail); }
.shop-main .benefit-strip { min-height: 92px; }
.benefit-strip b, .brand-filter > b { font-size: var(--read-label); }
.benefit-strip small, .brand-filter label, .brand-filter button { font-size: var(--read-detail); }
.product-card { min-height: 242px; }
.product-card h3 { height: 38px; font-size: var(--read-label); line-height: 1.4; }
.product-price b { font-size: var(--read-copy); }
.product-price del, .discount, .deal-meta { font-size: var(--read-meta); }
.product-bottom small { font-size: var(--read-detail); }
.shop-trust-row b { font-size: var(--read-meta); }
.chat-nav-link { min-height: 43px; font-size: var(--read-label); }
.recent-people button b { font-size: var(--read-label); }
.recent-people button em { font-size: var(--read-meta); }
.chat-connect-card p, .chat-connect-card button { font-size: var(--read-label); }
.conversation-group-label { font-size: var(--read-meta); }
.conversation-item { min-height: 61px; }
.conversation-item b { font-size: var(--read-label); }
.conversation-item small, .conversation-meta { font-size: var(--read-meta); }
.room-head h2 { font-size: 1.0rem; }
.room-head span { font-size: var(--read-detail); }
.message-author { font-size: var(--read-detail); }
.message-bubble { font-size: var(--read-label); line-height: 1.62; }
.message-time { font-size: var(--read-meta); }
.attachment-card b { font-size: var(--read-detail); }
.attachment-card small, .message-reactions { font-size: var(--read-meta); }
.message-composer { min-height: 62px; }
.message-composer input { font-size: var(--read-label); }
.context-hero b, .group-about > b, .group-media > b, .member-list > b { font-size: var(--read-label); }
.context-actions small { font-size: var(--read-meta); }
.group-about p, .group-about small, .member-list p { font-size: var(--read-detail); }
.member-list p em { font-size: var(--read-meta); }
.wallet-substats small { font-size: var(--read-detail); }
.quick-actions button { min-height: 112px; }
.quick-actions b { font-size: var(--read-label); }
.quick-actions button > em { font-size: var(--read-meta); }
.service-grid button { min-height: 208px; }
.service-grid button > b { font-size: var(--read-label); }
.service-grid button > small { font-size: var(--read-detail); }
.service-grid button > em { font-size: var(--read-meta); }
.wallet-banner p { font-size: var(--read-label); }
.wallet-trust b { font-size: var(--read-detail); }
.wallet-trust small { font-size: var(--read-meta); }
.bank-security p, .bank-security button { font-size: var(--read-detail); }
.transaction-filter button { font-size: var(--read-label); }
.wallet-right .transaction-item b, .wallet-right .transaction-amount { font-size: var(--read-label); }
.wallet-right .transaction-item small { font-size: var(--read-meta); }
.coupon-panel .panel-head h2 { font-size: var(--read-copy); }
.coupon-panel > button div b { font-size: var(--read-label); }
.coupon-panel > button div small, .coupon-panel > button div em, .coupon-panel > button > i { font-size: var(--read-meta); }
.bank-connect-card b, .wallet-help-card b { font-size: var(--read-copy); }
.bank-connect-card p, .wallet-help-card p, .wallet-help-card button { font-size: var(--read-detail); }
.mobile-nav button { font-size: var(--read-label); }
.drawer-panel header span, .engine-core span,
.engine-map > button b, .engine-map > button small,
.engine-pillars span, .engine-pillars b, .engine-pillars p,
.revenue-row b, .revenue-row small,
.drawer-panel footer span, .drawer-panel footer p,
.player-caption span, .player-caption p,
.choice-option b, .choice-option small, .vote-bar div,
.product-modal-copy > span, .product-modal-copy .rating,
.product-modal-copy p, .variant-row button,
.wallet-modal p, .wallet-modal .mock-warning,
.fan-cover span, .fan-booking > p, .stage-label,
.fan-summary small { font-size: var(--read-label); }
.drawer-intro { font-size: var(--read-copy); }
.player-side h3 { font-size: var(--read-body); }
.wallet-banner span, .wallet-banner button { font-size: var(--read-label); }
@media (max-width: 820px) {
.home-channel-row, .merchant-row, .home-live-row { grid-template-columns: repeat(5,224px); }
.home-show-row, .product-grid { grid-template-columns: repeat(6,184px); }
.short-card-row { grid-template-columns: repeat(6,192px); }
#view-chat.chat-shell.is-active { grid-template-columns: 1fr; }
#view-chat .conversation-list { display: none; }
.conversation-item { min-height: 58px; }
}
/* Maya9 standard icon system — 24px grid, 2px rounded stroke. */
.m9-icon-sprite {
position: absolute !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.m9-icon-slot {
width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
color: var(--m9-text);
line-height: 0;
vertical-align: middle;
}
.m9-icon {
width: 100%;
height: 100%;
display: block;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.m9-icon use { stroke: inherit; }
button.is-active > .m9-icon-slot .m9-icon,
.side-link.is-active > .m9-icon-slot .m9-icon,
.chat-nav-link.is-active > .m9-icon-slot .m9-icon,
.recommended > .m9-icon-slot .m9-icon,
.is-following > .m9-icon-slot .m9-icon,
.is-liked > .m9-icon-slot .m9-icon,
button:hover:not(:disabled) > .m9-icon-slot .m9-icon {
stroke: currentColor;
}
button:disabled .m9-icon,
[aria-disabled="true"] .m9-icon {
stroke: var(--m9-disabled-text) !important;
}
.m9-icon-slot[data-m9-position="trailing"] {
width: 17px;
height: 17px;
margin-left: 4px;
}
.main-nav .nav-item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.main-nav .m9-icon-slot {
width: 19px;
height: 19px;
}
.searchbox > .m9-icon-slot {
width: 22px;
height: 22px;
transform: none;
}
.icon-btn {
display: grid;
place-items: center;
}
.icon-btn > .m9-icon-slot {
width: 24px;
height: 24px;
}
.notification-btn::before,
.notification-btn::after {
display: none;
}
.home-section-head h2,
.section-heading h2,
.filter-panel .side-title {
display: flex;
align-items: center;
gap: 8px;
}
.home-section-head h2 > .m9-icon-slot,
.section-heading h2 > .m9-icon-slot {
width: 22px;
height: 22px;
margin-right: 0;
}
.side-link > .m9-icon-slot,
.chat-nav-link > .m9-icon-slot {
width: 21px;
height: 21px;
color: var(--m9-text);
}
.side-link > i.m9-icon-slot {
width: 16px;
height: 16px;
justify-self: end;
}
.rail-device-card > .m9-icon-slot {
width: 62px;
height: 62px;
}
.home-channel-card [data-follow],
.new-chat,
.wallet-help-card button,
.hero-actions button,
.modal-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.home-channel-card [data-follow] > .m9-icon-slot {
width: 17px;
height: 17px;
}
.benefit-strip .m9-icon-slot {
width: 36px;
height: 36px;
padding: 7px;
}
.quick-actions .m9-icon-slot {
width: 40px;
height: 40px;
padding: 8px;
font-size: 0;
}
.service-grid button > .m9-icon-slot {
width: 54px;
height: 54px;
padding: 12px;
color: var(--m9-text);
background: var(--m9-surface-accent);
border-radius: var(--m9-radius-xl);
font-size: 0;
}
.shop-trust-row > div,
.wallet-trust > div {
align-items: center;
}
.shop-trust-row > div > .m9-icon-slot,
.wallet-trust > div > .m9-icon-slot {
width: 27px;
height: 27px;
}
.new-chat > .m9-icon-slot {
width: 20px;
height: 20px;
color: var(--m9-on-primary);
}
.conversation-search > .m9-icon-slot {
width: 20px;
height: 20px;
}
.conversation-search > button,
.room-actions button,
.message-composer > button,
.context-actions button {
display: grid;
place-items: center;
}
.conversation-search > button .m9-icon-slot,
.room-actions .m9-icon-slot,
.message-composer .m9-icon-slot {
width: 20px;
height: 20px;
}
.send-message .m9-icon-slot {
width: 22px;
height: 22px;
color: var(--m9-on-primary);
}
.context-actions .m9-icon-slot {
width: 22px;
height: 22px;
}
.room-avatar.m9-icon-slot {
width: 46px;
height: 46px;
padding: 10px;
color: var(--m9-on-primary);
}
.room-avatar.large.m9-icon-slot {
width: 62px;
height: 62px;
padding: 14px;
}
.new-chat > .m9-icon-slot .m9-icon,
.send-message > .m9-icon-slot .m9-icon,
.room-avatar.m9-icon-slot .m9-icon {
stroke: currentColor !important;
}
.transaction-icon.m9-icon-slot {
padding: 7px;
}
.add-cart .m9-icon-slot {
width: 18px;
height: 18px;
}
.play-circle .m9-icon-slot {
width: 29px;
height: 29px;
}
.attachment-card > i.m9-icon-slot {
width: 20px;
height: 20px;
}
.bank-connect-card > .m9-icon-slot {
width: 76px;
height: 76px;
margin: 15px auto;
padding: 11px;
color: var(--m9-text);
background: var(--m9-disabled-bg);
border-radius: var(--m9-radius-2xl);
}
.bank-security h2 > .m9-icon-slot {
width: 28px;
height: 28px;
margin-right: 7px;
}
.wallet-phone {
display: flex;
align-items: center;
gap: 10px;
}
.wallet-phone > .m9-icon-slot[data-m9-position="leading"] {
width: 54px;
height: 54px;
}
.wallet-phone > span.m9-icon-slot:not([data-m9-position]) {
width: 34px;
height: 34px;
padding: 6px;
}
.wallet-orbit > b.m9-icon-slot {
padding: 8px;
}
.wallet-modal > .m9-icon-slot .m9-icon {
width: 33px;
height: 33px;
}
.sale-art .m9-icon,
.shop-gift-art .m9-icon {
width: 65%;
height: 65%;
}
.mobile-nav .m9-icon-slot {
width: 22px;
height: 22px;
}
@media (max-width: 1380px) {
.main-nav .nav-item { gap: 5px; }
.main-nav .m9-icon-slot { width: 18px; height: 18px; }
}