/* Generated by scripts/generate-onlive-dark-colors.mjs. Dark-only color adapters; original layout and motion are untouched. */ @scope (.platform-ui[data-theme="dark"]) { :scope[data-theme="dark"] {--shadow:0 8px 24px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] {--shadow:0 14px 38px color-mix(in srgb,var(--onlive-shadow-color) 32%,transparent) } :scope[data-theme="dark"] { --card-light-shadow:0 1px 0 rgba(255,255,255,.96) inset,0 14px 28px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),0 2px 6px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .avatar {background:linear-gradient(145deg,var(--surface),var(--accent)) } :scope[data-theme="dark"] .hero {box-shadow:0 18px 50px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) } :scope[data-theme="dark"] .hero:before {background:radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 26%),linear-gradient(90deg,transparent 0 48%,rgba(255,255,255,.025) 48% 49%,transparent 49%) } :scope[data-theme="dark"] .hero:after {box-shadow:0 -34px 80px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) inset } :scope[data-theme="dark"] .eyebrow {color:var(--text) } :scope[data-theme="dark"] .hero p {color:var(--text) } :scope[data-theme="dark"] .heroQuote small {color:var(--muted) } :scope[data-theme="dark"] .metric {background:color-mix(in srgb,var(--surface) 38%,transparent) } :scope[data-theme="dark"] .metric small {color:var(--muted) } :scope[data-theme="dark"] .teamMark {background:linear-gradient(145deg,var(--surface),#fff) } :scope[data-theme="dark"] .odd:hover {border-color:var(--line) } :scope[data-theme="dark"] .odd.selected {outline:2px solid color-mix(in srgb,var(--line) 13%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent) } :scope[data-theme="dark"] .rankNo {color:var(--muted) } :scope[data-theme="dark"] .t0 {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .t1 {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .t2 {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .legendBanner {background:radial-gradient(circle at 86% 18%,var(--accent),transparent 34%),linear-gradient(115deg,var(--surface-elevated),var(--surface-elevated)) } :scope[data-theme="dark"] .liveThumb {background:radial-gradient(circle at 70% 30%,#3c6d6b,transparent 28%),linear-gradient(150deg,#0c4738,var(--surface)) } :scope[data-theme="dark"] .liveThumb.v1 {background:radial-gradient(circle at 70% 30%,var(--accent),transparent 28%),linear-gradient(150deg,var(--surface-elevated),var(--surface-elevated)) } :scope[data-theme="dark"] .liveThumb.v3 {background:radial-gradient(circle at 70% 30%,var(--accent),transparent 28%),linear-gradient(150deg,var(--surface),var(--surface)) } :scope[data-theme="dark"] .streak span:before {background:var(--surface) } :scope[data-theme="dark"] .referral {background:linear-gradient(130deg,var(--surface-elevated),var(--accent)) } :scope[data-theme="dark"] .referral p {color:var(--text) } :scope[data-theme="dark"] .homeHlPlay {background:color-mix(in srgb,var(--surface) 46%,transparent) } :scope[data-theme="dark"] .predictionCard .odd { box-shadow:0 1px 2px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .shopThumb.c0 {background:linear-gradient(145deg,var(--accent-primary),var(--surface)) } :scope[data-theme="dark"] .shopThumb.c2 {background:linear-gradient(145deg,var(--surface),var(--accent)) } :scope[data-theme="dark"] .shopThumb.c3 {background:linear-gradient(145deg,var(--surface),var(--accent)) } :scope[data-theme="dark"] .shopThumb.c4 {background:linear-gradient(145deg,var(--surface),var(--surface)) } :scope[data-theme="dark"] .tb-silver {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .tb-silver i {background:var(--accent) } :scope[data-theme="dark"] .tb-platinum {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .tb-platinum i {background:var(--accent) } :scope[data-theme="dark"] .tb-diamond {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .tb-diamond i {background:var(--accent) } :scope[data-theme="dark"] .tb-master {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .tb-master i {background:var(--accent) } :scope[data-theme="dark"] .tb-challenger {background:var(--surface) } :scope[data-theme="dark"] .tb-challenger i {color:var(--muted) } :scope[data-theme="dark"] .tb-silver {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .tb-platinum {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .tb-diamond {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .tb-master {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .partnerCard:hover {box-shadow:0 14px 28px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) } :scope[data-theme="dark"] .partnerOfficial {color:var(--accent) } :scope[data-theme="dark"] .navDrop {box-shadow:0 12px 28px color-mix(in srgb,var(--onlive-shadow-color) 10%,transparent),0 2px 8px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .boardTableWrap {box-shadow:0 8px 22px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .commentCount {color:var(--muted) } :scope[data-theme="dark"] .boardBadge, :scope[data-theme="dark"] .catLabel, :scope[data-theme="dark"] .postBadge, :scope[data-theme="dark"] .noticeCat { color:var(--muted) } :scope[data-theme="dark"] .boardBadge--category, :scope[data-theme="dark"] .catLabel {color:var(--muted) } :scope[data-theme="dark"] .boardBadge--info, :scope[data-theme="dark"] .noticeCat--안내 {color:var(--accent) } :scope[data-theme="dark"] .boardBadge--new, :scope[data-theme="dark"] .postBadge.new { background:var(--surface) } :scope[data-theme="dark"] .nenetvModal {background:color-mix(in srgb,var(--surface) 45%,transparent) } :scope[data-theme="dark"] .attendPage .attSummary {box-shadow:0 8px 24px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .attendStats article:hover {box-shadow:0 10px 24px color-mix(in srgb,var(--onlive-shadow-color) 6%,transparent) } :scope[data-theme="dark"] .bcPlayer {color:var(--text) } :scope[data-theme="dark"] .bcIframeFsBtn {background:color-mix(in srgb,var(--surface) 68%,transparent) } :scope[data-theme="dark"] .watchAffiliateCard { background:color-mix(in srgb,var(--surface) 90%,transparent) } :scope[data-theme="dark"] .bcPlaceholder small {color:var(--muted) } :scope[data-theme="dark"] .bcPlaceholder p {color:var(--text) } :scope[data-theme="dark"] .rkHero small {color:var(--text) } :scope[data-theme="dark"] .rkTop {--rk-accent:var(--accent) } :scope[data-theme="dark"] .attHero:before {background:radial-gradient(circle at 88% 16%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 28%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 70px) } :scope[data-theme="dark"] .attHeroStatus {background:color-mix(in srgb,var(--surface) 32%,transparent);color:var(--text) } :scope[data-theme="dark"] .attRankRow .attRankColRank.top2 {background:color-mix(in srgb,var(--accent) 22%,var(--surface));color:var(--muted) } :scope[data-theme="dark"] .attRankBadge.silver {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .attSideRow.top2 {background:color-mix(in srgb,var(--accent) 10%,transparent) } :scope[data-theme="dark"] .attActionIcon {border-color:color-mix(in srgb,var(--line) 24%,transparent) } :scope[data-theme="dark"] .attSectionBadge, :scope[data-theme="dark"] .attSummaryIcon, :scope[data-theme="dark"] .attBenefitIcon, :scope[data-theme="dark"] .attCalTitleIcon {background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--line) 26%,transparent) } :scope[data-theme="dark"] .attCalCard .calendar-day-cell.future, :scope[data-theme="dark"] .attStage .calendar-day-cell.future {color:var(--muted) } :scope[data-theme="dark"] .attCalCard .calendar-day-cell.muted, :scope[data-theme="dark"] .attStage .calendar-day-cell.muted {color:var(--muted) } :scope[data-theme="dark"] .attSideRow.top2 {background:color-mix(in srgb,var(--accent) 14%,var(--surface-elevated)) } :scope[data-theme="dark"] .evToolbarHead h2, :scope[data-theme="dark"] .evCard h3, :scope[data-theme="dark"] .evTeamSide b, :scope[data-theme="dark"] .evFacts dd, :scope[data-theme="dark"] .evSummaryFacts dd, :scope[data-theme="dark"] .evResultFacts dd {color:var(--text) } :scope[data-theme="dark"] .iconButton.themeToggle {border:1px solid color-mix(in srgb,var(--line) 80%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) } :scope[data-theme="dark"] .iconButton.themeToggle:hover {background:var(--surface);box-shadow:0 6px 16px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) } :scope[data-theme="dark"] .iconButton.themeToggle {color:var(--text) } :scope[data-theme="dark"] .teamCrest {background:linear-gradient(145deg,var(--accent),var(--accent)) } :scope[data-theme="dark"] .floatChat.is-desktop .floatChatBtn {background:linear-gradient(180deg,var(--accent),var(--accent));box-shadow:0 10px 22px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .floatChatPanel {box-shadow:0 22px 54px color-mix(in srgb,var(--onlive-shadow-color) 18%,transparent) } :scope[data-theme="dark"] .floatChatHead {color:var(--text) } :scope[data-theme="dark"] .floatChatBrand > span {color:color-mix(in srgb,var(--text) 62%,var(--surface-elevated)) } :scope[data-theme="dark"] .floatChatHead .linkBtn {color:color-mix(in srgb,var(--text) 72%,var(--surface-elevated)) } :scope[data-theme="dark"] .floatChatHead .iconButton {color:var(--text) } :scope[data-theme="dark"] .neneChatHeaderLink {border:1px solid var(--line) } :scope[data-theme="dark"] .neneChatHeaderLink:hover {background:var(--surface);border-color:var(--line) } :scope[data-theme="dark"] .neneChatHeaderLink:focus-visible {outline:2px solid var(--line) } :scope[data-theme="dark"] .neneChatHeaderLink:hover {color:var(--text) } :scope[data-theme="dark"] .unrankedIcon circle[fill="#E6EAF0"] {fill:var(--surface) } :scope[data-theme="dark"] .postBadge.new, :scope[data-theme="dark"] .boardBadge--new {color:var(--accent);border-color:var(--line) } :scope[data-theme="dark"] .hlHero .muted, :scope[data-theme="dark"] .hlCard small {color:var(--text) } :scope[data-theme="dark"] .bcTeams b, :scope[data-theme="dark"] .hlCard b, :scope[data-theme="dark"] .partnerCardBody h3, :scope[data-theme="dark"] .floatChatHead b {color:var(--text) } :scope[data-theme="dark"] .bcLeague, :scope[data-theme="dark"] .bcTime small, :scope[data-theme="dark"] .bcTeams em {color:var(--text) } :scope[data-theme="dark"] .bcWatch, :scope[data-theme="dark"] .bcCh {color:var(--text) } :scope[data-theme="dark"] .floatChatHead {color:var(--text) } :scope[data-theme="dark"] .floatChatHead .linkBtn {color:color-mix(in srgb,var(--text) 70%,var(--surface-elevated)) } :scope[data-theme="dark"] .floatChatHead .iconButton {color:var(--text) } :scope[data-theme="dark"] .analysisIntro:before {background:radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 28%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 72px) } :scope[data-theme="dark"] .analysisIntro:after {box-shadow:0 -24px 48px color-mix(in srgb,var(--onlive-shadow-color) 10%,transparent) inset } :scope[data-theme="dark"] .analysisIntro p {color:var(--text) } :scope[data-theme="dark"] .analysisIntroCount {background:color-mix(in srgb,var(--surface) 38%,transparent);color:var(--text) } :scope[data-theme="dark"] .analysisIntro h1, :scope[data-theme="dark"] .analysisTeams b, :scope[data-theme="dark"] .analysisPick p, :scope[data-theme="dark"] .analysisHeroCard h2 {color:var(--text) } :scope[data-theme="dark"] .nvOverlay, :scope[data-theme="dark"] .nenetvModal {background:color-mix(in srgb,var(--surface) 46%,transparent) } :scope[data-theme="dark"] .nvDialog, :scope[data-theme="dark"] .nenetvModalCard {box-shadow:0 16px 40px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .nvBtn.primary {box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .nvToast {box-shadow:0 12px 28px color-mix(in srgb,var(--onlive-shadow-color) 14%,transparent) } :scope[data-theme="dark"] .nvDialogTitle, :scope[data-theme="dark"] .nenetvModalCard h3 {color:var(--text) } :scope[data-theme="dark"] .headerInbox.is-unread {box-shadow:0 0 10px color-mix(in srgb,var(--onlive-shadow-color) 35%,transparent) } :scope[data-theme="dark"] .headerInbox.is-unread .headerInboxCount {box-shadow:0 0 8px color-mix(in srgb,var(--onlive-shadow-color) 55%,transparent) } :scope[data-theme="dark"] .headerInbox.is-unread {color:var(--text) } :scope[data-theme="dark"] .noticeRow:not(.is-unread) span {background:var(--accent) } :scope[data-theme="dark"] .pageHero {--ph-tile-1:var(--surface);--ph-tile-line:color-mix(in srgb,var(--line) 50%,transparent); --ph-accent:var(--accent); background: radial-gradient(ellipse 58% 80% at 86% 18%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 58%), linear-gradient(135deg,var(--ph-ice-0) 0%,var(--ph-ice-1) 48%,var(--ph-ice-2) 100%); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px color-mix(in srgb,var(--onlive-shadow-color) 3%,transparent) } :scope[data-theme="dark"] .pageHero:before { background: repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 7%,transparent) 0 1px,transparent 1px 46px), radial-gradient(circle at 78% 30%,rgba(255,255,255,.55),transparent 36%) } :scope[data-theme="dark"] .pageHero:after { border:1px solid color-mix(in srgb,var(--line) 12%,transparent) } :scope[data-theme="dark"] .pageHeroTile { box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 12px 24px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),0 2px 6px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .pageHero--predict .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--analysis .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--injuries .pageHeroTile--main {color:var(--muted) } :scope[data-theme="dark"] .pageHero--community .pageHeroTile--main {color:var(--muted) } :scope[data-theme="dark"] .pageHero--highlights .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--shop .pageHeroTile--main, :scope[data-theme="dark"] .pageHero--convert .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--notice .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--profile .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero {--ph-icon:var(--surface); --ph-accent:var(--accent); background: radial-gradient(ellipse 58% 80% at 86% 18%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 58%), linear-gradient(135deg,var(--ph-ice-0) 0%,var(--ph-ice-1) 46%,var(--ph-ice-2) 100%) } :scope[data-theme="dark"] .pageHero:before { background: repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 8%,transparent) 0 1px,transparent 1px 46px), radial-gradient(circle at 78% 30%,color-mix(in srgb,var(--surface) 8%,transparent),transparent 36%) } :scope[data-theme="dark"] .pageHero:after {border-color:color-mix(in srgb,var(--line) 12%,transparent) } :scope[data-theme="dark"] .pageHeroTile { box-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) inset,0 14px 28px color-mix(in srgb,var(--onlive-shadow-color) 32%,transparent) } :scope[data-theme="dark"] .pageHeroTile:before {background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 16%,transparent),transparent 46%) } :scope[data-theme="dark"] .pageHeroTile--board b {color:var(--text) } :scope[data-theme="dark"] .pageHero--predict .pageHeroTile--main, :scope[data-theme="dark"] .pageHero--notice .pageHeroTile--main {color:var(--muted) } :scope[data-theme="dark"] .pageHero--analysis .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--community .pageHeroTile--main {color:var(--accent) } :scope[data-theme="dark"] .pageHero--highlights .pageHeroTile--main, :scope[data-theme="dark"] .pageHero--profile .pageHeroTile--main {color:var(--muted) } :scope[data-theme="dark"] .pageHero--shop .pageHeroTile--main, :scope[data-theme="dark"] .pageHero--convert .pageHeroTile--main {color:var(--text) } :scope[data-theme="dark"] .historyTitle, :scope[data-theme="dark"] .historyAmount, :scope[data-theme="dark"] .shopHistoryTitle {color:var(--text) } :scope[data-theme="dark"] .historyLeadIcon {background:color-mix(in srgb,var(--accent) 22%,transparent);border-color:color-mix(in srgb,var(--line) 32%,transparent);color:var(--text) } :scope[data-theme="dark"] .headerInbox:hover, :scope[data-theme="dark"] .iconButton:hover {box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) } :scope[data-theme="dark"] .headerInbox.is-unread:hover {box-shadow:0 0 16px color-mix(in srgb,var(--onlive-shadow-color) 50%,transparent) } :scope[data-theme="dark"] a.liveCard:hover, :scope[data-theme="dark"] a.postRow:hover, :scope[data-theme="dark"] a.noticeRow:hover, :scope[data-theme="dark"] a.shortcut:hover, :scope[data-theme="dark"] a.hlCard:hover, :scope[data-theme="dark"] a.partnerCard:hover, :scope[data-theme="dark"] .shopGrid a:hover article, :scope[data-theme="dark"] .shopProduct:hover, :scope[data-theme="dark"] a.homeGiftCard:hover, :scope[data-theme="dark"] a.bcAd:hover {box-shadow:0 10px 22px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) } :scope[data-theme="dark"] .shortcut .tone-predict {color:var(--accent) } :scope[data-theme="dark"] .shortcut .tone-community {color:var(--accent) } :scope[data-theme="dark"] .shortcut .tone-shop {color:var(--accent) } :scope[data-theme="dark"] .shortcut .shortcutIcon { background:color-mix(in srgb,var(--surface) 7%,transparent); border-color:color-mix(in srgb,var(--line) 12%,var(--line)) } :scope[data-theme="dark"] .shortcut .tone-live {color:var(--accent) } :scope[data-theme="dark"] .shortcut .tone-predict {color:var(--accent) } :scope[data-theme="dark"] .shortcut .tone-community {color:var(--accent) } :scope[data-theme="dark"] .shortcut .tone-shop {color:var(--text) } :scope[data-theme="dark"] .bcLiveCard {background:linear-gradient(135deg,var(--surface) 0%,var(--accent) 100%);box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 22%,transparent) } :scope[data-theme="dark"] .bcLiveCard:hover {box-shadow:0 8px 16px color-mix(in srgb,var(--onlive-shadow-color) 32%,transparent) } :scope[data-theme="dark"] .rkTop--1 {box-shadow:0 18px 38px rgba(116,85,20,.18),0 3px 10px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(255,236,181,.22) } :scope[data-theme="dark"] .rkTop--2 {--rk-accent:var(--accent);border-color:color-mix(in srgb,var(--line) 58%,var(--line));background:radial-gradient(circle at 50% 5%,color-mix(in srgb,var(--surface) 24%,transparent),transparent 45%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 15%,var(--surface)) 0%,var(--surface) 68%,color-mix(in srgb,var(--accent) 7%,var(--surface)) 100%);box-shadow:0 14px 30px color-mix(in srgb,var(--onlive-shadow-color) 14%,transparent),0 2px 8px color-mix(in srgb,var(--onlive-shadow-color) 7%,transparent),inset 0 1px 0 rgba(255,255,255,.94),inset 0 0 0 1px color-mix(in srgb,var(--onlive-shadow-color) 20%,transparent) } :scope[data-theme="dark"] .rkTop--2 .rkPlace {color:var(--muted) } :scope[data-theme="dark"] .rkTop--2 .rkMetric b, :scope[data-theme="dark"] .rkTop--2 .metricBadge b {color:var(--muted) } :scope[data-theme="dark"] .rkTop--3 {box-shadow:0 14px 30px rgba(104,67,35,.14),0 2px 8px color-mix(in srgb,var(--onlive-shadow-color) 7%,transparent),inset 0 1px 0 rgba(255,255,255,.94),inset 0 0 0 1px rgba(235,199,164,.2) } :scope[data-theme="dark"] .rkTop--1:hover {box-shadow:0 22px 44px rgba(116,85,20,.22),0 5px 13px color-mix(in srgb,var(--onlive-shadow-color) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(255,236,181,.25) } :scope[data-theme="dark"] .rkTop--2:hover {box-shadow:0 18px 36px color-mix(in srgb,var(--onlive-shadow-color) 18%,transparent),0 4px 11px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.94) } :scope[data-theme="dark"] .rkTop--3:hover {box-shadow:0 18px 36px rgba(104,67,35,.18),0 4px 11px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.94) } :scope[data-theme="dark"] .bcSportsRow>.bcChatToggle:hover { box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) } :scope[data-theme="dark"] .bcSportsRow>.bcChatToggle[data-open="true"] { box-shadow:0 8px 16px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .profileIconBadge {background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--line) 26%,transparent) } :scope[data-theme="dark"] .profileStatus {color:var(--text) } :scope[data-theme="dark"] .floatChatBrand > span {color:color-mix(in srgb,var(--text) 58%,var(--muted)) } :scope[data-theme="dark"] .rkTop--2 {--rk-aura:color-mix(in srgb,var(--surface) 20%,transparent);background:radial-gradient(circle at 50% 5%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 46%),linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)) 0%,var(--surface) 68%,color-mix(in srgb,var(--accent) 8%,var(--surface)) 100%);border-color:color-mix(in srgb,var(--line) 46%,var(--line));box-shadow:0 15px 32px rgba(0,0,0,.28),0 0 18px color-mix(in srgb,var(--onlive-shadow-color) 5%,transparent),inset 0 1px 0 rgba(255,255,255,.1) } :scope[data-theme="dark"] .rkTop--2 .rkPlace, :scope[data-theme="dark"] .rkTop--2 .rkUserName, :scope[data-theme="dark"] .rkTop--2 .rkMetric b, :scope[data-theme="dark"] .rkTop--2 .metricBadge b, :scope[data-theme="dark"] .rkTop--2 .rkTopHit {color:var(--text) } :scope[data-theme="dark"] .userCardBackdrop {background:color-mix(in srgb,var(--surface) 42%,transparent) } :scope[data-theme="dark"] .userCardPanel {--uc-border:color-mix(in srgb,var(--line) 28%,transparent);--uc-line:var(--line);--uc-accent:var(--accent);box-shadow:0 18px 40px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent),0 2px 8px color-mix(in srgb,var(--onlive-shadow-color) 6%,transparent),inset 0 1px 0 rgba(255,255,255,.55) } :scope[data-theme="dark"] .userCardPanel--SILVER, :scope[data-theme="dark"] .userCard--SILVER {--uc-border:color-mix(in srgb,var(--line) 38%,transparent);--uc-line:linear-gradient(90deg,var(--line),var(--line),var(--line)) } :scope[data-theme="dark"] .userCardPanel--DIAMOND, :scope[data-theme="dark"] .userCard--DIAMOND {--uc-bg:var(--surface);--uc-border:color-mix(in srgb,var(--line) 36%,transparent);--uc-line:linear-gradient(90deg,var(--line),var(--line),var(--line)) } :scope[data-theme="dark"] .userCardPanel--MASTER, :scope[data-theme="dark"] .userCard--MASTER {--uc-border:color-mix(in srgb,var(--line) 34%,transparent);--uc-line:linear-gradient(90deg,var(--line),var(--line),var(--line)) } :scope[data-theme="dark"] .userCardPanel--CHALLENGER, :scope[data-theme="dark"] .userCard--CHALLENGER {--uc-border:color-mix(in srgb,var(--line) 34%,transparent);--uc-line:linear-gradient(90deg,#d4a017,var(--line),var(--line),var(--line));--uc-accent:var(--accent) } :scope[data-theme="dark"] .userCardPanel--CHALLENGER {background:linear-gradient(135deg,rgba(255,244,200,.96),color-mix(in srgb,var(--surface) 96%,transparent) 38%,color-mix(in srgb,var(--surface) 96%,transparent) 68%,color-mix(in srgb,var(--surface) 96%,transparent)) } :scope[data-theme="dark"] .userCard--CHALLENGER .userCardIcon:before {background:radial-gradient(circle,rgba(253,230,138,.42),color-mix(in srgb,var(--surface) 28%,transparent) 42%,color-mix(in srgb,var(--surface) 18%,transparent) 62%,transparent 72%) } :scope[data-theme="dark"] .userCardSeason h3 {color:var(--muted) } :scope[data-theme="dark"] .userCardPanel {--uc-bg:var(--surface);--uc-bg2:var(--surface) } :scope[data-theme="dark"] .userCardPanel--SILVER, :scope[data-theme="dark"] .userCard--SILVER {--uc-bg:var(--surface);--uc-bg2:var(--surface);--uc-border:color-mix(in srgb,var(--line) 32%,transparent);--uc-glow:color-mix(in srgb,var(--surface) 22%,transparent) } :scope[data-theme="dark"] .userCardPanel--PLATINUM, :scope[data-theme="dark"] .userCard--PLATINUM {--uc-bg2:var(--surface) } :scope[data-theme="dark"] .userCardPanel--DIAMOND, :scope[data-theme="dark"] .userCard--DIAMOND {--uc-bg:var(--surface);--uc-bg2:var(--surface);--uc-border:color-mix(in srgb,var(--line) 34%,transparent);--uc-glow:color-mix(in srgb,var(--surface) 26%,transparent) } :scope[data-theme="dark"] .userCardPanel--MASTER, :scope[data-theme="dark"] .userCard--MASTER {--uc-bg:var(--surface);--uc-bg2:var(--surface);--uc-border:color-mix(in srgb,var(--line) 34%,transparent);--uc-glow:color-mix(in srgb,var(--surface) 24%,transparent) } :scope[data-theme="dark"] .userCardPanel--CHALLENGER, :scope[data-theme="dark"] .userCard--CHALLENGER {--uc-bg:var(--surface);--uc-bg2:var(--surface);--uc-border:color-mix(in srgb,var(--line) 36%,transparent) } :scope[data-theme="dark"] .userCardPanel--CHALLENGER {background:linear-gradient(135deg,rgba(36,28,16,.94),color-mix(in srgb,var(--surface) 96%,transparent) 40%,color-mix(in srgb,var(--surface) 94%,transparent) 72%,color-mix(in srgb,var(--surface) 96%,transparent)) } :scope[data-theme="dark"] .userCardIdentity > b, :scope[data-theme="dark"] .userCardSeason li, :scope[data-theme="dark"] .userCardStats strong {color:var(--text) } :scope[data-theme="dark"] .userCardSeason h3 {color:var(--muted) } :scope[data-theme="dark"] .userCardStats {background:color-mix(in srgb,var(--surface) 38%,transparent) } :scope[data-theme="dark"] a.homeAboutCard:hover {box-shadow:0 8px 16px color-mix(in srgb,var(--onlive-shadow-color) 6%,transparent) } :scope[data-theme="dark"] .homeAboutCard--domain {background:var(--accent);border-color:var(--line) } :scope[data-theme="dark"] .homeAboutCard--notice {background:var(--surface);border-color:var(--line) } :scope[data-theme="dark"] .homeAboutIntro h2, :scope[data-theme="dark"] .homeAboutHead h3, :scope[data-theme="dark"] .homeAboutCardCopy b, :scope[data-theme="dark"] .homeAboutSummary h2 {color:var(--text) } :scope[data-theme="dark"] .homeAboutCard--domain {background:var(--accent);border-color:var(--line) } :scope[data-theme="dark"] .homeAboutCard--notice {background:var(--surface);border-color:var(--line) } :scope[data-theme="dark"] .evHeroCard h1, :scope[data-theme="dark"] .evPlayCard h2, :scope[data-theme="dark"] .evMatchKickoff b, :scope[data-theme="dark"] .evScoreId b, :scope[data-theme="dark"] .evStepper input {color:var(--text) } :scope[data-theme="dark"] .navItem {color:var(--text) } :scope[data-theme="dark"] .navItem:hover {color:var(--text) } :scope[data-theme="dark"] .navItem.active, :scope[data-theme="dark"] .navItem.featured.active {color:var(--text) } :scope[data-theme="dark"] .navItem.active:after {background:var(--accent) } :scope[data-theme="dark"] .navItem.featured {color:var(--text) } :scope[data-theme="dark"] .homeIntroBrand::before {background:radial-gradient(ellipse at center,color-mix(in srgb,var(--surface) 15.68%,transparent) 0%,color-mix(in srgb,var(--surface) 8.96%,transparent) 35%,color-mix(in srgb,var(--surface) 0%,transparent) 72%) } :scope[data-theme="dark"] .cmtItem.reply::before {color:var(--muted) } :scope[data-theme="dark"] .postArticle .articleTitle, :scope[data-theme="dark"] .boardNick, :scope[data-theme="dark"] .postMetaAuthor, :scope[data-theme="dark"] .postArticle .cmtSection h2 {color:var(--text) } :scope[data-theme="dark"] .mailPageHead h1, :scope[data-theme="dark"] .memberMessageMeta b {color:var(--text) } :scope[data-theme="dark"] .rkRank--2 {color:var(--muted);background:color-mix(in srgb,var(--accent) 22%,var(--surface)) } :scope[data-theme="dark"] .rkTop--2 .rkPlace, :scope[data-theme="dark"] .rkTop--2 .rkUserName, :scope[data-theme="dark"] .rkTop--2 .rkTopHit, :scope[data-theme="dark"] .rkTop--2 .rkMetric, :scope[data-theme="dark"] .rkTop--2 .rkMetric b, :scope[data-theme="dark"] .rkTop--2 .metricBadge, :scope[data-theme="dark"] .rkTop--2 .metricBadge b {color:var(--muted) } :scope[data-theme="dark"] .rkTop--3 .rkPlace, :scope[data-theme="dark"] .rkTop--3 .rkUserName, :scope[data-theme="dark"] .rkTop--3 .rkTopHit, :scope[data-theme="dark"] .rkTop--3 .rkMetric, :scope[data-theme="dark"] .rkTop--3 .rkMetric b, :scope[data-theme="dark"] .rkTop--3 .metricBadge, :scope[data-theme="dark"] .rkTop--3 .metricBadge b {color:var(--muted) } :scope[data-theme="dark"] .rkTableSummary h2, :scope[data-theme="dark"] .rkRank, :scope[data-theme="dark"] .rkHitRate, :scope[data-theme="dark"] .rkUserName {color:var(--text) } :scope[data-theme="dark"] .rkToolbar .tab:not(.active) {color:var(--text) } :scope[data-theme="dark"] .rkRow:hover {background:color-mix(in srgb,var(--accent) 14%,transparent) } :scope[data-theme="dark"] .rkRow.is-me {background:color-mix(in srgb,var(--accent) 16%,transparent) } :scope[data-theme="dark"] .rkRank--2 {color:var(--text);background:color-mix(in srgb,var(--accent) 20%,transparent) } :scope[data-theme="dark"] .boardTitleLink b, :scope[data-theme="dark"] .boardTitleText, :scope[data-theme="dark"] .boardHead h2 {color:var(--text) } :scope[data-theme="dark"] .boardBadge, :scope[data-theme="dark"] .catLabel, :scope[data-theme="dark"] .noticeCat, :scope[data-theme="dark"] .postBadge { background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .boardBadge--pin, :scope[data-theme="dark"] .boardBadge--notice, :scope[data-theme="dark"] .postBadge.notice { background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--muted);border-color:color-mix(in srgb,var(--line) 32%,transparent) } :scope[data-theme="dark"] .boardBadge--category { background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .boardBadge--event, :scope[data-theme="dark"] .noticeCat--이벤트, :scope[data-theme="dark"] .boardBadge--hot, :scope[data-theme="dark"] .postBadge.hot { background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--muted);border-color:color-mix(in srgb,var(--line) 32%,transparent) } :scope[data-theme="dark"] .boardBadge--info, :scope[data-theme="dark"] .noticeCat--안내 { background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--line) 28%,transparent) } :scope[data-theme="dark"] .boardTable thead th {background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--muted) } :scope[data-theme="dark"] .navDrop a, :scope[data-theme="dark"] .navDropItem {color:var(--muted) } :scope[data-theme="dark"] .hero.hasImage:before {background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 78%,transparent) 0%,color-mix(in srgb,var(--surface) 42%,transparent) 52%,color-mix(in srgb,var(--surface) 22%,transparent) 100%) } :scope[data-theme="dark"] .slipSheetBackdrop {background:color-mix(in srgb,var(--surface) 28%,transparent) } :scope[data-theme="dark"] .slipSheet {box-shadow:0 -16px 40px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .slipSheetHead h2 {color:var(--text) } :scope[data-theme="dark"] .homeQuickNav a:hover {box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 6%,transparent) } :scope[data-theme="dark"] .homeQuickNavIcon {box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 12px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .homeQuickNavIcon { box-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) inset } :scope[data-theme="dark"] .emptyState--predict .emptyStateIcon {color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--soft)) } :scope[data-theme="dark"] .emptyState--gift .emptyStateIcon {color:var(--accent);background:color-mix(in srgb,var(--surface) 12%,var(--soft)) } :scope[data-theme="dark"] .homeBoard .predictionCard {box-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .sectionHead .moreBtn:hover, :scope[data-theme="dark"] .moreBtn:hover, :scope[data-theme="dark"] .sectionHead .moreBtn:active, :scope[data-theme="dark"] .moreBtn:active {border-color:color-mix(in srgb,var(--line) 28%,var(--line));color:var(--text) } :scope[data-theme="dark"] .rankNo--2 {color:var(--muted) } :scope[data-theme="dark"] .homeLive a.liveCard:hover {box-shadow:0 6px 14px color-mix(in srgb,var(--onlive-shadow-color) 6%,transparent) } :scope[data-theme="dark"] .rankNo--2 {color:var(--text) } :scope[data-theme="dark"] .analysisPickCard.is-rec {border-color:color-mix(in srgb,var(--line) 28%,transparent) } :scope[data-theme="dark"] .hero.heroLite { box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 28px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent); background: radial-gradient(ellipse 58% 80% at 82% 18%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%), radial-gradient(circle at 12% 88%,color-mix(in srgb,var(--surface) 10%,transparent),transparent 42%), linear-gradient(135deg,var(--hero-ice-0) 0%,var(--hero-ice-1) 46%,var(--hero-ice-3) 100%) } :scope[data-theme="dark"] .hero.heroLite:before { background: repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 7%,transparent) 0 1px,transparent 1px 46px), radial-gradient(circle at 78% 30%,rgba(255,255,255,.55),transparent 36%) } :scope[data-theme="dark"] .hero.heroLite:after { border:1px solid color-mix(in srgb,var(--line) 12%,transparent) } :scope[data-theme="dark"] .hero.heroLite.hasImage:before { background: linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(248,251,255,.78) 52%,color-mix(in srgb,var(--surface) 62%,transparent) 100%), repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 6%,transparent) 0 1px,transparent 1px 46px) } :scope[data-theme="dark"] .hero.heroLite .heroTile { background:linear-gradient(145deg,rgba(255,255,255,.98),color-mix(in srgb,var(--surface) 95%,transparent)); border:1px solid color-mix(in srgb,var(--line) 45%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 28px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent),0 2px 6px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent); color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .heroTile--n, :scope[data-theme="dark"] .hero.heroLite .heroTile--mark { background:linear-gradient(155deg,#FFFFFF 0%,#F5F8FC 52%,var(--surface) 100%); border:1px solid color-mix(in srgb,var(--line) 55%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.96) inset,0 16px 32px color-mix(in srgb,var(--onlive-shadow-color) 9%,transparent),0 2px 6px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .hero.heroLite .heroTile--game {color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .heroTile--target {color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .heroTile--chart {color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .metric { border:1px solid color-mix(in srgb,var(--line) 40%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .hero.heroLite.hasArtwork { background: radial-gradient(ellipse 68% 88% at 76% 14%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%), radial-gradient(ellipse 48% 68% at 88% 84%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%), radial-gradient(circle at 12% 88%,color-mix(in srgb,var(--surface) 8%,transparent),transparent 42%), linear-gradient(135deg,var(--hero-ice-0) 0%,var(--hero-ice-1) 46%,var(--hero-ice-3) 100%) } :scope[data-theme="dark"] .hero.heroLite.hasArtwork:before { background: repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 5%,transparent) 0 1px,transparent 1px 46px), radial-gradient(circle at 74% 26%,rgba(255,255,255,.4),transparent 38%) } :scope[data-theme="dark"] .hero.heroLite.hasArtwork.hasImage:before { background: linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(249,251,254,.8) 52%,color-mix(in srgb,var(--surface) 62%,transparent) 100%), repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 5%,transparent) 0 1px,transparent 1px 46px) } :scope[data-theme="dark"] .homeQuickNav a:hover { box-shadow:0 10px 20px color-mix(in srgb,var(--onlive-shadow-color) 7%,transparent) } :scope[data-theme="dark"] .homeQuickNavIcon { box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 12px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .homeBoard .emptyStateIcon {border:1px solid color-mix(in srgb,var(--line) 40%,transparent); background:linear-gradient(165deg,#fff,var(--surface)) } :scope[data-theme="dark"] .homeLive .liveThumb, :scope[data-theme="dark"] .homeLive .liveThumb.v1, :scope[data-theme="dark"] .homeLive .liveThumb.v2, :scope[data-theme="dark"] .homeLive .liveThumb.v3 { background:linear-gradient(165deg,#F8FBFF,var(--surface)) } :scope[data-theme="dark"] .homeLive .liveThumb:after {border-color:color-mix(in srgb,var(--line) 18%,transparent) } :scope[data-theme="dark"] .homeLive .liveThumb i {color:var(--muted) } :scope[data-theme="dark"] .homePage .hlThumb {background:linear-gradient(165deg,#F8FBFF,var(--surface)) } :scope[data-theme="dark"] .homePage .postThumb {background:linear-gradient(165deg,#F8FBFF,var(--surface)) } :scope[data-theme="dark"] .legendBanner { background: radial-gradient(circle at 86% 18%,rgba(196,154,60,.10),transparent 34%), linear-gradient(135deg,#FFFFFF 0%,#F8FBFF 48%,var(--surface) 100%) } :scope[data-theme="dark"] .legendBannerTile { box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 24px color-mix(in srgb,var(--onlive-shadow-color) 7%,transparent) } :scope[data-theme="dark"] .hero.heroLite:before { background:repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 8%,transparent) 0 1px,transparent 1px 46px) } :scope[data-theme="dark"] .hero.heroLite:after { border-color:color-mix(in srgb,var(--line) 12%,transparent) } :scope[data-theme="dark"] .hero.heroLite.hasImage:before { background: linear-gradient(90deg,var(--surface-card),color-mix(in srgb,var(--surface-card) 78%,transparent)), repeating-linear-gradient(118deg,color-mix(in srgb,var(--accent) 6%,transparent) 0 1px,transparent 1px 46px) } :scope[data-theme="dark"] .hero.heroLite .heroTile { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)); box-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) inset,0 14px 28px color-mix(in srgb,var(--onlive-shadow-color) 32%,transparent); color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .heroTile:before { background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 16%,transparent),transparent 46%) } :scope[data-theme="dark"] .hero.heroLite .heroTile--n, :scope[data-theme="dark"] .hero.heroLite .heroTile--mark { color:var(--text); background:linear-gradient(155deg,var(--surface) 0%,var(--surface) 100%); box-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) inset,0 16px 32px color-mix(in srgb,var(--onlive-shadow-color) 28%,transparent) } :scope[data-theme="dark"] .hero.heroLite .heroTile--game, :scope[data-theme="dark"] .hero.heroLite .heroTile--target, :scope[data-theme="dark"] .hero.heroLite .heroTile--chart {color:var(--muted) } :scope[data-theme="dark"] .hero.heroLite .metric { background:color-mix(in srgb,var(--surface) 78%,transparent); box-shadow:0 6px 16px color-mix(in srgb,var(--onlive-shadow-color) 22%,transparent) } :scope[data-theme="dark"] .homeQuickNav a:hover { box-shadow:0 10px 20px color-mix(in srgb,var(--onlive-shadow-color) 22%,transparent) } :scope[data-theme="dark"] .teamMark { background:linear-gradient(145deg,var(--surface),var(--surface));color:var(--muted);border-color:var(--line) } :scope[data-theme="dark"] .homeLive .liveThumb i {color:var(--muted) } :scope[data-theme="dark"] .legendBannerTile { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)); box-shadow:0 1px 0 rgba(226,192,106,.12) inset,0 14px 24px color-mix(in srgb,var(--onlive-shadow-color) 28%,transparent) } :scope[data-theme="dark"] .homeUtilityTile--attend { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)); box-shadow:0 1px 0 color-mix(in srgb,var(--accent-primary) 14%,transparent) inset,0 14px 24px color-mix(in srgb,var(--onlive-shadow-color) 28%,transparent) } :scope[data-theme="dark"] .homeUtilityTile--invite { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)); box-shadow:0 1px 0 color-mix(in srgb,var(--accent-primary) 14%,transparent) inset,0 14px 24px color-mix(in srgb,var(--onlive-shadow-color) 28%,transparent) } :scope[data-theme="dark"] .homeHlPlay {background:color-mix(in srgb,var(--surface) 55%,transparent) } :scope[data-theme="dark"], :scope[data-theme="dark"] { --action-green-bg-active:var(--accent); --action-green-border-active:var(--line); --action-green-focus:color-mix(in srgb,var(--accent) 32%,transparent) } :scope[data-theme="dark"] { --watch-mint-focus:color-mix(in srgb,var(--accent) 32%,transparent) } :scope[data-theme="dark"] { --watch-mint-focus:color-mix(in srgb,var(--accent) 40%,transparent) } :scope[data-theme="dark"] .navDrop { box-shadow:0 8px 22px color-mix(in srgb,var(--onlive-shadow-color) 8%,transparent) } :scope[data-theme="dark"] .brandBadgePlate {stroke:var(--line) } :scope[data-theme="dark"] .brandBadgePlate {fill:var(--surface);stroke:var(--line) } :scope[data-theme="dark"] .brandBadgeDisc {fill:var(--surface) } :scope[data-theme="dark"] a.legendBanner:hover { background: radial-gradient(circle at 86% 18%,rgba(196,154,60,.12),transparent 34%), linear-gradient(135deg,#FFFFFF 0%,var(--surface) 48%,var(--surface) 100%) } :scope[data-theme="dark"] .playerWaiting { --pw-bg-glow:color-mix(in srgb,var(--accent) 10%,transparent); --pw-mark-border:color-mix(in srgb,var(--line) 32%,transparent); --pw-signal-border:color-mix(in srgb,var(--line) 38%,transparent); --pw-word:var(--muted); --pw-kicker:var(--muted); --pw-title:var(--muted); --pw-hint:var(--muted) } :scope[data-theme="dark"] .playerWaiting { --pw-bg:var(--surface); --pw-bg-glow:color-mix(in srgb,var(--surface) 14%,transparent); --pw-grid:color-mix(in srgb,var(--surface) 8%,transparent); --pw-ring:color-mix(in srgb,var(--surface) 16%,transparent); --pw-ring-mid:color-mix(in srgb,var(--surface) 28%,transparent); --pw-ring-inner:color-mix(in srgb,var(--surface) 42%,transparent); --pw-mark-bg:color-mix(in srgb,var(--surface) 78%,transparent); --pw-mark-border:color-mix(in srgb,var(--line) 42%,transparent); --pw-mark-glow:color-mix(in srgb,var(--surface) 18%,transparent); --pw-play-disc:var(--surface); --pw-play-glow:color-mix(in srgb,var(--surface) 55%,transparent); --pw-signal-bg:color-mix(in srgb,var(--surface) 92%,transparent); --pw-signal-border:color-mix(in srgb,var(--line) 42%,transparent); --pw-signal-fg:var(--text); --pw-word:var(--text); --pw-kicker:var(--muted); --pw-title:var(--text); --pw-hint:var(--muted); background: radial-gradient(ellipse at 50% 42%,var(--pw-bg-glow),transparent 44%), linear-gradient(180deg,var(--surface) 0%,var(--surface) 100%) } :scope[data-theme="dark"] .homeUtilityTile { box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 14px 24px color-mix(in srgb,var(--onlive-shadow-color) 7%,transparent) } :scope[data-theme="dark"] .homeUtilityTile--attend { background:linear-gradient(145deg,rgba(255,255,255,.98),color-mix(in srgb,var(--surface) 95%,transparent)) } :scope[data-theme="dark"] .homeUtilityTile--invite { background:linear-gradient(145deg,rgba(255,255,255,.98),color-mix(in srgb,var(--surface) 95%,transparent)) } :scope[data-theme="dark"] .shopThumb--blue {background:var(--surface) } :scope[data-theme="dark"] .giftCatMark--cafe {--gift-cat-fg:var(--accent);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--convenience {--gift-cat-fg:var(--accent);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--voucher {--gift-cat-fg:var(--muted);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--culture {--gift-cat-fg:var(--accent);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--mobile {--gift-cat-fg:var(--accent);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--department {--gift-cat-fg:var(--muted);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 20%,transparent) } :scope[data-theme="dark"] .giftCatMark--movie {--gift-cat-fg:var(--muted);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--game {--gift-cat-fg:var(--muted);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--transit {--gift-cat-fg:var(--accent);--gift-cat-bg:var(--surface);--gift-cat-line:color-mix(in srgb,var(--line) 22%,transparent) } :scope[data-theme="dark"] .giftCatMark--other {--gift-cat-fg:var(--muted);--gift-cat-line:color-mix(in srgb,var(--line) 20%,transparent) } :scope[data-theme="dark"] .homeUtilityTile--attend { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)) } :scope[data-theme="dark"] .homeUtilityTile--invite { background:linear-gradient(145deg,var(--surface),var(--surface-elevated)) } :scope[data-theme="dark"] .shopThumb--violet {background:color-mix(in srgb,var(--surface) 12%,transparent) } :scope[data-theme="dark"] .shopThumb--blue {background:color-mix(in srgb,var(--surface) 12%,transparent) } :scope[data-theme="dark"] .shopThumb--purple {background:color-mix(in srgb,var(--surface) 14%,transparent) } :scope[data-theme="dark"] .shopThumb--slate {background:color-mix(in srgb,var(--accent) 10%,transparent) } :scope[data-theme="dark"] .giftCatMark--cafe, :scope[data-theme="dark"] .opsApp .giftCatMark--cafe {--gift-cat-fg:var(--accent);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--convenience, :scope[data-theme="dark"] .opsApp .giftCatMark--convenience {--gift-cat-fg:var(--accent);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--voucher, :scope[data-theme="dark"] .opsApp .giftCatMark--voucher {--gift-cat-fg:var(--text);--gift-cat-bg:color-mix(in srgb,var(--surface) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--culture, :scope[data-theme="dark"] .opsApp .giftCatMark--culture {--gift-cat-fg:var(--accent);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--mobile, :scope[data-theme="dark"] .opsApp .giftCatMark--mobile {--gift-cat-fg:var(--accent);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--department, :scope[data-theme="dark"] .opsApp .giftCatMark--department {--gift-cat-fg:var(--muted);--gift-cat-bg:color-mix(in srgb,var(--accent) 16%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 28%,transparent) } :scope[data-theme="dark"] .giftCatMark--movie, :scope[data-theme="dark"] .opsApp .giftCatMark--movie {--gift-cat-fg:var(--muted);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--game, :scope[data-theme="dark"] .opsApp .giftCatMark--game {--gift-cat-fg:var(--text);--gift-cat-bg:color-mix(in srgb,var(--surface) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--transit, :scope[data-theme="dark"] .opsApp .giftCatMark--transit {--gift-cat-fg:var(--accent);--gift-cat-bg:color-mix(in srgb,var(--accent) 18%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .giftCatMark--other, :scope[data-theme="dark"] .opsApp .giftCatMark--other {--gift-cat-fg:var(--muted);--gift-cat-bg:color-mix(in srgb,var(--accent) 14%,transparent);--gift-cat-line:color-mix(in srgb,var(--line) 26%,transparent) } :scope[data-theme="dark"] .bcLiveShortcuts .bcLiveCard--domain .bcLiveCardIcon, :scope[data-theme="dark"] .bcLiveShortcuts .bcLiveCard--domain:hover .bcLiveCardIcon { color:var(--muted) } :scope[data-theme="dark"] .shopDesk.is-gift .shopProduct:hover, :scope[data-theme="dark"] .shopDesk.is-gift .shopProduct:focus-within { box-shadow:0 9px 20px color-mix(in srgb,var(--onlive-shadow-color) 9%,transparent) } :scope[data-theme="dark"] .bcVidCtrl { background:linear-gradient(180deg,transparent 52%,color-mix(in srgb,var(--surface) 72%,transparent)) } :scope[data-theme="dark"] .bcVidCtrlBtn {color:var(--text) } :scope[data-theme="dark"] .bcVidVol input[type="range"] {accent-color:var(--text) } :scope[data-theme="dark"] .bcVidTime {color:var(--text) } :scope[data-theme="dark"] .bcVidSeek i {background:var(--surface) } :scope[data-theme="dark"] .bcVidSpeedMenu {background:color-mix(in srgb,var(--surface) 94%,transparent) } :scope[data-theme="dark"] .bcVidSpeedMenu button {color:var(--text) } :scope[data-theme="dark"] .heroMetricCard.rank1Card { border:1px solid color-mix(in srgb,var(--line) 28%,transparent); background: radial-gradient(120% 80% at 85% 10%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 62%), var(--card-bg); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) } :scope[data-theme="dark"] .hero.heroLite .metric.rank1Card { border:1px solid color-mix(in srgb,var(--line) 28%,transparent); background: radial-gradient(120% 80% at 85% 10%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 62%), rgba(255,255,255,.72); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent), 0 6px 16px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .heroBadge--rank1 { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,transparent) 0%,color-mix(in srgb,var(--surface) 78%,transparent) 42%,rgba(228,197,106,.68) 72%,color-mix(in srgb,var(--surface) 78%,transparent) 100%); border:1px solid color-mix(in srgb,var(--line) 35%,transparent); text-shadow:0 1px 0 color-mix(in srgb,var(--onlive-shadow-color) 18%,transparent) } :scope[data-theme="dark"] .heroBadge--rank1 { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 95%,transparent) 0%,color-mix(in srgb,var(--surface) 82%,transparent) 42%,rgba(228,197,106,.74) 72%,color-mix(in srgb,var(--surface) 82%,transparent) 100%) } :scope[data-theme="dark"] .shortcut .shortcutIcon { background: color-mix(in srgb, var(--surface) 7%, transparent); border: 1px solid color-mix(in srgb, var(--line) 12%, var(--line)) } :scope[data-theme="dark"] .sitePopup {box-shadow:0 16px 38px color-mix(in srgb,var(--onlive-shadow-color) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.72) } :scope[data-theme="dark"] .sitePopupContent h2, :scope[data-theme="dark"] .sitePopupActions button+button {color:var(--text) } :scope[data-theme="dark"] :is(.communityPostList,.noticeBoard) :is(.boardTitleLink,.boardMobileTitle) .boardBadge--new {background:var(--surface) } :scope[data-theme="dark"] :is(.communityPostList,.noticeBoard) :is(.boardTitleLink,.boardMobileTitle) .boardBadge--new {color:var(--accent);border-color:var(--line) } :scope[data-theme="dark"] .signupWelcomeOverlay {background:color-mix(in srgb,var(--surface) 42%,transparent) } :scope[data-theme="dark"] .signupWelcomeModal {box-shadow:0 22px 70px color-mix(in srgb,var(--onlive-shadow-color) 13%,transparent),0 3px 12px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .signupWelcomeMark {background:var(--surface);border:1px solid var(--line) } :scope[data-theme="dark"] .signupWelcomeMark::after {border:1px solid var(--line) } :scope[data-theme="dark"] .signupWelcomeTitle {color:var(--muted) } :scope[data-theme="dark"] .signupWelcomeDescription {color:var(--muted) } :scope[data-theme="dark"] .signupWelcomeMember {border:1px solid var(--line) } :scope[data-theme="dark"] .signupWelcomeMemberIcon {background:var(--surface) } :scope[data-theme="dark"] .signupWelcomeMemberText strong {color:var(--muted) } :scope[data-theme="dark"] .signupWelcomeMemberText span {color:var(--muted) } :scope[data-theme="dark"] .signupWelcomeButton:hover {background:var(--accent) } :scope[data-theme="dark"] .signupWelcomeButton:focus-visible {outline:3px solid color-mix(in srgb,var(--line) 30%,transparent) } :scope[data-theme="dark"] .signupWelcomeFooter {color:var(--muted) } :scope[data-theme="dark"] .neneBonusOverlay { background:color-mix(in srgb,var(--surface) 42%,transparent) } :scope[data-theme="dark"] .neneBonusModal { box-shadow:0 20px 55px color-mix(in srgb,var(--onlive-shadow-color) 13%,transparent),0 3px 12px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .neneBonusSymbol { background:var(--surface); border:1px solid var(--line) } :scope[data-theme="dark"] .neneBonusSymbol::after { border:1px solid var(--line) } :scope[data-theme="dark"] .neneBonusTitle { color:var(--muted) } :scope[data-theme="dark"] .neneBonusDescription { color:var(--muted) } :scope[data-theme="dark"] .neneBonusReward { border:1px solid var(--line) } :scope[data-theme="dark"] .neneBonusRewardLabel { color:var(--muted) } :scope[data-theme="dark"] .neneBonusConfirm:hover { background:var(--accent) } :scope[data-theme="dark"] .neneBonusConfirm:focus-visible { outline:2px solid var(--line) } :scope[data-theme="dark"] .neneBonusFooter { color:var(--muted) } :scope[data-theme="dark"] .neneBonusOverlay {background:color-mix(in srgb,var(--surface) 56%,transparent) } :scope[data-theme="dark"] .eventSportDetail { --event-border:var(--line); --event-muted:var(--muted); color:var(--muted) } :scope[data-theme="dark"] .eventSportMain {border:1px solid var(--line) } :scope[data-theme="dark"] .eventSportBadge {border:1px solid var(--line);color:var(--muted) } :scope[data-theme="dark"] .eventSportDescription {color:var(--muted) } :scope[data-theme="dark"] .eventSportPrizeLabel {color:var(--muted) } :scope[data-theme="dark"] .eventSportPrizeRatio {color:var(--muted) } :scope[data-theme="dark"] .eventSportProgress {background:var(--surface) } :scope[data-theme="dark"] .eventSportDateRange {color:var(--muted) } :scope[data-theme="dark"] .eventSportMatchMeta {color:var(--muted) } :scope[data-theme="dark"] .eventSportMatchMeta strong {color:var(--muted) } :scope[data-theme="dark"] .eventSportTeamAbbr {border:1px solid var(--line) } :scope[data-theme="dark"] .eventSportTeamRole {color:var(--muted) } :scope[data-theme="dark"] .eventSportVs {color:var(--muted) } :scope[data-theme="dark"] .eventSportQuestion {color:var(--muted) } :scope[data-theme="dark"] .eventSportEntryState {border:1px dashed var(--line);color:var(--muted) } :scope[data-theme="dark"] .eventSportEntryState strong {color:var(--muted) } :scope[data-theme="dark"] .eventSportChoice {border:1px solid var(--line);color:var(--muted) } :scope[data-theme="dark"] .eventSportChoice:hover {border-color:var(--line) } :scope[data-theme="dark"] .eventSportChoice.selected {background:var(--surface) } :scope[data-theme="dark"] .eventSportChoiceRadio {border:1.5px solid var(--line) } :scope[data-theme="dark"] .eventSportSubmit:disabled {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .eventSportMiniCard {border:1px solid var(--line) } :scope[data-theme="dark"] .eventSportResultLabel {color:var(--muted) } :scope[data-theme="dark"] .eventSportResultValue {color:var(--muted) } :scope[data-theme="dark"] .eventSportNotice {color:var(--muted) } :scope[data-theme="dark"] .floatChat.is-mobile .floatChatPanel.sheet { --surface:var(--surface) } @media (max-width:760px), (hover:none) and (pointer:coarse) and (max-height:760px) { :scope[data-theme="dark"] .slipDock .slipSheet, :scope[data-theme="dark"] .slipDock .slipSheet {--text-secondary:var(--muted) } } :scope[data-theme="dark"] :is(.sportsChipRow,.sportsDateNav,.sportsSort,.highlightFilters) .tab.active, :scope[data-theme="dark"] .sportsDateNav .sportsDateValue, :scope[data-theme="dark"] .bcPage .bcSports .bcSport.active, :scope[data-theme="dark"] .shopDesk.is-gift .shopFilters.tabs .tab.active { box-shadow:0 3px 10px color-mix(in srgb,var(--onlive-shadow-color) 10%,transparent) } :scope[data-theme="dark"] :is( .sportsChipRow,.sportsDateNav,.sportsSort,.highlightFilters ) .tab.active, :scope[data-theme="dark"] .sportsDateNav .sportsDateValue, :scope[data-theme="dark"] .bcPage .bcSports .bcSport.active, :scope[data-theme="dark"] .shopDesk.is-gift .shopFilters.tabs .tab.active {box-shadow:0 4px 12px color-mix(in srgb,var(--onlive-shadow-color) 24%,transparent) } :scope[data-theme="dark"] :is(.sportsFilterControl.active,.sportsData .sportsChipRow .tab.active,.sportsData .sportsDateNav .tab.active,.sportsData .sportsDateNav .sportsDateValue,.sportsData .sportsSort .tab.active,.highlightFilters .tab.active,.bcPage .bcSports .bcSport.active) {box-shadow:0 3px 10px color-mix(in srgb,var(--onlive-shadow-color) 10%,transparent) } :scope[data-theme="dark"] :is(.sportsFilterControl.active,.sportsData .sportsChipRow .tab.active,.sportsData .sportsDateNav .tab.active,.sportsData .sportsDateNav .sportsDateValue,.sportsData .sportsSort .tab.active,.highlightFilters .tab.active,.bcPage .bcSports .bcSport.active) { box-shadow:0 4px 12px color-mix(in srgb,var(--onlive-shadow-color) 24%,transparent) } :scope[data-theme="dark"] .sportsFilterMenu {box-shadow:0 8px 22px color-mix(in srgb,var(--onlive-shadow-color) 12%,transparent) } :scope[data-theme="dark"] .sportsFilterMenu {box-shadow:0 8px 22px color-mix(in srgb,var(--onlive-shadow-color) 30%,transparent) } } @scope (.platform-ui[data-theme="dark"]) { :scope[data-theme="dark"]:has(> .hd-sidebar) > .topbar .headerTools :is(.iconButton,.headerInbox):active { background: var(--surface) } :scope[data-theme="dark"] .hd-nav-disclosure.hd-active { background: var(--surface) } :scope[data-theme="dark"] .hd-support .hd-support-lifetime { color: var(--muted) } :scope[data-theme="dark"] .hd-rank .rankRow { border-bottom: 1px solid var(--line) } :scope[data-theme="dark"] .hd :is(.hd-profile, .hd-rank > .ranking, .hd-rank > .hd-card, .hd-deliveries) { --hd-sidebar-heading-accent: var(--accent) } } @scope (.platform-ui[data-theme="dark"]) { :scope[data-theme="dark"] .opsApp { --admin-border:var(--line); --admin-text:var(--muted); --admin-text-muted:var(--muted); --admin-info-bg:var(--surface); --admin-field-line:var(--line); --admin-nav:var(--muted); --admin-nav-hover:var(--text); --admin-overlay:color-mix(in srgb,var(--onlive-shadow-color) 38%,transparent); --admin-shadow-modal:0 16px 40px color-mix(in srgb,var(--onlive-shadow-color) 16%,transparent) } :scope[data-theme="dark"] .opsApp, :scope[data-theme="dark"] .opsApp { --admin-overlay:color-mix(in srgb,var(--onlive-shadow-color) 55%,transparent) } :scope[data-theme="dark"] .opsHubCard:hover {box-shadow:0 4px 14px color-mix(in srgb,var(--onlive-shadow-color) 4%,transparent) } :scope[data-theme="dark"] .tb-silver {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .tb-silver i {background:var(--accent) } :scope[data-theme="dark"] .tb-platinum {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .tb-platinum i {background:var(--accent) } :scope[data-theme="dark"] .tb-diamond {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .tb-diamond i {background:var(--accent) } :scope[data-theme="dark"] .tb-master {background:var(--surface);color:var(--muted) } :scope[data-theme="dark"] .tb-master i {background:var(--accent) } :scope[data-theme="dark"] .tb-challenger {background:var(--surface) } :scope[data-theme="dark"] .tb-challenger i {color:var(--muted) } :scope[data-theme="dark"] .opsApp .tb-silver, :scope[data-theme="dark"] .opsApp .tb-silver {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .opsApp .tb-platinum, :scope[data-theme="dark"] .opsApp .tb-platinum {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .opsApp .tb-diamond, :scope[data-theme="dark"] .opsApp .tb-diamond {background:var(--surface);color:var(--accent) } :scope[data-theme="dark"] .opsApp .tb-master, :scope[data-theme="dark"] .opsApp .tb-master {background:var(--surface);color:var(--text) } :scope[data-theme="dark"] .giftColorSwatch {border:1px solid color-mix(in srgb,var(--line) 12%,transparent) } :scope[data-theme="dark"] .giftColorSwatch--auto { background: linear-gradient(135deg, color-mix(in srgb,var(--accent) 35%,transparent), color-mix(in srgb,var(--accent) 28%,transparent) 48%, rgba(196,120,58,.32)) } :scope[data-theme="dark"] .popupPreviewFrame {background:var(--surface) } :scope[data-theme="dark"] .popupPreviewHero {background:linear-gradient(112deg,var(--surface),var(--surface)) } }