/* Consumer appearance is derived only from the runtime catalogue mode.
   Variables live on body so dialogs, portals and download views inherit them. */
body[data-surface=consumer]{color-scheme:light;--bg:#F5F6F2;--panel:#FFFFFF;--soft:#E7F0E8;--surface:#E7F0E8;--text:#172C25;--muted:#64746D;--line:#E2E8E0;--line-strong:#9CA7A0;--brand:#12583E;--on-brand:#FFFFFF;--brand-text:#12583E;--tint:#E7F0E8;--poster:#E7F0E8;--poster-ink:#64746D;--danger:#A83935;--danger-bg:#F7E9E6;--success:#376348;--success-bg:#E7F0E8;--warning:#7C5B29;--warning-bg:#F5EDDF;--shadow:0 12px 40px #1b302019;--radius:18px;--control-radius:12px;background:var(--bg);font-family:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif}
body[data-surface=consumer][data-relaxation=on]{color-scheme:dark;--bg:#111013;--panel:#1D191D;--soft:#2D2029;--surface:#2D2029;--text:#F2ECEF;--muted:#AE9EA7;--line:#332830;--line-strong:#5A4352;--brand:#8E3B63;--on-brand:#FFFFFF;--brand-text:#BD7E9F;--tint:#2D2029;--poster:#2A222B;--poster-ink:#C7B4BE;--danger:#E9A0A0;--danger-bg:#3A2528;--success:#9CC7A8;--success-bg:#243027;--warning:#E4BA72;--warning-bg:#3A3021;--shadow:0 12px 40px #00000066}
body[data-session-suspended=true]{visibility:hidden}
/* Product masks stay neutral in both catalogue themes; retain each dialog's alpha. */
body[data-surface=consumer] dialog::backdrop{background:#00000070}
body[data-surface=consumer] .history-dialog::backdrop,body[data-surface=consumer] .ranking-dialog::backdrop{background:#00000080}
body[data-surface=consumer] .player-dialog::backdrop{background:#000000B8}
.consumer-header,.consumer-nav,.consumer-page{font-family:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif}
.consumer-header{height:80px;padding:0 max(24px,calc((100vw - 1030px)/2));border-color:var(--line);gap:22px}
.consumer-header .brand{min-height:44px}
.consumer-header .consumer-logo{object-fit:contain;flex:none;width:29px;height:29px}
.consumer-header .brand-name{font-size:24px;font-weight:600;letter-spacing:0}
.consumer-header .nav-button{font-size:14px;min-height:48px;gap:8px}
.consumer-language{min-width:44px;min-height:44px}
.consumer-catalog-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:56px;min-width:48px;min-height:48px;padding:0;border:0;background:transparent;color:var(--brand-text)}
.consumer-catalog-toggle svg{width:52px;height:36px;pointer-events:none;flex:none}
.consumer-catalog-toggle:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
.consumer-catalog-toggle:disabled{cursor:progress;opacity:.7}
.consumer-download-link,.consumer-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#fff;text-decoration:none;font-size:14px;font-weight:600}
.consumer-page{color:var(--text);max-width:1180px;margin:auto}
body[data-surface=consumer] .workspace{padding:24px max(20px,calc((100vw - 1180px)/2)) 28px}
.consumer-page h1{font-size:19px;font-weight:600;letter-spacing:0}
.consumer-page h2{font-weight:600}
.consumer-title-row{display:flex;align-items:center;justify-content:space-between}
.consumer-title-row .icon-button{width:44px;height:44px}
.consumer-actions-row{justify-content:flex-end}
.consumer-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin:70px auto 32px;max-width:340px}
.consumer-empty-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:var(--tint);color:var(--brand-text)}
.consumer-empty-icon svg{width:30px;height:30px}
.consumer-empty h2{font-size:19px;margin-top:6px}
.consumer-empty p{color:var(--muted);font-size:13px;line-height:1.65}
.consumer-empty .consumer-primary{margin-top:12px;width:100%}
.consumer-me{max-width:640px}
.consumer-profile{display:flex;align-items:center;gap:14px;padding:22px 0}
.consumer-profile>div{min-width:0;flex:1}
.consumer-profile h2{font-size:17px;overflow-wrap:anywhere}
.consumer-profile p{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.consumer-avatar{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:var(--tint);color:var(--brand-text)}
.consumer-avatar svg{width:27px;height:27px}
.consumer-profile .consumer-primary{margin-inline-end:auto;min-height:44px;flex:none;padding:10px 14px}
.consumer-action-list{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:0 18px;margin:14px 0}
.consumer-row{display:flex;align-items:center;text-align:left;width:100%;min-height:59px;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--text);background:transparent;font-size:14px;font-weight:500}
.consumer-row:last-child{border-bottom:0}
.consumer-row>span:nth-child(2){flex:1}
.consumer-row>span:first-child,.consumer-row>span:last-child{color:var(--muted)}
.consumer-quota{background:var(--brand);color:var(--on-brand);border-radius:18px;padding:20px;margin:8px 0 20px}
.consumer-quota p{font-size:12px;color:var(--on-brand)}
.consumer-quota strong{font-size:38px;font-weight:600}
.consumer-quota>span{font-size:14px;color:var(--on-brand)}
.consumer-settings-body{display:grid;gap:20px;min-width:0}
.consumer-settings-body .consumer-language-label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.consumer-settings-body .consumer-language-control{position:relative;flex:none;width:160px;max-width:60%;min-width:0;min-height:44px}
.consumer-settings-body .consumer-language-control select{display:block;appearance:none;-webkit-appearance:none;width:100%;min-height:44px;padding:8px 12px;padding-inline-end:40px;border-radius:10px;font-size:13px;font-weight:400}
.consumer-settings-body .consumer-language-control>svg{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.consumer-settings-body .consumer-region-preference{min-width:0;margin:0;padding:0;border:0}
.consumer-settings-body .consumer-region-title{padding:0;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--text)}
.consumer-settings-body .consumer-region-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--soft)}
.consumer-settings-body .consumer-region-choice{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:8px 6px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;line-height:1.4;font-weight:500;cursor:pointer}
.consumer-settings-body .consumer-region-choice:has(input:checked){background:var(--panel);color:var(--brand-text)}
.consumer-settings-body .consumer-region-choice:has(input:focus-visible){border-color:var(--brand-text)}
.consumer-settings-body .consumer-region-choice input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.consumer-settings-body .consumer-region-choice span{min-width:0;text-align:center;overflow-wrap:anywhere}
.consumer-settings-body .consumer-region-hint{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.consumer-auth{max-width:420px;width:calc(100% - 32px);margin:auto;border-radius:24px;box-shadow:none}
.consumer-auth .dialog-heading{border-bottom:0}
.consumer-auth .icon-button{width:44px;height:44px}
.consumer-auth-body{padding:26px 27px 44px}
.consumer-auth-body .brand{font-size:25px;font-weight:600;margin-bottom:30px}
.consumer-auth-body .consumer-logo{object-fit:contain}
.consumer-auth-body h1{font-size:29px;margin-bottom:28px}
.consumer-auth-body p{font-size:13px;color:var(--muted)}
.consumer-page .drama-card,.consumer-page .drama-cover{box-shadow:none}
.consumer-search{display:flex;align-items:center;gap:8px;height:55px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:18px;padding:0 12px}
.consumer-search:focus-within{border-color:var(--brand-text)}
.consumer-search>svg,.consumer-search>[data-icon]{flex:none;color:var(--muted);width:20px;height:20px}
.consumer-search input{flex:1;width:0;min-width:0;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:14px;min-height:53px}
.consumer-search button{min-width:44px;min-height:44px;padding:9px 1px;color:var(--brand-text);background:transparent;border:0;font-size:12px;font-weight:600}
.consumer-search>svg,.consumer-search>[data-icon]{width:19px;height:19px}
.consumer-tags-row{display:flex;gap:8px;align-items:center;margin:0 0 20px;min-width:0}
.consumer-hot-tags{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;overscroll-behavior-x:contain}
.consumer-tag{flex:none;white-space:nowrap;padding:8px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:12px;min-height:44px;box-sizing:border-box}
.consumer-tag.selected{border-color:var(--brand-text);background:var(--brand);color:#fff}
/* Q2（LO 2026-10-19）：宽度不再写死成 44px —— 44px 只是触点下限，实际宽度随文案自适应，
   否则英文「Filters」会被裁掉（改前实测 scrollWidth 47 > clientWidth 42）。 */
.consumer-filter-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:auto;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:none;white-space:nowrap;box-sizing:border-box}
.consumer-filter-button svg{width:16px;height:16px;flex:none}
#consumerHome,#consumerQueryPage{max-width:910px;margin-left:auto;margin-right:auto}
body[data-surface=consumer] .skip-link{display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px}
.consumer-columns{display:grid;grid-template-columns:minmax(0,620px) minmax(220px,260px);justify-content:center;gap:30px}
.consumer-columns>div{min-width:0}
.consumer-list-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.consumer-list-heading h1{margin:0;font-size:19px}
.consumer-list-heading button{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:12px;color:var(--brand-text)}
.consumer-list-heading button svg{width:14px;height:14px}
.consumer-app-aside{position:sticky;top:8px;align-self:start;border-radius:18px;background:var(--tint);padding:23px}
.consumer-app-aside>img{object-fit:contain;margin-bottom:18px}
.consumer-app-aside h2{font-size:21px;margin-bottom:12px}
.consumer-app-aside p{color:var(--muted);font-size:12px;line-height:1.8;margin:8px 0 20px}
.consumer-app-aside [data-app-unreleased]{margin-bottom:0}
.consumer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.consumer-drama-card{min-width:0;box-shadow:none;content-visibility:auto;contain-intrinsic-size:auto 400px}
.consumer-poster{position:relative;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--poster);box-shadow:none}
.consumer-poster-play{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:12px;background:transparent}
.consumer-poster-play img{height:100%;width:100%;object-fit:cover;display:block;box-shadow:none}
.consumer-cover-fallback{display:grid;place-items:center;width:100%;height:100%;color:var(--poster-ink);font-size:40px;font-weight:500;background:var(--poster)}
.consumer-episode-count{position:absolute;left:8px;bottom:11px;padding:2px 5px;border-radius:5px;background:#000000B8;color:#fff;font-size:11px}
.consumer-heart{position:absolute;right:0;bottom:0;width:44px;height:44px;border:0;border-radius:0;padding:12px;display:grid;place-items:center;background:transparent;color:var(--brand-text);z-index:1}
.consumer-heart:before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--panel);border:1px solid var(--line-strong);z-index:-1}
.consumer-heart svg{width:19px;height:19px}
.consumer-heart.saved svg{fill:currentColor}
.consumer-card-title{display:block;text-align:left;color:var(--text);background:none;border:0;border-radius:0;padding:9px 0 0;min-height:44px;width:100%;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.consumer-card-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);min-height:18px;overflow:hidden;white-space:nowrap}
.consumer-card-meta .consumer-card-tags{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.consumer-card-meta .consumer-card-plays{flex:none;font-variant-numeric:tabular-nums}
.consumer-list-status{margin:20px 0 5px;color:var(--muted);font-size:12px;text-align:center;min-height:20px}
.consumer-list-empty{display:block;padding:75px 0;font-size:16px}
.consumer-list-footer{display:flex;justify-content:center;min-height:44px;margin:4px 0 18px}
.consumer-list-footer button{min-height:44px;font-size:12px}
.consumer-query-heading{margin:0 0 15px}
.consumer-query-chips{display:flex;flex-direction:column;gap:2px;min-width:0;margin-bottom:16px}
.consumer-query-chips:empty{display:none}
.consumer-chip-group{display:flex;align-items:center;gap:8px;min-width:0;height:44px}
.consumer-chip-group-label{flex:none;width:44px;font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap}
.consumer-chip-options{display:flex;align-items:center;gap:4px;min-width:0;flex:1;height:44px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab}
.consumer-chip-options::-webkit-scrollbar{display:none}
.consumer-chip-options.dragging,.consumer-chip-options.dragging .consumer-chip{cursor:grabbing;user-select:none}
.consumer-chip{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-width:44px;height:44px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:400;box-sizing:border-box;box-shadow:none}
.consumer-chip.selected{color:var(--brand-text);background:var(--tint)}
.consumer-chip:focus-visible{outline:2px solid var(--brand-text);outline-offset:-2px}
.consumer-all-tags{flex:none;color:var(--brand-text)}
.consumer-selected-tag{background:var(--tint);color:var(--brand-text)}
.consumer-tag-remove{flex:none;font-size:16px;line-height:1}
.consumer-filter-dialog{width:calc(100% - 32px);max-width:460px;border-radius:24px;background:var(--bg);box-shadow:none}
.consumer-filter-dialog .icon-button{width:44px;height:44px}
.consumer-filter-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.consumer-filter-dialog .dialog-heading{flex:none;position:relative}
.consumer-filter-dialog .dialog-body{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#consumerFilterGroups{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 3px}
.consumer-filter-actions,#consumerFilterHint{flex:none}
.consumer-filter-group{border:0;padding:0;margin:4px 0 12px;min-width:0}
.consumer-filter-group legend{font-size:12px;font-weight:600;margin-bottom:10px}
.consumer-filter-tag-search{display:flex;align-items:center;min-height:44px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.consumer-filter-tag-search input{flex:1;width:100%;min-width:0;min-height:42px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--text);font-size:13px}
.consumer-filter-tag-search:focus-within{border-color:var(--brand-text)}
.consumer-filter-tag-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.consumer-filter-tag-empty{margin:0;color:var(--muted);font-size:12px}
.consumer-filter-tag-empty[hidden]{display:none}
.consumer-filter-tag-status{display:flex;justify-content:space-between;gap:8px;margin:0 0 12px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.consumer-filter-selected-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0;margin-top:12px}
.consumer-filter-selected-tags[hidden]{display:none}
.consumer-filter-choices{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.consumer-filter-choices button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font-size:12px;padding:8px 12px;min-height:44px;box-shadow:none}
.consumer-filter-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.consumer-filter-choices button.selected{color:var(--brand-text);background:var(--tint);border-color:var(--line-strong)}
.consumer-filter-actions{display:flex;gap:10px;margin-top:20px}
.consumer-filter-actions>*{flex:1;min-height:48px}
#consumerFilterHint{color:var(--muted);font-size:12px;min-height:20px}
.consumer-skeleton{aspect-ratio:3/4;border-radius:12px;background:var(--poster)}
@media(max-width:900px){.consumer-columns{grid-template-columns:minmax(0,720px)}.consumer-app-aside{display:none}}
@media(min-width:901px){.consumer-poster{height:335px;aspect-ratio:auto}}
@media(max-width:700px){.consumer-search{height:48px;margin-bottom:14px;padding:0 12px}.consumer-search input{min-height:46px;font-size:14px}.consumer-tags-row{margin-bottom:20px}.consumer-tag{font-size:12px;padding:8px 13px;min-height:44px}.consumer-filter-button{min-width:44px;height:44px;padding:0 12px}.consumer-grid{gap:19px 12px}.consumer-card-title{font-size:14px;padding-top:9px;min-height:44px}.consumer-card-meta{font-size:11px}.consumer-list-heading{margin-bottom:13px}.consumer-list-heading h1{font-size:19px}.consumer-list-heading button{font-size:12px}.consumer-episode-count{font-size:10px}.consumer-query-heading{margin-bottom:10px}.consumer-filter-dialog{margin-top:auto;margin-bottom:0;width:100%;max-width:600px;border-radius:24px 24px 0 0}
.consumer-query-heading h1{font-size:19px}}
@media(max-width:700px){.consumer-header{height:58px;padding:0 20px;gap:8px}.consumer-header .brand-name{font-size:22px}.consumer-header .consumer-logo{width:29px;height:29px}.consumer-header .header-actions #refreshBtn{display:none}.consumer-header #openAccountBtn{display:none}.consumer-header .consumer-download-link{display:none}.consumer-header .consumer-language{font-size:12px;min-width:44px;min-height:44px}.consumer-header .consumer-catalog-toggle{min-width:48px;width:56px;padding:0}.consumer-header .header-actions{gap:0}.consumer-header .header-menu>summary{width:44px;height:44px}.consumer-nav{background:var(--panel);border-color:var(--line);padding:8px 10px calc(12px + env(safe-area-inset-bottom))}.consumer-nav .nav-button{min-height:48px;font-size:10px;gap:3px;color:var(--muted)}.consumer-nav .nav-button[aria-current=page]{color:var(--brand-text);font-weight:600}.consumer-nav svg{width:22px;height:22px}.consumer-nav .nav-button[aria-current=page] svg{stroke-width:2.2}body[data-surface=consumer] .workspace{padding:14px 20px 24px}.consumer-page h1{margin:2px 0 8px}.consumer-empty{margin-top:72px}.consumer-me{max-width:none}}
@media(max-width:360px){.consumer-header{padding-left:14px;padding-right:14px}.consumer-header .brand-name{font-size:20px}body[data-surface=consumer] .workspace{padding-left:14px;padding-right:14px}}


@media(max-width:700px){.consumer-drama-card{contain-intrinsic-size:auto 290px}}
.consumer-auth label{display:block;font-size:12px;font-weight:600;margin:20px 0 8px}
.consumer-auth input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;color:var(--text);font-size:15px}
#consumerAuthOTP{font-size:25px;letter-spacing:12px;font-variant-numeric:tabular-nums}
#consumerAuthRegistrationHint{font-size:11px;margin:9px 0 22px}
#consumerAuthEmailSummary,#consumerAuthAccountEmail{overflow-wrap:anywhere;margin:0 0 15px}
.consumer-auth .consumer-primary{width:100%;margin:16px 0 0}
.consumer-auth-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.consumer-account-dialog{width:calc(100% - 32px);max-width:540px;margin:auto;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:none;max-height:calc(100dvh - 32px);overflow:auto}
.consumer-account-dialog h1{font-size:20px;margin:0}.consumer-account-dialog h2{font-size:16px;margin:22px 0 12px}
.consumer-account-dialog p{line-height:1.6;overflow-wrap:anywhere}.consumer-account-dialog #consumerAccountStatus{font-size:13px;color:var(--brand-text);min-height:21px;margin:10px 0}
.consumer-account-dialog button{min-height:44px;box-shadow:none}.consumer-account-dialog button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.consumer-account-dialog form{display:grid;gap:12px;margin:18px 0}.consumer-account-dialog label{font-size:13px;font-weight:600}
.consumer-account-dialog input{min-height:48px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);color:var(--text);font-size:16px}
.consumer-account-email{font-weight:600}.consumer-account-meta{color:var(--muted);font-size:12px;margin:4px 0}
.consumer-account-sessions{list-style:none;padding:0;margin:0 0 14px}.consumer-account-session{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.consumer-account-session>div{flex:1;min-width:0}.consumer-account-session strong{font-size:14px}.consumer-account-session p{font-size:12px;margin:5px 0}.consumer-account-session button{flex:none}
.consumer-account-actions{display:grid;gap:12px;margin-top:24px}.consumer-account-dialog #consumerAccountContent>button{margin:8px 8px 0 0}
@media(max-width:480px){.consumer-account-dialog{padding:18px}.consumer-account-session{align-items:flex-start;flex-direction:column;gap:8px}.consumer-account-session button{align-self:flex-start}}
.consumer-auth-links button{min-height:44px;padding:10px 0;font-size:12px;color:var(--brand-text)}
#consumerAuthStatus{min-height:20px;margin-top:15px}
#consumerAuthAccount button{width:100%;min-height:48px;margin-top:15px}
#followingPage{max-width:910px}
.consumer-following-heading-actions{display:flex;align-items:center;gap:4px}
.consumer-following-toolbar{display:flex;align-items:center;gap:16px;margin:12px 0 20px;min-width:0}
.consumer-following-toolbar>input{flex:1;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13px}
.consumer-following-grid{max-width:620px;margin:auto}
.consumer-following-card .following-cover{width:100%;height:100%;display:grid;place-items:center;background:var(--poster);border:0;border-radius:0;color:var(--poster-ink);font-size:40px}
.consumer-following-card .following-cover img{width:100%;height:100%;object-fit:cover;box-shadow:none}
.consumer-following-card .consumer-card-meta{white-space:normal}
.consumer-following-empty,.consumer-following-more{grid-column:1/-1}
.consumer-following-error:empty{display:none}
.consumer-following-error{color:var(--danger);font-size:12px;margin:12px 0}
.consumer-following-remove{font-size:12px;min-height:44px;background:none;border:0;color:var(--brand-text);padding:10px 0}
.consumer-following-more{justify-self:center;min-height:44px;margin:10px 0;background:none;color:var(--brand-text)}
.consumer-update{font-size:11px;color:var(--brand-text);margin-top:5px}
#consumerHomeContinue,#consumerFollowingContinue{max-width:620px;margin:0 auto 20px}
.consumer-continue{display:flex;align-items:center;text-align:left;gap:12px;background:var(--tint);border:1px solid var(--line);color:var(--text);border-radius:16px;padding:12px;width:100%;min-height:90px}
.consumer-continue .following-cover{width:48px;height:64px;flex:none;border:0;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--poster)}
.consumer-continue .following-cover img{width:100%;height:100%;object-fit:cover}
.consumer-continue-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.consumer-continue-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.consumer-continue-copy>span{font-size:11px;color:var(--muted)}
.consumer-continue>svg{width:20px;height:20px;flex:none;color:var(--brand-text)}
@media(max-width:700px){.consumer-following-toolbar{margin:12px 0 18px}.consumer-following-toolbar>input{width:100%}.consumer-following-card .following-cover{font-size:32px}}

.consumer-player-return{display:flex;align-items:center;gap:12px;width:calc(100% - 40px);max-width:1180px;margin:14px auto 0;padding:12px 16px;background:var(--tint);border:1px solid var(--line);border-radius:14px;color:var(--text)}
.consumer-player-return[hidden],body[data-surface=admin] .consumer-player-return{display:none}
.consumer-player-return>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600}
.consumer-player-return .consumer-primary{min-height:44px;padding:9px 12px;font-size:12px;flex:none}
.consumer-player-return .icon-button{flex:none;width:44px;height:44px}

body[data-surface=consumer] .history-dialog{border-radius:18px;background:var(--panel);color:var(--text)}
body[data-surface=consumer] .history-dialog button{min-height:44px}
body[data-surface=consumer] .history-empty .consumer-primary{display:flex;max-width:220px;margin:18px auto 0}
body[data-surface=consumer] .history-dialog .history-row{min-height:80px}

.consumer-invite-dialog{width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 32px);margin:auto;padding:20px;border-radius:20px;box-shadow:none;overscroll-behavior:contain}
.consumer-invite-dialog .dialog-heading{padding:0 0 12px;border:0;gap:12px}
.consumer-invite-dialog .dialog-heading h1{font-size:22px;margin:0}
.consumer-invite-dialog button{min-height:44px}
#consumerReferralStatus{font-size:13px;color:var(--muted);min-height:20px;margin:4px 0 12px}
#consumerReferralContent{display:grid;gap:16px}
#consumerReferralContent h2{font-size:15px;margin:0}
.consumer-invite-rules,.consumer-invite-code,.consumer-invite-record{display:grid;gap:8px;border:1px solid var(--line);padding:16px;border-radius:14px;background:var(--panel)}
.consumer-invite-rules{background:var(--tint)}
.consumer-invite-code>strong{font-family:ui-monospace,SFMono-Regular,monospace;font-size:clamp(12px,4vw,17px);overflow-wrap:anywhere;letter-spacing:.01em}
.consumer-invite-record>span{font-size:13px;color:var(--brand-text)}
.consumer-invite-record p,.consumer-invite-rules p,.consumer-invite-hint{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
#consumerReferralContent label{display:grid;gap:8px;font-size:13px}
#consumerReferralContent form{display:grid;gap:12px}
#consumerReferralContent form[hidden]{display:none}
#consumerReferralContent input,#consumerReferralContent textarea{width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:16px}
#consumerReferralContent input[readonly]{font-size:12px}
.consumer-invite-dialog :not(input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.consumer-danger{min-height:44px;border:1px solid var(--danger);background:var(--panel);color:var(--danger);border-radius:8px;padding:10px 16px;font:inherit;cursor:pointer}.consumer-danger:disabled{opacity:.55;cursor:default}.consumer-delete-consent{display:flex;align-items:center;gap:12px;min-height:48px;margin:20px 0;cursor:pointer}.consumer-delete-consent input{flex:none;min-height:24px;width:24px;margin:0}#consumerDeleteContent{display:grid;gap:16px}#consumerDeleteContent p{margin:0}#consumerDeleteContent form{display:grid;gap:12px}#consumerDeleteContent input[type=text]{min-height:48px;font-size:1rem;padding:12px;border:1px solid var(--line);border-radius:8px;width:100%}#consumerDeleteContent button{min-height:44px}#consumerDeletePanel{overscroll-behavior:contain}
:is(.consumer-feedback-dialog,.consumer-feedback-page) select,:is(.consumer-feedback-dialog,.consumer-feedback-page) textarea{width:100%;box-sizing:border-box;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:16px}
:is(.consumer-feedback-dialog,.consumer-feedback-page) textarea{resize:vertical}
.consumer-auth input:focus,.consumer-account-dialog input:focus,.consumer-following-toolbar>input:focus,#consumerReferralContent :is(input,textarea):focus,#consumerDeleteContent input[type=text]:focus,:is(.consumer-feedback-dialog,.consumer-feedback-page) :is(select,textarea):focus{border-color:var(--brand-text)}
:is(.consumer-feedback-dialog,.consumer-feedback-page) #consumerFeedbackStatus{min-height:21px;font-size:13px;color:var(--brand-text)}
.consumer-feedback-records{list-style:none;padding:0;margin:12px 0}.consumer-feedback-record{padding:16px 0;border-bottom:1px solid var(--line)}
.consumer-feedback-text,.consumer-feedback-reply{white-space:pre-wrap}.consumer-feedback-reply{padding:12px;background:var(--surface);border-radius:12px}
.consumer-feedback-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.consumer-auth #consumerAuthConsent{display:grid;gap:2px;margin:14px 0 0;text-align:left}
.consumer-auth .consumer-consent-check{position:relative;display:flex;align-items:center;min-height:44px;padding-left:52px;font-size:12px;font-weight:400;cursor:pointer}
.consumer-auth .consumer-consent-check::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;transform:translateY(-50%);border:1.5px solid var(--line);border-radius:5px;background:var(--panel);box-sizing:border-box}
.consumer-auth .consumer-consent-check::after{content:"";position:absolute;left:5px;top:13px;width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .15s ease}
.consumer-auth .consumer-consent-check:has(input:checked)::before{border-color:var(--brand-text);background:var(--brand)}
.consumer-auth .consumer-consent-check:has(input:checked)::after{transform:rotate(-45deg) scale(1)}
.consumer-auth .consumer-consent-check:has(input:disabled)::before{opacity:.55}
.consumer-auth .consumer-consent-check:has(input:focus-visible)::before{border-color:var(--brand-text)}
.consumer-auth .consumer-consent-check input{position:absolute;left:0;top:0;width:44px;min-height:44px;height:44px;margin:0;opacity:0}
.consumer-auth .consumer-legal-links{display:flex;gap:14px;padding-left:28px}.consumer-auth .consumer-legal-links button{min-height:44px;padding:0;color:var(--brand-text);font-size:12px}

.consumer-query-notice { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.consumer-query-notice:empty { display: none; }

body[data-surface=consumer] .consumer-search input,body[data-surface=consumer] .consumer-following-toolbar>input{color:var(--text)}
body[data-surface=consumer] .consumer-page input::placeholder,body[data-surface=consumer] .consumer-page textarea::placeholder{color:var(--muted);opacity:1}
body[data-surface=consumer] dialog{color:var(--text);background:var(--panel)}
body[data-surface=consumer] .consumer-auth,body[data-surface=consumer] .consumer-filter-dialog{background:var(--bg)}
body[data-surface=consumer] .consumer-page .dialog-heading,body[data-surface=consumer] .consumer-page .dialog-body{background:transparent}
#consumerRelaxPanel{position:fixed;inset:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));margin:auto;width:min(460px,calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));height:fit-content;max-width:460px;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:22px;padding-bottom:0;box-shadow:var(--shadow)}
#consumerRelaxPanel .dialog-heading{position:static;padding:24px 24px 0;border-bottom:0}
#consumerRelaxPanel .consumer-relax-symbol{width:32px;height:32px;fill:none;stroke:var(--brand-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#consumerRelaxPanel .dialog-body{padding:20px 24px 24px;overflow-y:auto;overscroll-behavior:contain}
#consumerRelaxTitle{font-size:22px;line-height:1.35;margin:0 0 12px}
#consumerRelaxHint{font-size:15px;line-height:1.6;margin:0;color:var(--muted)}
#consumerRelaxPanel .consumer-filter-actions{margin-top:28px}
#consumerRelaxPanel .consumer-primary{color:var(--on-brand)}

/* F2: standalone consumer watch history (prototype watchHistory()).
   Reuses the panel/theme variables and the consumer cover chain. */
.consumer-history-bar{margin-bottom:4px}
.consumer-history-today{margin:10px 0 4px;font-size:13px;font-weight:600;color:var(--muted)}
.consumer-history-list{list-style:none;margin:0;padding:0;max-width:620px}
.consumer-history-row{border-bottom:1px solid var(--line)}
.consumer-history-main{display:flex;gap:12px;align-items:center;width:100%;min-height:77px;padding:10px 4px;text-align:left;background:transparent;border:0;color:var(--text);cursor:pointer}
.consumer-history-main:disabled{cursor:default;opacity:.7}
.consumer-history-poster{flex:0 0 57px;width:57px;aspect-ratio:57/77;border-radius:8px;overflow:hidden;background:var(--poster);display:flex;align-items:center;justify-content:center}
.consumer-history-poster img{width:100%;height:100%;object-fit:cover;display:block}
.consumer-history-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.consumer-history-name{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.consumer-history-meta{font-size:13px;color:var(--muted)}
.consumer-history-end{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.consumer-empty-line{margin:40px 0;text-align:center;color:var(--muted)}

/* Accepted consumer auth/account composition. These tokens also cover portals. */
.consumer-me{display:flex;flex-direction:column;min-height:calc(100dvh - 180px);padding-bottom:12px}
.consumer-me[hidden]{display:none}
.consumer-me-title{font-size:24px!important;line-height:1.3;margin:6px 0 26px!important}
.consumer-signin-card{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;width:100%;min-height:128px;padding:22px 24px;overflow:hidden;text-align:left;border:1px solid var(--line);border-radius:22px;background:var(--tint);color:var(--text);box-shadow:none;margin-bottom:12px}
.consumer-signin-card:before,.consumer-signin-card:after{content:'';position:absolute;right:-50px;width:170px;height:130px;border:1px solid #d5b86b66;border-radius:50%;transform:rotate(35deg);z-index:-1;pointer-events:none}
.consumer-signin-card:before{top:-88px}.consumer-signin-card:after{bottom:-106px;right:-25px}
.consumer-signin-card>.consumer-logo{width:44px;height:44px;object-fit:contain;flex:none}
.consumer-signin-card>span:nth-child(2){flex:1;min-width:0;display:grid;gap:8px}
.consumer-signin-card strong{font-size:18px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
.consumer-signin-card small{font-size:12px;line-height:1.6;color:var(--muted)}
.consumer-signin-arrow{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1px solid var(--line-strong);border-radius:50%;color:var(--brand-text)}
.consumer-signin-arrow svg{width:16px;height:16px}
.consumer-profile{padding:0 0 20px;gap:16px}.consumer-profile h2{font-size:21px;line-height:1.35;margin:3px 0}.consumer-profile p{margin:0;line-height:1.6}.consumer-profile .consumer-profile-greeting{margin:0 0 3px}
.consumer-avatar{width:56px;height:56px;color:var(--on-brand);background:var(--brand);border:4px solid var(--tint)}
.consumer-quota{color:var(--brand-text);background:var(--tint);padding:18px 20px;margin:0 0 6px;border:1px solid var(--line)}
.consumer-quota p,.consumer-quota>span{color:var(--muted)}.consumer-quota p{margin:0 0 3px}.consumer-quota strong{font-size:30px}.consumer-quota>span{font-size:12px}
.consumer-action-list{margin:16px 0;padding:0 18px;border-radius:20px}.consumer-row{min-height:55px;font-size:14px;line-height:1.45;padding:13px 0}.consumer-row>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.consumer-profile-signout{display:flex;align-items:center;text-align:left;gap:12px;min-height:56px;margin-top:auto;padding:14px 18px;border:1px solid var(--danger-bg);border-radius:17px;color:var(--danger);background:transparent;box-shadow:none;font-size:14px}
.consumer-profile-signout>span:nth-child(2){flex:1}.consumer-profile-signout svg{width:20px;height:20px}.consumer-profile-signout>span:last-child svg{width:16px;height:16px}
.consumer-profile-auth-status{font-size:12px;line-height:1.7;color:var(--muted);margin:8px 0 12px}
.consumer-signin-card:focus-visible,.consumer-profile-signout:focus-visible{outline:2px solid var(--brand-text);outline-offset:3px}
.consumer-auth{width:calc(100% - 48px);max-width:860px;max-height:calc(100dvh - 48px);padding:0;overflow:auto;border:1px solid var(--line);border-radius:28px;background:var(--bg);box-shadow:none}
.consumer-auth-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);min-height:610px}
.consumer-auth-hero{position:relative;min-width:0;background:var(--tint) url('/assets/consumer-login-hero.png') center/cover no-repeat;overflow:hidden}
.consumer-auth-hero .brand{display:none}
.consumer-auth-body{position:relative;min-width:0;padding:42px 32px 30px;background:var(--bg)}
.consumer-auth-body h1{font-size:32px;line-height:1.2;margin:0 0 12px;letter-spacing:-.6px}
#consumerAuthSubtitle{white-space:pre-line;line-height:1.75;font-size:13px;margin:0 0 28px;color:var(--muted)}
.consumer-outlined-email{position:relative;min-height:56px;margin-top:8px;background:transparent;border-radius:14px}
.consumer-auth .consumer-outlined-email>input{position:relative;z-index:1;display:block;height:56px;min-height:56px;width:100%;padding:16px 16px 16px 46px;border:0;border-radius:14px;background:transparent;color:var(--text);font-size:15px;box-shadow:none;outline:none;animation:consumer-email-clear .001s}
.consumer-auth #consumerAuthOTP{min-height:56px;background:transparent;box-shadow:none}
.consumer-outlined-email>.consumer-email-icon{position:absolute;z-index:1;left:17px;top:20px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.consumer-outlined-email>.consumer-email-outline{position:absolute;z-index:2;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;color:var(--line);stroke-linecap:butt;pointer-events:none}
.consumer-auth .consumer-outlined-email>label{position:absolute;z-index:3;left:46px;top:50%;transform:translateY(-50%);transform-origin:center;margin:0;padding:0;background:transparent;font-size:15px;line-height:18px;font-weight:400;white-space:nowrap;color:var(--muted);pointer-events:none;transition:none}
.consumer-outlined-email:has(input:focus)>label,.consumer-outlined-email:has(input:focus)>.consumer-email-outline{color:var(--brand-text)}
body[data-surface=consumer] .consumer-auth .consumer-outlined-email>input::placeholder{opacity:0;color:var(--muted);transition:none}
body[data-surface=consumer] .consumer-auth .consumer-outlined-email[data-email-placeholder=true]>input:focus::placeholder{opacity:1}
/* State notifications only: no visible effect and no second title/outline clock. */
@keyframes consumer-email-clear{from{outline-offset:0}to{outline-offset:0}}
@keyframes consumer-email-autofill{from{outline-offset:0}to{outline-offset:0}}
.consumer-auth .consumer-outlined-email>input:autofill{animation-name:consumer-email-autofill}
.consumer-auth :is(#consumerAuthEmail,#consumerAuthOTP):autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);background-clip:text;-webkit-background-clip:text}
#consumerAuthRegistrationHint{font-size:12px;line-height:1.7;margin:10px 0 20px}
.consumer-auth #consumerAuthConsent{display:flex;align-items:center;flex-wrap:wrap;gap:0 5px;margin:10px 0 0}
.consumer-auth .consumer-consent-check{display:inline-flex;min-height:44px;margin:0;padding-left:28px;font-size:12px;line-height:1.6;font-weight:400}
.consumer-auth .consumer-consent-check:before{width:18px;height:18px}.consumer-auth .consumer-consent-check:after{left:4px;top:17px;width:10px;height:6px}
.consumer-auth .consumer-consent-check input{width:44px;min-height:44px;height:44px}
.consumer-auth .consumer-legal-links{display:flex;align-items:center;gap:5px;padding-left:0;font-size:12px;color:var(--muted)}
.consumer-auth .consumer-legal-links button{min-width:44px;min-height:44px;font-weight:600}
.consumer-auth .consumer-primary{min-height:56px;margin-top:18px;border-radius:13px;font-size:15px}
.consumer-auth .consumer-primary:disabled{color:var(--muted);background:var(--tint);border-color:var(--tint);opacity:1}
#consumerAuthStatus{font-size:12px;line-height:1.6;margin:12px 0 0;min-height:20px}
.consumer-auth-explore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin-top:10px;padding:10px;color:var(--muted);font-size:12px}
.consumer-auth-explore svg{width:14px;height:14px}
.consumer-danger-outline{color:var(--danger);background:transparent;border:1px solid var(--danger-bg)}
body[data-relaxation=on] .consumer-auth-hero{background-image:linear-gradient(145deg,#1A1420 5%,#34202F 46%,#6E2E51 100%)}
body[data-relaxation=on] .consumer-auth-hero:before,body[data-relaxation=on] .consumer-auth-hero:after{content:'';position:absolute;width:130%;height:55%;border:1px solid #e3bd7770;border-radius:50%;transform:rotate(-28deg);right:-44%;top:-10%;background:linear-gradient(140deg,#b45e8340,transparent 70%);pointer-events:none}
body[data-relaxation=on] .consumer-auth-hero:after{right:25%;top:70%}
body[data-relaxation=on] .consumer-auth-hero .brand{display:flex;position:absolute;left:30px;bottom:38px;color:var(--text);font-size:25px;font-weight:600;gap:12px}
.consumer-auth-hero .consumer-logo{width:44px;height:44px;object-fit:contain}
.consumer-brand-dialog{position:relative;width:calc(100% - 32px);max-width:390px;max-height:calc(100dvh - 32px);margin:auto;padding:30px 26px 20px;overflow:auto;border:1px solid var(--line);border-radius:25px;background:var(--bg);color:var(--text);box-shadow:none;text-align:center}
.consumer-brand-dialog .consumer-dialog-close{position:absolute;right:8px;top:8px;width:44px;height:44px;min-height:44px;padding:12px;border:0;color:var(--muted);background:transparent}
.consumer-brand-vignette{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 22px;border:1px solid var(--line);border-radius:23px;background:var(--tint);overflow:hidden}
.consumer-brand-vignette:before{content:'';position:absolute;width:90px;height:42px;right:-39px;top:-28px;border:1px solid #d5b86b88;border-radius:50%;transform:rotate(30deg)}
.consumer-brand-vignette>.consumer-logo{width:42px;height:42px;object-fit:contain}
.consumer-brand-dialog h2{font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.4px;margin:0 0 12px;overflow-wrap:anywhere}
.consumer-brand-dialog p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 22px;overflow-wrap:anywhere;text-wrap:balance}
.consumer-dialog-primary{display:flex;justify-content:space-between;gap:12px;width:100%;min-height:50px;border-radius:13px;margin:0;font-size:14px;padding:13px 17px}
.consumer-dialog-primary svg{width:18px;height:18px;flex:none}
.consumer-dialog-secondary{display:block;width:100%;min-height:44px;margin-top:5px;padding:10px;background:none;border:0;color:var(--muted);font-size:12px}
.consumer-confirm-actions{display:flex;gap:10px}.consumer-confirm-actions>button{flex:1;min-width:0;min-height:48px;border-radius:13px;font-size:13px;white-space:normal;line-height:1.4;padding:12px}
.consumer-confirm-actions>.secondary{color:var(--text);background:var(--tint);border-color:var(--line)}
.consumer-brand-dialog[data-danger=true] #consumerPromptConfirm{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-bg)}
.consumer-brand-dialog button:focus-visible{outline:2px solid var(--brand-text);outline-offset:3px}
.consumer-entry{position:fixed;inset:0;z-index:100000;overflow:hidden;background:linear-gradient(135deg,#153C2D,#1B111A 65%);color:#FFF1D5}
.consumer-entry>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;animation:none;transition:none}
.consumer-entry>p{position:absolute;left:50%;transform:translateX(-50%);width:210px;max-width:86%;margin:0;text-align:center;font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:600;color:#FFF1D5;white-space:pre-line;animation:none;transition:none}
@media(min-width:701px){.consumer-entry>img{object-fit:contain}}
@media(max-width:700px){.consumer-auth{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.consumer-auth-layout{display:block;min-height:100%}.consumer-auth-hero{height:226px;background-position:center top}.consumer-auth-hero .brand,body[data-relaxation=on] .consumer-auth-hero .brand{position:absolute;display:flex;align-items:center;left:28px;bottom:40px;gap:12px;font-size:24px;font-weight:600;color:#153F30}.consumer-auth-body{min-height:calc(100dvh - 200px);padding:32px 28px 24px;margin-top:-26px;border-radius:28px 28px 0 0}.consumer-auth-body h1{margin:0 0 12px;font-size:32px}body[data-relaxation=on] .consumer-auth-hero .brand{color:var(--text)}.consumer-me{min-height:calc(100dvh - 180px)}.consumer-me-title{margin:4px 0 24px!important}.consumer-signin-card{padding:20px;gap:14px}.consumer-action-list{margin:16px 0}.consumer-profile-signout{margin-top:auto}}
@media(max-height:680px) and (max-width:700px){.consumer-auth-hero{height:180px}.consumer-auth-hero .brand,body[data-relaxation=on] .consumer-auth-hero .brand{bottom:38px}.consumer-auth-body{min-height:calc(100dvh - 154px);padding-top:28px}}
@media(max-width:360px){.consumer-auth-body{padding-left:24px;padding-right:24px}.consumer-auth-hero .brand{left:24px}.consumer-brand-dialog{padding:28px 22px 18px}.consumer-brand-dialog h2{font-size:22px}.consumer-me-title{font-size:23px!important}}


/* Approved layout A: names/counts stay inline; whole chips wrap in the vertical panel. */
.consumer-tag-count{flex:none;font-size:10px;line-height:1;padding:2px 5px;border-radius:999px;font-variant-numeric:tabular-nums;
  background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.consumer-tag-count[data-size=medium]{color:var(--brand-text);border-color:var(--brand);background:transparent}
.consumer-tag-count[data-size=large]{color:#fff;background:var(--brand);border-color:var(--brand)}

/* The frame is a flex column: the nav reserves its full height in normal flow.
   Each bottom-anchored surface consumes the safe-area inset exactly once. */
body[data-surface=consumer]{--consumer-safe-top:env(safe-area-inset-top,0px);--consumer-safe-right:env(safe-area-inset-right,0px);--consumer-safe-bottom:env(safe-area-inset-bottom,0px);--consumer-safe-left:env(safe-area-inset-left,0px);--consumer-page-inset:20px;--consumer-bottom-space:24px;--consumer-nav-bottom:12px;--consumer-sheet-bottom:16px;--consumer-header-height:56px;--consumer-header-hit:44px;--consumer-header-icon:24px;--consumer-header-gap:8px}
body[data-surface=consumer] .consumer-page-header{display:flex;align-items:center;gap:var(--consumer-header-gap);height:var(--consumer-header-height);min-height:var(--consumer-header-height)}
body[data-surface=consumer] .consumer-page-header>h1{flex:1;min-width:0;margin:0;color:var(--text);font-size:19px;font-weight:600;line-height:27px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body[data-surface=consumer] .consumer-page-header>button{flex:none;min-height:var(--consumer-header-hit)}
body[data-surface=consumer] .consumer-page-back,body[data-surface=consumer] .consumer-player-back{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--consumer-header-hit);height:var(--consumer-header-hit);min-width:var(--consumer-header-hit);min-height:var(--consumer-header-hit);padding:0}
body[data-surface=consumer] .consumer-page-back{color:var(--text)}
body[data-surface=consumer] .consumer-page-back svg,body[data-surface=consumer] .consumer-player-back svg{width:var(--consumer-header-icon);height:var(--consumer-header-icon);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-surface=consumer] .consumer-page-back svg{transform:none}
/* Ordinary dialogs retain close actions, with the same title and hit geometry. */
body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel,.consumer-account-dialog,.consumer-invite-dialog)>.dialog-heading{display:flex;align-items:center;gap:var(--consumer-header-gap);min-height:var(--consumer-header-height);padding-top:0;padding-bottom:0}
body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel,.consumer-account-dialog,.consumer-invite-dialog)>.dialog-heading>:is(h1,h2){flex:1;min-width:0;margin:0;font-size:19px;font-weight:600;line-height:27px}
body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel,.consumer-account-dialog,.consumer-invite-dialog)>.dialog-heading>.icon-button{width:var(--consumer-header-hit);height:var(--consumer-header-hit);min-width:var(--consumer-header-hit);min-height:var(--consumer-header-hit);padding:0;flex:none}
body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel,.consumer-account-dialog,.consumer-invite-dialog)>.dialog-heading>.icon-button svg{width:var(--consumer-header-icon);height:var(--consumer-header-icon)}
/* Centered dialogs fit the safe viewport; the inset belongs to the outer frame. */
body[data-surface=consumer] :is(.consumer-account-dialog,.consumer-invite-dialog,.consumer-brand-dialog){position:fixed;inset:calc(16px + var(--consumer-safe-top)) calc(16px + var(--consumer-safe-right)) calc(16px + var(--consumer-safe-bottom)) calc(16px + var(--consumer-safe-left));margin:auto;width:calc(100vw - 32px - var(--consumer-safe-left) - var(--consumer-safe-right));height:fit-content;max-height:calc(100dvh - 32px - var(--consumer-safe-top) - var(--consumer-safe-bottom))}
@media(max-width:700px){
  body[data-surface=consumer] .consumer-header{height:calc(58px + var(--consumer-safe-top));padding-top:var(--consumer-safe-top);padding-left:calc(var(--consumer-page-inset) + var(--consumer-safe-left));padding-right:calc(var(--consumer-page-inset) + var(--consumer-safe-right))}
  body[data-surface=consumer] .consumer-nav{flex:none;padding-bottom:calc(var(--consumer-nav-bottom) + var(--consumer-safe-bottom));padding-left:calc(10px + var(--consumer-safe-left));padding-right:calc(10px + var(--consumer-safe-right))}
  body[data-surface=consumer] .workspace{padding-bottom:var(--consumer-bottom-space);padding-left:calc(var(--consumer-page-inset) + var(--consumer-safe-left));padding-right:calc(var(--consumer-page-inset) + var(--consumer-safe-right))}
  body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel){padding-bottom:0}
  body[data-surface=consumer] :is(#infoPanel,#detailPanel,#consumerFilterPanel)>.dialog-body{padding-bottom:calc(var(--consumer-sheet-bottom) + var(--consumer-safe-bottom))}
  body[data-surface=consumer] .consumer-auth{padding-bottom:0}
  body[data-surface=consumer] .consumer-auth-body{padding-bottom:calc(var(--consumer-bottom-space) + var(--consumer-safe-bottom))}
}
@media(max-width:360px){body[data-surface=consumer]{--consumer-page-inset:14px}}

/* Shared feedback is attached to the component doing the work. */
.consumer-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.consumer-loading{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--brand-text);grid-column:1/-1}
.consumer-loading-ring,[data-loading=true]:after{display:inline-block;width:18px;height:18px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:consumer-loading-turn .8s linear infinite;flex:none}
[data-loading=true]:after{content:'';margin-left:8px;vertical-align:middle}
@keyframes consumer-loading-turn{to{transform:rotate(360deg)}}
.consumer-skeleton{aspect-ratio:auto;border-radius:0;background:none;display:block;list-style:none;pointer-events:none}
.consumer-skeleton-visual,.consumer-skeleton-copy>span{display:block;background:var(--poster);border-radius:8px}
.consumer-skeleton-card>.consumer-skeleton-visual{aspect-ratio:3/4;border-radius:12px}
.consumer-skeleton-copy{display:block;min-width:0;padding:12px 0}
.consumer-skeleton-copy>span{height:14px;margin-bottom:8px;width:85%}
.consumer-skeleton-copy>span+span{height:10px;width:55%}
.consumer-skeleton-row{display:flex;align-items:center;gap:14px;padding:14px 0}
.consumer-skeleton-row>.consumer-skeleton-visual{width:56px;height:72px;flex:none}
.consumer-skeleton-row>.consumer-skeleton-copy{flex:1}
.consumer-skeleton-panel{padding:16px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.consumer-skeleton-panel>.consumer-skeleton-visual{width:36%;height:18px}
.consumer-cover-loading{background:var(--poster)}
.consumer-chip-group[hidden]{display:none}
.consumer-filter-expand{flex:none;margin-left:auto}
.consumer-filter-selected-tags{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.consumer-account-page{max-width:640px;margin:0 auto}
.consumer-account-page h2{margin:0 0 14px;font-size:16px;line-height:24px}
.consumer-account-page p{line-height:1.6;overflow-wrap:anywhere}
.consumer-account-page button{min-height:44px}
.consumer-account-page form{display:grid;gap:16px;margin:18px 0}
.consumer-account-page label{font-size:13px;font-weight:600}
.consumer-account-page input{min-height:48px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);color:var(--text);font-size:16px}
.consumer-account-page input:focus{border-color:var(--brand-text)}
.consumer-account-group{margin:18px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.consumer-account-group .consumer-account-actions{margin-top:0}
.consumer-page-status,#consumerAccountStatus{font-size:13px;color:var(--brand-text);margin:8px 0;min-height:0}
.consumer-page-status:empty,#consumerAccountStatus:empty{display:none}
.consumer-feedback-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:13px}
.consumer-feedback-page .consumer-action-list{display:grid;gap:12px}
body[data-surface=consumer] :is(.consumer-page-back,.consumer-player-back){justify-content:flex-start;background:transparent;border:0;box-shadow:none;transition:none}
body[data-surface=consumer] :is(.consumer-page-back,.consumer-player-back):active{background:transparent;color:inherit;box-shadow:none;transform:none;filter:none}
body[data-surface=consumer] :is(.consumer-page-back,.consumer-player-back) svg,body[data-surface=consumer] :is(#mobileBackBtn,#editionChangeCloseBtn) svg{transform:none}
body[data-surface=consumer] dialog[data-motion=entering]::backdrop{animation:consumer-backdrop-in 240ms cubic-bezier(.32,.72,0,1) both}
body[data-surface=consumer] dialog[data-motion=exiting]::backdrop{animation:consumer-backdrop-out 180ms cubic-bezier(.32,.72,0,1) both}
@keyframes consumer-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes consumer-backdrop-out{from{opacity:1}to{opacity:0}}
body[data-surface=consumer] .mobile-player:is(.playback-loading,.playback-buffering) #playbackStatus:before{content:'';display:inline-block;width:16px;height:16px;border:2px solid var(--brand-text);border-right-color:transparent;border-radius:50%;vertical-align:middle;margin-right:8px;animation:consumer-loading-turn .8s linear infinite}
@media(min-width:901px){.consumer-skeleton-card>.consumer-skeleton-visual{height:335px;aspect-ratio:auto}}
@media(max-width:700px){body[data-surface=consumer] .consumer-page-header{margin-left:calc(-1 * var(--consumer-page-inset))}body[data-surface=consumer] .player-classic.mobile-player .mobile-player-heading,body[data-surface=consumer] .edition-change-header{padding-left:var(--consumer-safe-left)}.consumer-account-group{padding:18px}.consumer-account-page{max-width:none}}
@media(prefers-reduced-motion:reduce){.consumer-loading-ring,[data-loading=true]:after,body[data-surface=consumer] dialog[data-motion]::backdrop,body[data-surface=consumer] .mobile-player #playbackStatus:before{animation:none}}

body[data-surface=consumer] .consumer-player-back{color:#fff}
.consumer-catalog-toggle[data-loading=true]:after,.consumer-heart[data-loading=true]:after{position:absolute;inset:auto 0 0 auto;margin:0;width:14px;height:14px;color:var(--brand-text)}