/* Public-service foundations. Administrator documents never opt into this scope. Season frames, name colours and enhancement badges remain owned by FCPlayer. */ :root body.user-service { --ui-bg:#fff; --ui-surface:#fff; --ui-surface-subtle:#f5f6f7; --ui-ink:#202124; --ui-muted:#66686c; --ui-line:#e3e4e6; --ui-accent:#202124; --ui-accent-soft:#f0f1f2; --ui-on-accent:#fff; --ui-highlight:#202124; --ui-danger:#a22d2d; --ui-focus:#707378; --ui-radius:4px; --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px; --ui-space-4:16px; --ui-space-6:24px; --ui-space-8:32px; --ui-rail-width:max(216px, var(--configured-navigation-ad-width, 0px)); color:var(--ui-ink); background:var(--ui-bg); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif; font-size:14px; line-height:1.55; } :root[data-theme='dark'] body.user-service { --ui-bg:#18191b; --ui-surface:#222326; --ui-surface-subtle:#2c2e31; --ui-ink:#f1f2f3; --ui-muted:#b5b7bc; --ui-line:#414348; --ui-accent:#f1f2f3; --ui-accent-soft:#303236; --ui-on-accent:#18191b; --ui-highlight:#f1f2f3; --ui-danger:#ffaaa2; --ui-focus:#b5b7bc; } :root body.user-service .ui-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } :root body.user-service .ui-skip-link { position:fixed; top:8px; left:12px; z-index:20000; padding:10px 16px; border:2px solid var(--ui-focus); background:var(--ui-surface); color:var(--ui-ink); transform:translateY(-180%); } :root body.user-service .ui-skip-link:focus { transform:none; } :root body.user-service :where(.service-rail,#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView,#playerModal,#squadSearchModal,#playersModeView,#trainingModeView,#metaInsightModeView) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--ui-focus); outline-offset:3px; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView) :where(button,input,select,textarea) { font-family:inherit; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView,#playerModal) button:disabled { opacity:.55; cursor:default; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView) :where(input,select,textarea) { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-line); border-radius:4px; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView) :where(input,textarea)::placeholder { color:var(--ui-muted); opacity:1; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView) .btn-primary { color:var(--ui-on-accent); background:var(--ui-accent); border-color:var(--ui-accent); box-shadow:none; } :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView) .btn-ghost { color:var(--ui-ink); background:var(--ui-surface); border-color:var(--ui-line); box-shadow:none; } :root body.user-service .ui-field { display:flex; flex-direction:column; min-width:0; gap:6px; font-size:13px; color:var(--ui-muted); } :root body.user-service :where(#tradeForm,#tradeEditForm) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:end; } :root body.user-service :where(#tradeForm,#tradeEditForm) :where(input,select,button) { width:100%; min-width:0; height:46px; box-sizing:border-box; font-size:16px; } /* A persistent rail makes service changes independent of the current page's scroll. */ :root body.user-service .service-rail { position:fixed; inset:0 auto 0 0; width:var(--ui-rail-width); z-index:35; box-sizing:border-box; display:flex; flex-direction:column; padding:32px 20px 24px; background:var(--ui-surface); border-right:1px solid var(--ui-line); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } :root body.user-service .service-rail .brand-link { width:100%; padding:0; background:none; border:0; box-shadow:none; border-radius:0; } :root body.user-service .service-rail .brand-logo { width:172px; height:auto; max-width:100%; } :root body.user-service #modeTabs { display:flex; flex-direction:column; flex:0 0 auto; gap:6px; padding:28px 0 0; width:100%; overflow:visible; background:none; border:0; box-shadow:none; border-radius:0; } :root body.user-service #modeTabs button { position:relative; display:flex; align-items:center; gap:13px; width:100%; min-height:50px; padding:12px 14px; border:0; border-radius:4px; box-shadow:none; background:none; color:var(--ui-muted); font-size:14px; font-weight:650; text-align:left; } :root body.user-service #modeTabs button svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; } :root body.user-service #modeTabs button.active { background:var(--ui-accent); color:var(--ui-on-accent); } :root body.user-service #modeTabs button::after { content:none; } :root body.user-service #modeTabs .mode-tab-short { display:none; } :root body.user-service .service-rail-foot { margin-top:auto; display:flex; flex-direction:column; gap:5px; padding:24px 8px 0; border-top:1px solid var(--ui-line); font-size:11px; color:var(--ui-muted); } :root body.user-service .service-rail-foot a { margin-top:14px; color:var(--ui-ink); text-decoration:none; } :root body.user-service .service-rail > #promoSlotLeftWrap { display:none !important; } @media(min-width:1024px) { :root body.user-service .service-rail > #promoSlotLeftWrap:not(.hidden):not(.ad-no-fill) { display:block !important; position:static; inset:auto; width:var(--configured-ad-width,160px); height:var(--configured-ad-height,600px); min-height:var(--configured-ad-height,600px); flex:0 0 auto; margin:24px auto 16px; padding:0; border:0; background:transparent; overflow:hidden; } } :root body.user-service:has(> #serviceMain) { display:flex; flex-direction:column; min-height:100svh; box-sizing:border-box; } :root body.user-service #serviceMain { display:flex; flex-direction:column; flex:1 0 auto; } :root body.user-service #serviceMain > * { flex-shrink:0; } :root body.user-service #serviceMain > #promoSlotBottomWrap { box-sizing:content-box; margin-top:auto; padding-top:48px; margin-bottom:0; } :root body.user-service #priceModeView { display:block; width:100%; max-width:none; } :root body.user-service #priceModeView > .price-main-content { width:100%; max-width:none; } :root body.user-service #priceModeView > .promo-slot-side { display:none !important; } :root body.user-service.ads-enabled-preview.side-ads-fit > main.wrap { max-width:var(--side-ad-wrap-width,1376px); } :root body.user-service #priceModeView.ads-enabled.side-ads-fit { display:grid; grid-template-columns:1000px var(--side-ad-right-width); justify-content:center; gap:14px; align-items:start; } :root body.user-service #priceModeView.ads-enabled.side-ads-fit > .price-main-content { width:1000px; max-width:1000px; } :root body.user-service #priceModeView.ads-enabled.side-ads-fit > #promoSlotRightWrap:not(.hidden):not(.ad-no-fill) { display:block !important; position:sticky; top:12px; } :root body.user-service > main.wrap { width:calc(100% - var(--ui-rail-width)); max-width:1376px; margin:0 0 0 var(--ui-rail-width); padding:0 40px; box-sizing:border-box; } :root body.user-service main.wrap > .brand-row { display:none; align-items:center; min-height:36px; height:auto; margin:0; padding:0; border-bottom:1px solid var(--ui-line); } :root body.user-service main.wrap > .brand-row.has-global-notice-ticker { display:flex; } :root body.user-service .brand-row #globalNoticeBanner { position:static; width:100%; height:auto; min-height:36px; background:none; border:0; box-shadow:none; border-radius:0; } :root body.user-service .brand-row #globalNoticeBanner .notice-banner-inner { padding:0; min-height:36px; } :root body.user-service main.wrap > .top-row { display:flex; align-items:center; justify-content:flex-end; gap:16px; margin:0 0 16px; padding:8px 0; border:0; } :root body.user-service #authArea { gap:8px; flex:0 0 auto; background:transparent; border-radius:0; box-shadow:none; } :root body.user-service #authArea .global-search-btn, :root body.user-service #googleLoginBtn { width:44px; height:44px; min-height:44px; border:1px solid var(--ui-line); border-radius:4px; background:var(--ui-surface); color:var(--ui-ink); box-shadow:none; } :root body.user-service .global-bottom { margin:48px 40px 0 calc(var(--ui-rail-width) + 40px); max-width:1296px; padding:24px 0; border-top:1px solid var(--ui-line); color:var(--ui-muted); font-size:11px; line-height:1.9; } :root body.user-service .global-bottom a { color:var(--ui-muted); } /* Search is the entry action; current player data follows without a marketing hero. */ :root body.user-service #homeModeView { width:100%; max-width:none; margin:0; } :root body.user-service .home-search-field { display:flex; min-height:56px; padding:5px; border:2px solid var(--ui-line); border-radius:4px; background:var(--ui-surface); box-shadow:none; } :root body.user-service .home-search-field:focus-within { outline:0; border-color:var(--ui-focus); box-shadow:none; } :root body.user-service .home-search-entry { position:relative; width:100%; max-width:860px; margin:0 0 24px; } :root body.user-service #homeSearchInput { border:0 !important; border-radius:0; outline:none !important; box-shadow:none !important; min-width:0; height:44px; padding-left:42px; padding-right:6px; font-size:16px; color:var(--ui-ink); background:transparent; } :root body.user-service .home-search-field button { flex:0 0 64px; min-width:64px; height:44px; background:var(--ui-accent); color:var(--ui-on-accent); border:0; border-radius:2px; box-shadow:none; } :root body.user-service .home-search-icon { left:17px; color:var(--ui-muted); } :root body.user-service .home-search-signal { animation:none; } :root body.user-service .home-search-status { margin:10px 0 0; color:var(--ui-muted); font-size:12px; } :root body.user-service .home-search-status:empty { display:none; } :root body.user-service .home-search-status[data-error='true'] { color:var(--ui-danger); } :root body.user-service .home-search-results { z-index:40; width:100%; border:1px solid var(--ui-line); border-radius:4px; background:var(--ui-surface); box-shadow:0 8px 24px #142b201a; } :root body.user-service .home-search-group-label { color:var(--ui-muted); } /* Keep names, season choices and prices readable inside the existing suggestion flow. */ :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) { background:var(--ui-surface); border-radius:0; box-shadow:none; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-price { display:grid; gap:3px; color:var(--ui-ink); line-height:1.6; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-price-line { display:block; font-size:12px; overflow-wrap:anywhere; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-price-line::before { content:none; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-name { min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.5; color:var(--ui-ink); } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-row-top { align-items:center; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .card-fav-btn { width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px; margin-left:-10px; margin-right:-4px; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-season-chip { min-height:44px; border-radius:4px; background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-line); } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-season-chip.selected { background:var(--ui-accent-soft); border-color:var(--ui-accent); } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-season-chip.active { outline-color:var(--ui-focus); } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-as-candidate.suggest-active { background:var(--ui-accent-soft) !important; } :root body.user-service .home-search-result { color:var(--ui-ink); border-radius:4px; } :root body.user-service .home-search-result em { color:var(--ui-muted); } :root body.user-service .home-search-result:hover { background:var(--ui-surface-subtle); } :root body.user-service .home-search-result:focus-visible { outline:2px solid var(--ui-focus); outline-offset:-2px; background:var(--ui-accent-soft); } :root body.user-service #modeTabs button:not(.active):hover { background:var(--ui-surface-subtle); color:var(--ui-ink); } :root body.user-service .home-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; margin:0 0 28px; border:0; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); border-radius:0; background:none; box-shadow:none; } :root body.user-service .home-quick-card { display:flex; min-width:0; align-items:center; gap:12px; min-height:56px; padding:10px 12px; background:none; border:0; border-radius:0; box-shadow:none; color:var(--ui-ink); } :root body.user-service .home-quick-card + .home-quick-card { border-left:1px solid var(--ui-line); } :root body.user-service .home-quick-card:hover { background:var(--ui-surface-subtle); transform:none; box-shadow:none; } :root body.user-service .home-quick-icon { width:28px; height:28px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--ui-accent); } :root body.user-service .home-quick-icon svg { color:var(--ui-accent); animation:none; } :root body.user-service .home-quick-card strong { color:var(--ui-ink); font-size:14px; } :root body.user-service .home-quick-card em { display:block; color:var(--ui-muted); font-size:12px; white-space:normal; } :root body.user-service .home-content-grid { display:block; } :root body.user-service .home-content-panel { padding:0; margin:0 0 40px; background:none; border:0; border-radius:0; box-shadow:none; } :root body.user-service .home-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; } :root body.user-service .home-section-head h2 { margin:0; font-size:22px; letter-spacing:-.04em; color:var(--ui-ink); } :root body.user-service .home-text-link { min-height:44px; padding:8px 0; color:var(--ui-accent); font-size:12px; } :root body.user-service .home-board-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding-top:28px; border-top:2px solid var(--ui-ink); } :root body.user-service .home-board-block + .home-board-block { margin:0; padding:0 0 0 32px; border:0; border-left:1px solid var(--ui-line); } :root body.user-service .home-board-row { grid-template-columns:auto minmax(0,1fr) auto; min-height:44px; padding:6px 0; border-color:var(--ui-line); background:none; color:var(--ui-ink); } :root body.user-service .home-board-title { font-size:14px; color:var(--ui-ink); } :root body.user-service .home-board-comments { color:var(--ui-accent); } :root body.user-service .home-board-date { color:var(--ui-muted); } /* Reuse official compact cards. Change the surrounding data composition only. */ :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs { display:flex; gap:24px; flex-wrap:wrap; margin:0 0 16px; border-bottom:1px solid var(--ui-line); overflow:visible; } :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs button { min-height:44px; padding:10px 0; font-size:13px; color:var(--ui-muted); background:none; border:0; border-radius:0; } :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs button.active { color:var(--ui-ink); font-weight:800; } :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs button::after { background:var(--ui-accent); } :root body.user-service :where(#homeCandidateList,#buyTopList) { display:grid; gap:0; margin:0; padding:0; } :root body.user-service #homeCandidateList { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-item { position:relative; display:grid; grid-template-columns:86px minmax(0,1fr); grid-template-areas:'media data'; align-items:center; gap:16px; padding:20px 0; border:0; border-bottom:1px solid var(--ui-line); border-radius:0; background:none; box-shadow:none; overflow:visible; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-main { grid-area:data; min-width:0; display:block; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-media { grid-area:media; position:relative; inset:auto; display:block; width:86px; height:101px; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; overflow:visible; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-row-top { position:static; display:flex; gap:6px; padding-right:44px; margin:0 0 10px; align-items:center; flex-wrap:wrap; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-name { min-width:0; flex:1 1 90px; font-size:16px; line-height:1.4; color:var(--ui-ink); white-space:normal; overflow-wrap:anywhere; } :root body.user-service :where(#homeCandidateList,#buyTopList) .card-fav-btn { position:absolute; right:0; top:14px; width:44px; height:44px; min-width:44px; min-height:44px; margin:0; background:none; border:0; transform:none; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-row-sub { display:block; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-left { display:block; min-width:0; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; border:0; border-radius:0; background:none; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0; min-width:0; border:0; background:none; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-icon { display:none; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-item > span { color:var(--ui-muted); font-size:10px; line-height:1.5; white-space:normal; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-item strong { font-size:17px; line-height:1.4; color:var(--ui-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-item em { font-size:10px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-trend { grid-column:1/-1; flex-direction:row; gap:8px; align-items:baseline; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-trend strong { font-size:12px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-expected { display:flex; gap:4px; flex-wrap:wrap; margin-top:12px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-expected > span { border-radius:2px; font-size:10px; line-height:1.55; padding:2px 5px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-clickable:hover { background:var(--ui-surface-subtle); transform:none; } /* Price is a workbench: persistent conditions and a comparable sequence of player data. */ :root body.user-service .price-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:28px; } :root body.user-service .price-page-heading h1 { font-size:38px; line-height:1.2; letter-spacing:-.055em; color:var(--ui-ink); margin:10px 0 0; } :root body.user-service .price-page-heading p { margin:0; font-size:13px; line-height:1.75; color:var(--ui-muted); } :root body.user-service #secCandidates { background:none; border:0; border-radius:0; padding:0; box-shadow:none; } :root body.user-service .price-workbench { display:grid; grid-template-columns:190px minmax(0,1fr); gap:28px; border-top:0; padding-top:0; } :root body.user-service .price-workbench-filters { min-width:0; } :root body.user-service .price-workbench-filters h2 { margin:0 0 18px; font-size:14px; color:var(--ui-ink); } :root body.user-service .price-workbench .candidate-head { display:flex; flex-direction:column; gap:20px; margin:0; padding:0; overflow:visible; } :root body.user-service #priceFilterGroup { display:flex; flex-direction:column; gap:7px; width:100%; align-items:stretch; overflow:visible; } :root body.user-service #priceFilterGroup .filter-chip { display:flex; min-height:44px; padding:10px 12px; background:var(--ui-surface); color:var(--ui-muted); border:1px solid var(--ui-line); border-radius:3px; box-shadow:none; } :root body.user-service #priceFilterGroup .filter-chip.active { background:var(--ui-accent); color:var(--ui-on-accent); border-color:var(--ui-accent); } :root body.user-service #priceFilterGroup .filter-chip:focus-within { outline:2px solid var(--ui-focus); outline-offset:2px; } :root body.user-service #priceFilterGroup .filter-range { width:100%; margin:6px 0 0; flex-wrap:wrap; } :root body.user-service #priceFilterGroup .range-hint { grid-column:1/-1; margin:0; color:var(--ui-muted); font-size:11px; line-height:1.5; } :root body.user-service #priceFilterGroup :where(input,button) { min-height:44px; } :root body.user-service #priceOnlyContent .price-search-entry-btn { width:100%; min-height:44px; background:var(--ui-highlight); color:var(--ui-on-accent); border:1px solid var(--ui-highlight); border-radius:3px; } :root body.user-service .price-workbench-results { min-width:0; padding-left:28px; border-left:1px solid var(--ui-line); } :root body.user-service #priceOnlyContent .subpanel { padding:0; background:none; border:0; border-radius:0; box-shadow:none; } :root body.user-service #buyTopList .candidate-item { grid-template-columns:88px minmax(0,1fr); padding:22px 0; gap:24px; } :root body.user-service #buyTopList .candidate-readout-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } :root body.user-service #buyTopList .candidate-readout-trend { grid-column:auto; flex-direction:column; gap:2px; } :root body.user-service #buyTopList .candidate-readout-trend strong { font-size:17px; } :root body.user-service #buyTopList .candidate-name { font-size:18px; } @media (min-width:768px) { :root body.user-service #buyTopList .candidate-item { grid-template-columns:116px minmax(0,1fr); gap:20px; } :root body.user-service #buyTopList .candidate-media { width:116px; height:136px; } :root body.user-service #buyTopList .candidate-readout-grid { width:100%; max-width:600px; gap:16px; } :root body.user-service #buyTopList .candidate-item .enh-day-card { grid-template-columns:116px minmax(0,1fr); gap:20px; } } :root body.user-service #candidateListScroll { height:auto; max-height:none; overflow:visible; } :root body.user-service #candidateLoadMoreWrap { margin-top:20px; padding:16px 0; border-top:1px solid var(--ui-line); } :root body.user-service #candidateLoadMoreBtn { min-height:44px; min-width:140px; } :root body.user-service #marketQuestionResultModal .market-question-result-sheet { background:var(--ui-surface); border-radius:6px; } :root body.user-service #marketQuestionResultModal .market-question-result-icon { background:var(--ui-accent-soft); border:0; border-radius:4px; box-shadow:none; } :root body.user-service #marketQuestionResultModal :where(.mq-star-main,.mq-star-sub) { animation:none; filter:none; fill:var(--ui-accent); } :root body.user-service #marketQuestionResultModal .market-question-result-actions button { min-height:44px; border-radius:4px; box-shadow:none; } @media (min-width:1592px) { /* Center navigation and content as one shell; keep their existing 40px gap. */ :root body.user-service:has(> #serviceMain) > .service-rail { left:calc((100% - var(--ui-rail-width) - 1376px)/2); } :root body.user-service > main.wrap { margin-left:calc(var(--ui-rail-width) + (100% - var(--ui-rail-width) - 1376px)/2); } :root body.user-service:has(> #serviceMain) > .global-bottom { width:1296px; margin-left:calc(var(--ui-rail-width) + (100% - var(--ui-rail-width) - 1376px)/2 + 40px); margin-right:0; } :root body.user-service.ads-enabled-preview.side-ads-fit:has(> #serviceMain) > .service-rail { left:calc((100% - var(--ui-rail-width) - var(--side-ad-wrap-width,1376px))/2); } :root body.user-service.ads-enabled-preview.side-ads-fit > main.wrap { margin-left:calc(var(--ui-rail-width) + (100% - var(--ui-rail-width) - var(--side-ad-wrap-width,1376px))/2); } :root body.user-service.ads-enabled-preview.side-ads-fit:has(> #serviceMain) > .global-bottom { margin-left:calc(var(--ui-rail-width) + (100% - var(--ui-rail-width) - var(--side-ad-wrap-width,1376px))/2 + 40px); } } @media (max-width:1279px) { :root body.user-service { --ui-rail-width:max(192px, var(--configured-navigation-ad-width, 0px)); } :root body.user-service .service-rail { padding-inline:16px; } :root body.user-service > main.wrap { padding-inline:28px; } :root body.user-service .price-workbench { grid-template-columns:160px minmax(0,1fr); gap:20px; } :root body.user-service .price-workbench-results { padding-left:20px; } :root body.user-service .home-quick-card { padding-inline:8px; gap:8px; } :root body.user-service #homeCandidateList { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; } } @media (max-width:1023px) { :root body.user-service { --ui-rail-width:0px; padding-top:70px; padding-bottom:72px; } :root body.user-service .service-rail { inset:0 0 auto; width:100%; height:64px; flex-direction:row; align-items:center; padding:0 24px; border-right:0; border-bottom:1px solid var(--ui-line); } :root body.user-service .service-rail .brand-link { width:160px; } :root body.user-service .service-rail-foot { display:none; } :root body.user-service #modeTabs { position:fixed; inset:auto 0 0; flex-direction:row; align-items:stretch; gap:0; width:100%; padding:4px 8px max(4px,env(safe-area-inset-bottom)); border-top:1px solid var(--ui-line); background:var(--ui-surface); z-index:35; } :root body.user-service #modeTabs button { flex:1; flex-direction:column; justify-content:center; gap:4px; min-width:0; min-height:58px; padding:6px 2px; font-size:11px; text-align:center; } :root body.user-service #modeTabs button.active { background:var(--ui-accent-soft); color:var(--ui-ink); } :root body.user-service > main.wrap { width:100%; margin:0; padding:0 24px; } :root body.user-service main.wrap > .top-row { height:0; padding:0; margin:0; } :root body.user-service #authArea { position:fixed; top:10px; right:24px; z-index:36; } :root body.user-service .global-bottom { margin:40px 24px 0; } :root body.user-service .home-search-results { width:min(650px,calc(100vw - 48px)); max-height:min(440px,58vh,var(--ui-search-space,58vh)); overscroll-behavior:contain; } :root body.user-service .home-quick-card em { font-size:12px; } } @media (max-width:767px) { :root body.user-service #modeTabs button { overflow:hidden; } :root body.user-service #modeTabs button span { max-width:100%; white-space:nowrap; } :root body.user-service #modeTabs .mode-tab-full { display:none; } :root body.user-service #modeTabs .mode-tab-short { display:block; } :root body.user-service { --ui-mobile-gutter:16px; padding-top:64px; } :root body.user-service > main.wrap { padding:0 var(--ui-mobile-gutter); } :root body.user-service .service-rail { padding-inline:var(--ui-mobile-gutter); } :root body.user-service .service-rail .brand-link { width:146px; } :root body.user-service #authArea { right:var(--ui-mobile-gutter); } :root body.user-service main.wrap > .top-row { height:0; margin:0; padding:0; } :root body.user-service .home-search-field { min-height:58px; padding:4px; } :root body.user-service #homeSearchInput { height:48px; font-size:16px; padding-left:36px; } :root body.user-service .home-search-icon { left:13px; width:18px; } :root body.user-service .home-search-field button { height:48px; min-width:56px; flex-basis:56px; font-size:13px; } :root body.user-service .home-search-results { width:100%; max-height:min(60dvh,var(--ui-search-space,60dvh)); overflow:auto; overscroll-behavior:contain; } :root body.user-service .home-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:30px; } :root body.user-service .home-quick-card { min-height:52px; gap:8px; padding:10px 8px; } :root body.user-service .home-quick-card + .home-quick-card { border-left:0; } :root body.user-service .home-quick-card:nth-child(even) { border-left:1px solid var(--ui-line); } :root body.user-service .home-quick-card:nth-child(n+3) { border-top:1px solid var(--ui-line); } :root body.user-service .home-quick-card strong { font-size:14px; } :root body.user-service .home-section-head h2 { font-size:20px; } :root body.user-service #homeCandidateList { grid-template-columns:minmax(0,1fr); } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-item { gap:18px; padding:18px 0; grid-template-columns:76px minmax(0,1fr); } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-media { width:76px; height:90px; } :root body.user-service .home-board-panel { display:block; padding-top:24px; } :root body.user-service .home-board-block + .home-board-block { margin-top:28px; padding:24px 0 0; border:0; border-top:1px solid var(--ui-line); } :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs { gap:18px; } :root body.user-service :where(#homeModeView,#priceOnlyContent) .rank-tabs button { font-size:12px; } :root body.user-service .price-page-heading { display:block; padding-bottom:24px; } :root body.user-service .price-page-heading h1 { font-size:32px; } :root body.user-service .price-page-heading p { margin-top:12px; font-size:12px; } :root body.user-service .price-workbench { display:flex; flex-direction:column; gap:22px; padding-top:0; } :root body.user-service .price-workbench-filters h2 { margin-bottom:10px; font-size:12px; } :root body.user-service .price-workbench .candidate-head { display:block; } :root body.user-service #priceFilterGroup { flex-direction:row; flex-wrap:wrap; gap:6px; } :root body.user-service #priceFilterGroup .filter-chip { flex:1 1 auto; justify-content:center; padding:8px 9px; font-size:12px; } :root body.user-service #priceFilterGroup .filter-range { width:auto; margin:0; flex:0 1 auto; } :root body.user-service #priceOnlyContent .price-search-entry-btn { margin-top:10px; } :root body.user-service .price-workbench-results { padding:0; border:0; } :root body.user-service #buyTopList .candidate-readout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } :root body.user-service #buyTopList .candidate-readout-trend { grid-column:1/-1; flex-direction:row; align-items:baseline; gap:8px; } :root body.user-service #buyTopList .candidate-readout-trend strong { font-size:12px; } :root body.user-service #buyTopList .candidate-name { font-size:16px; } :root body.user-service .global-bottom { margin:32px 18px 0; } } @media (prefers-reduced-motion:reduce) { :root body.user-service :where(#homeModeView,#priceOnlyContent,#recordsModeView,#boardModeView,#playerModal) :where(.candidate-card,.candidate-clickable,.candidate-media,.home-quick-card,.home-search-field,.modal-sheet) { animation:none; transition:none; } } /* Retire legacy viewport sizing only in the opted-in public shell. */ :root:has(body.user-service) { scrollbar-gutter:auto; } :root body.user-service { display:block; } :root body.user-service > main.wrap { display:block; } :root body.user-service main.wrap > .top-row { width:100%; max-width:none; } :root body.user-service .brand-row .global-notice-ticker { position:static; transform:none; color:var(--ui-muted); } :root body.user-service .brand-row .global-notice-track { animation:none; transform:none; width:auto; min-width:0; max-width:100%; overflow:auto; padding:8px 0; font-size:11px; } @media (max-width:1023px) { :root body.user-service main.wrap > .top-row { z-index:auto; } :root body.user-service main.wrap > .brand-row, :root body.user-service main.wrap > .brand-row.has-global-notice-ticker { display:none; } :root body.user-service > main.wrap { padding:0 24px !important; } } @media (max-width:767px) { :root body.user-service > main.wrap { padding:0 var(--ui-mobile-gutter) !important; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-media { height:90px; } } /* Range inputs are a bounded form, including the desktop condition rail. */ @media (min-width:768px) { :root body.user-service #priceFilterGroup .range-inline { position:static; display:grid; grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr); gap:6px; width:100%; min-width:0; padding:0; background:none; border:0; box-shadow:none; } :root body.user-service #priceFilterGroup .range-field { width:auto; min-width:0; } :root body.user-service #priceFilterGroup .range-field input { width:100%; min-width:0; padding:8px; font-size:12px; } :root body.user-service #candidateRangeApply { grid-column:1/-1; width:100%; } :root body.user-service #candidateRangeToggle { display:none; } } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-readout-item > span { font-size:12px; } :root body.user-service :where(#homeCandidateList,#buyTopList) .candidate-expected > span { font-size:12px; } :root body.user-service #priceOnlyContent :where(#candidateRangeToggle,#candidateRangeApply) { color:var(--ui-ink); background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:3px; } @media (max-width:767px) { :root body.user-service #priceFilterGroup { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; overflow:visible; padding:0; } :root body.user-service #priceFilterGroup .filter-chip { min-width:0; min-height:44px; justify-content:center; padding:8px 6px; font-size:12px; line-height:1.35; white-space:normal; text-align:center; border-radius:3px; } :root body.user-service #priceFilterGroup .filter-range { grid-column:1/-1; position:static; display:grid; width:100%; min-width:0; margin:0; padding:0; gap:6px; box-sizing:border-box; } :root body.user-service #candidateRangeToggle { width:100%; padding:8px 10px; font-size:12px; } :root body.user-service #priceFilterGroup .range-inline { display:none; width:100%; min-width:0; max-width:100%; box-sizing:border-box; } :root body.user-service #priceFilterGroup .filter-range.open { display:grid; grid-template-columns:1fr; gap:8px; width:100%; padding:8px; background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:4px; box-shadow:0 8px 20px rgba(15,23,42,.10); } :root body.user-service #priceFilterGroup .filter-range.open > #candidateRangeToggle { justify-self:stretch; } :root body.user-service #priceFilterGroup .filter-range.open .range-inline { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; padding:0; background:transparent; border:0; box-shadow:none; } :root body.user-service #priceFilterGroup .range-field { min-width:0; width:100%; } :root body.user-service #priceFilterGroup .range-field input { min-width:0; width:100%; box-sizing:border-box; font-size:16px; } :root body.user-service #priceFilterGroup .range-dash { text-align:center; } :root body.user-service #candidateRangeApply { grid-column:1/-1; width:100%; } :root body.user-service #candidateFilterHelp { grid-column:1/-1; } } /* Enhancement candidates expose their distinct attempt / target / materials model. */ :root body.user-service #buyTopList .candidate-item.enhancement-day-item, :root body.user-service #buyTopList .candidate-item.enh-day-note-tabs { display:block; } :root body.user-service #buyTopList .enh-day-card { display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-areas:'media data'; gap:24px; align-items:center; padding:0; background:none; border:0; } :root body.user-service #buyTopList .enh-day-card .candidate-main { width:auto; padding:0; } :root body.user-service #buyTopList .enh-day-card .candidate-row-top { padding-right:0; } :root body.user-service #buyTopList :where(.enh-day-prices,.enh-day-summary) { background:none; border-color:var(--ui-line); border-radius:0; } :root body.user-service #buyTopList :where(.enh-day-prices,.enh-day-summary) strong { color:var(--ui-ink); font-size:17px; } :root body.user-service #buyTopList :where(.enh-day-prices,.enh-day-summary) em { color:var(--ui-muted); font-size:11px; } :root body.user-service #buyTopList .enh-day-note-tabs { padding:0 0 16px; } :root body.user-service #buyTopList .enh-day-note-tab { min-height:44px; border-radius:3px; background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-line); } :root body.user-service #buyTopList .enh-day-note-panel { color:var(--ui-muted); background:var(--ui-surface); border-color:var(--ui-line); line-height:1.65; } @media(max-width:767px) { :root body.user-service #buyTopList .enh-day-card { grid-template-columns:72px minmax(0,1fr); gap:14px; } :root body.user-service #buyTopList :where(.enh-day-prices,.enh-day-summary) { gap:8px; } :root body.user-service #buyTopList :where(.enh-day-prices,.enh-day-summary) strong { font-size:13px; } } :root body.user-service :where(#homeCandidateList,#buyTopList) > .candidate-item:not(.candidate-clickable):not(.enh-day-note-tabs) { display:block; padding:28px 0; color:var(--ui-muted); line-height:1.75; } :root body.user-service #priceFilterGroup.is-upgrade-filter .filter-chip { white-space:normal; line-height:1.5; } @media(max-width:767px) { :root body.user-service #priceFilterGroup.is-upgrade-filter { grid-template-columns:repeat(2,minmax(0,1fr)); } :root body.user-service #priceFilterGroup.is-upgrade-filter .filter-chip { font-size:12px; padding:8px; } } :root body.user-service :where(#homeModeView,#priceOnlyContent) .candidate-card { animation:userCandidateReveal .16s ease-out both; } @keyframes userCandidateReveal { from { opacity:.6; } to { opacity:1; } } @media(prefers-reduced-motion:reduce) { :root body.user-service :where(#homeModeView,#priceOnlyContent) .candidate-card { animation:none; } } /* Small visible stars, full hit areas, and one focus boundary for composite search. */ :root body.user-service .fav-btn { width:44px; height:44px; min-width:44px; min-height:44px; padding:0 !important; border:0 !important; border-radius:3px !important; background:transparent !important; color:var(--ui-muted) !important; box-shadow:none !important; transform:none; } :root body.user-service .fav-btn .fav-icon { width:17px; height:17px; } :root body.user-service .fav-btn.active { color:var(--ui-accent) !important; } :root body.user-service .fav-btn:hover { background:var(--ui-accent-soft) !important; color:var(--ui-accent) !important; } :root body.user-service .fav-btn:focus-visible { outline:2px solid var(--ui-focus); outline-offset:-7px; } :root body.user-service #homeSearchInput:focus-visible { outline:0 !important; box-shadow:none !important; } :root body.user-service .home-search-field button:hover { transform:none; background:var(--ui-accent); } :root body.user-service .home-search-results { top:calc(100% + 6px); max-height:min(500px,65vh); } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-as-candidate:not(.suggest-seasonbar) { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; min-height:88px; padding:12px; border:0; border-bottom:1px solid var(--ui-line) !important; border-radius:0; box-shadow:none; align-items:center; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-as-candidate:not(.suggest-seasonbar) .candidate-main { grid-column:2; min-width:0; padding:0; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-as-candidate:not(.suggest-seasonbar) .candidate-media { grid-column:1; grid-row:1; position:relative; inset:auto; width:56px; height:66px; margin:0; border:0; background:none; transform:none; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-row-top { position:static; padding-right:24px; margin-bottom:5px; gap:5px; flex-wrap:wrap; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-name { font-size:13px; flex:0 1 auto; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .card-fav-btn { position:absolute; top:2px; right:2px; margin:0; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-row-sub { margin:0; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-price { gap:2px; font-weight:500; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .candidate-expected { flex-wrap:wrap; margin-top:4px; } :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-season-chip { min-height:36px; padding:6px 10px; border-radius:2px; } :root body.user-service .home-search-results:is(.is-recent-split,.is-recent-unified) .candidate-price-line + .candidate-price-line, :root body.user-service .home-search-results:is(.is-recent-split,.is-recent-unified) .candidate-expected { display:none; } :root body.user-service .home-search-group-label { padding:10px 12px; font-size:11px; background:var(--ui-surface-subtle); } :root body.user-service .home-search-result { min-height:72px; padding:12px; border-radius:0; } :root body.user-service .home-search-result img { width:36px; height:36px; } :root body.user-service #homeCandidateList .candidate-item { grid-template-columns:64px minmax(0,1fr); gap:12px; padding:16px 0; } :root body.user-service #homeCandidateList .candidate-media { width:64px; height:76px; } @media (min-width:768px) { :root body.user-service #homeCandidateList .candidate-item { grid-template-columns:86px minmax(0,1fr); align-items:start; gap:14px; padding:20px 0; } :root body.user-service #homeCandidateList .candidate-media { width:86px; height:102px; } :root body.user-service #homeCandidateList .candidate-media-season-card .player-season-card-compact { transform:none; } } :root body.user-service #homeCandidateList .candidate-expected .home-candidate-reason { color:var(--ui-muted); font-weight:500; } :root body.user-service #homeCandidateList .candidate-expected > span::before { content:none; } :root body.user-service #homeCandidateList .candidate-row-top .candidate-name-strength { position:static; display:flex; align-items:center; align-self:center; flex:0 0 23px; width:23px; height:14px; line-height:1; } :root body.user-service #homeCandidateList .candidate-row-top .candidate-name { flex:0 1 auto; } :root body.user-service #homeCandidateList .candidate-row-top { padding-right:44px; margin-bottom:8px; } :root body.user-service #homeCandidateList .candidate-name { font-size:16px; } :root body.user-service #homeCandidateList .candidate-readout-grid { gap:8px; } :root body.user-service #homeCandidateList .candidate-readout-item strong { font-size:18px; } :root body.user-service #homeCandidateList .candidate-readout-trend strong { font-size:12px; } :root body.user-service #homeCandidateList .candidate-expected { margin-top:8px; } /* Home candidate tiles stay horizontal and keep their key information on one row. */ :root body.user-service #homeModeView #homeCandidateList { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; row-gap:0; } :root body.user-service #homeModeView #homeCandidateList > .candidate-item.candidate-card { grid-template-columns:64px minmax(0,1fr); grid-template-areas:'media data'; align-items:center; gap:10px; padding:12px 0; } :root body.user-service #homeModeView #homeCandidateList > .candidate-item.candidate-card:has(.candidate-expected) :is(.candidate-main,.candidate-row-sub,.candidate-left) { display:block !important; } :root body.user-service #homeModeView #homeCandidateList .candidate-main { grid-area:data; display:block; min-width:0; } :root body.user-service #homeModeView #homeCandidateList .candidate-row-sub, :root body.user-service #homeModeView #homeCandidateList .candidate-left { display:block; min-width:0; } :root body.user-service #homeModeView #homeCandidateList .candidate-media { width:64px; height:76px; } :root body.user-service #homeModeView #homeCandidateList .candidate-row-top { min-width:0; flex-wrap:nowrap; gap:5px; padding-right:34px; margin:0 0 5px; } :root body.user-service #homeModeView #homeCandidateList .candidate-row-top .card-fav-btn { position:absolute; top:4px; right:0; width:32px; height:32px; min-width:32px; min-height:32px; } :root body.user-service #homeModeView #homeCandidateList .candidate-name { flex:1 1 auto; min-width:0; font-size:14px; } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-item { min-width:0; } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-item > span { font-size:9px; white-space:nowrap; } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-item strong { font-size:13px; white-space:nowrap; } :root body.user-service #homeModeView #homeCandidateList .candidate-expected { display:flex; gap:6px; margin-top:5px; } :root body.user-service #homeModeView #homeCandidateList .candidate-expected > span { font-size:10px; white-space:nowrap; } :root body.user-service .hover-tip { z-index:20020; padding:9px 12px; border:1px solid var(--ui-line); border-radius:4px; background:var(--ui-ink); color:var(--ui-surface); box-shadow:0 4px 12px #0002; font-size:12px; line-height:1.6; font-weight:500; pointer-events:auto; overflow-wrap:anywhere; } @media(max-width:1023px) { :root body.user-service .home-search-entry { margin:20px 0; } :root body.user-service .home-search-results { width:100%; max-height:min(500px,var(--ui-search-space,60dvh)); } } @media(max-width:767px) { :root body.user-service :where(#homeSearchSuggest,#searchSuggest,.board-mention-suggest) .suggest-season-chip { min-height:44px; } :root body.user-service #homeCandidateList .candidate-item { grid-template-columns:96px minmax(0,1fr); gap:14px; padding:20px 0; } :root body.user-service #homeCandidateList .candidate-media { width:96px; height:113px; } :root body.user-service #homeCandidateList .candidate-name { font-size:18px; } :root body.user-service #homeCandidateList .candidate-readout-item strong { font-size:20px; } :root body.user-service #homeCandidateList .candidate-readout-trend strong { font-size:14px; } :root body.user-service #homeCandidateList .candidate-readout-grid { gap:10px; } :root body.user-service #homeCandidateList .candidate-readout-item > span { min-height:18px; display:flex; align-items:flex-end; } :root body.user-service #homeCandidateList .candidate-readout-trend > span { min-height:0; } :root body.user-service #homeCandidateList .candidate-expected { margin-top:12px; } } /* Check controls keep their own dimensions; text-field sizing must not stretch them. */ :root body.user-service input[type="checkbox"] { appearance:auto !important; -webkit-appearance:checkbox !important; display:inline-block !important; box-sizing:border-box !important; width:16px !important; height:16px !important; min-width:16px !important; min-height:16px !important; max-width:16px !important; max-height:16px !important; flex:0 0 16px !important; margin:0 !important; padding:0 !important; border:revert !important; border-radius:revert !important; background:revert !important; box-shadow:none !important; transform:none !important; vertical-align:middle; accent-color:var(--ui-accent); cursor:pointer; } :root body.user-service input[type="checkbox"]::after { content:none !important; } :root body.user-service input[type="checkbox"]:focus-visible { outline:2px solid var(--ui-focus); outline-offset:3px; } :root body.user-service input[type="checkbox"]:disabled { cursor:default; } :root body.user-service .candidate-row-top:has(.fav-check) { align-items:center; gap:8px; } :root body.user-service .fav-select-control { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 44px; margin:0; padding:0; cursor:pointer; } @media(max-width:640px) { :root body.user-service #favoritesList .candidate-row-top:has(.fav-check) { display:grid; grid-template-columns:44px 44px 24px minmax(0,1fr); gap:4px; } :root body.user-service #favoritesList .candidate-row-top:has(.fav-check) .candidate-name { min-width:0; white-space:normal; overflow-wrap:anywhere; } :root body.user-service #favoritesList .candidate-row-top:has(.fav-check) .favorite-squad-badge { grid-column:3/-1; justify-self:start; max-width:100%; white-space:normal; } } /* One shared page title rhythm, based on the price analysis heading. */ :root body.user-service #serviceMain > #promoSlotTopWrap { margin:8px auto 28px; padding:0; } :root body.user-service #serviceMain #recordsModeView { padding-left:0; padding-right:0; } :root body.user-service #serviceMain :is( .price-page-heading, #recordsModeView > .ledger-page-heading, #boardModeView[data-community-view='list'] .community-page-heading, .uw-ranking-entry, #playersModeView > .uw-page-heading, #trainingModeView > .uw-page-heading, #metaInsightModeView .squad-meta-workbench-head ) { display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:24px; box-sizing:border-box; min-height:84px; padding:10px 0 28px; margin:0; border:0; max-width:none; background:transparent; } :root body.user-service #serviceMain :is( .price-page-heading, #recordsModeView > .ledger-page-heading, #boardModeView[data-community-view='list'] .community-page-heading, .uw-ranking-entry, #playersModeView > .uw-page-heading, #trainingModeView > .uw-page-heading, #metaInsightModeView .squad-meta-workbench-head ) h1 { margin:0; padding:0; color:var(--ui-ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif; font-size:38px; font-weight:700; line-height:1.2; letter-spacing:-.055em; overflow-wrap:anywhere; } :root body.user-service #serviceMain .uw-ranking-entry > .uw-page-heading { margin:0; padding:0; min-width:0; } :root body.user-service #serviceMain #boardModeView[data-community-view='list'] #boardAuthRow { flex-direction:row; align-items:center; gap:12px; } :root body.user-service #serviceMain :is(.uw-ranking-entry .squad-search-entry-btn,#boardModeView[data-community-view='list'] #boardFab) { min-height:44px; padding:10px 20px; line-height:24px; } @media(max-width:767px) { :root body.user-service #serviceMain :is(.price-page-heading,#recordsModeView > .ledger-page-heading,#boardModeView[data-community-view='list'] .community-page-heading,.uw-ranking-entry,#playersModeView > .uw-page-heading,#trainingModeView > .uw-page-heading,#metaInsightModeView .squad-meta-workbench-head) { flex-wrap:wrap; gap:12px; min-height:0; padding:10px 0 24px; } :root body.user-service #serviceMain :is(.price-page-heading,#recordsModeView > .ledger-page-heading,#boardModeView[data-community-view='list'] .community-page-heading,.uw-ranking-entry,#playersModeView > .uw-page-heading,#trainingModeView > .uw-page-heading,#metaInsightModeView .squad-meta-workbench-head) h1 { font-size:32px; } :root body.user-service #serviceMain #boardModeView[data-community-view='list'] #boardAuthRow { flex-direction:column-reverse; align-items:flex-end; gap:6px; } } /* The workspace title, a full-size ad and account actions share available space. */ :root body.user-service main.wrap > .service-workspace-head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'title auth' 'ad ad'; align-items:center; gap:16px; height:auto; min-height:64px; padding:8px 0 20px; margin:0; } :root body.user-service #servicePageTitle { grid-area:title; width:max-content; max-width:100%; margin:0; color:var(--ui-ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif; font-size:32px; line-height:1.25; font-weight:700; letter-spacing:-.045em; overflow-wrap:anywhere; } :root body.user-service #servicePageTitle[hidden] { display:none; } :root body.user-service .service-workspace-head #authArea { grid-area:auth; } :root body.user-service .service-workspace-head #promoSlotTopWrap { grid-area:ad; margin:0 auto; padding:0; } :root body.user-service main.wrap > .service-workspace-head[data-ad-layout='inline'] { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:'title ad auth'; } :root body.user-service #serviceMain .service-heading-source h1 { display:none; } :root body.user-service #serviceMain .service-heading-source { min-height:0; padding:0; margin:0; gap:12px; } :root body.user-service #serviceMain .service-heading-source > :is(div,.uw-page-heading):has(>h1):not(:has(p)) { display:none; } :root body.user-service #serviceMain .service-heading-source:has(>h1):not(:has(a,button,p,input)) { display:none; } :root body.user-service #serviceMain .price-page-heading { display:none; } :root body.user-service #serviceMain .uw-ranking-entry.service-heading-source { justify-content:flex-end; } :root body.user-service #serviceMain #boardModeView[data-community-view='list'] .service-heading-source { display:none; margin:0; border:0; } @media(max-width:1023px) { :root body.user-service main.wrap > .service-workspace-head { min-height:0; padding:12px 0 24px; } :root body.user-service #servicePageTitle { font-size:30px; } :root body.user-service .mode-home main.wrap > .service-workspace-head { padding:0; } } :root body.user-service #serviceMain .service-heading-source { min-height:0 !important; padding:0 !important; } :root body.user-service #serviceMain .price-page-heading { display:none !important; } /* Shared primary navigation; task buttons and secondary mode controls stay distinct. */ :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:24px; width:100%; min-height:45px; margin:0 0 24px; padding:0; border:0; border-bottom:1px solid var(--ui-line); border-radius:0; background:transparent; overflow-x:auto; box-shadow:none; } :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) > :is(button,a) { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; height:44px; min-height:44px; min-width:0; margin:0; padding:0 2px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--ui-muted); font-size:14px; line-height:20px; font-weight:600; letter-spacing:0; white-space:nowrap; text-decoration:none; box-shadow:none; } :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) > :is(button,a):is(.active,[aria-pressed='true'],[aria-current='page']) { color:var(--ui-accent); background:transparent; border-bottom-color:var(--ui-accent); font-weight:700; } :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) > :is(button,a):hover { color:var(--ui-accent); background:transparent; } :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) > :is(button,a)::after { display:none; } :root body.user-service #serviceMain #boardModeView .community-index { gap:0; } :root body.user-service #serviceMain .squad-rank-head > .squad-search-entry-btn { min-height:44px; padding:10px 16px; border:0; border-radius:4px; background:var(--ui-accent); color:var(--ui-on-accent); font-size:14px; font-weight:700; } @media(max-width:767px) { :root body.user-service #serviceMain :is(.market-view-tabs,.uw-workspace-nav,#recordsModeView #recordsTabs,#boardModeView #boardCategoryTabs) { gap:20px; } } :root body.user-service.mode-home main.wrap > .service-workspace-head:has(#promoSlotTopWrap.hidden) { padding-bottom:0; } @media(min-width:1024px) { :root body.user-service #servicePageTitle { min-width:224px; } } /* Labels remain readable without enlarging badge artwork or season colour rules. */ :root body.user-service #homeModeView :is(.home-board-cat,.home-board-time) { font-size:12px; } :root body.user-service #homeModeView .home-board-title { font-size:14px; } :root body.user-service #candidateFilterInfoBtn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; min-width:18px; min-height:18px; padding:0; border-radius:50%; } :root body.user-service #candidateFilterInfoBtn::before { content:''; position:absolute; inset:-13px; } :root body.user-service #candidateFilterHelp { min-height:44px; display:flex; align-items:center; padding:0 13px; } :root body.user-service #candidateFilterHelp.hidden { display:none; } /* Mobile pages share one outer inset; sections provide rhythm without nesting gutters. */ @media(max-width:767px) { :root body.user-service main.wrap > .service-workspace-head { padding:12px 0 16px; } :root body.user-service .home-search-entry { margin:12px 0 16px; } :root body.user-service .home-quick-grid { margin-bottom:20px; } :root body.user-service .home-content-panel { margin-bottom:24px; } :root body.user-service .home-board-panel { padding-top:16px; } :root body.user-service .home-board-block + .home-board-block { margin-top:24px; padding-top:16px; } :root body.user-service .price-workbench { gap:16px; padding-top:0; } :root body.user-service #homeCandidateList .candidate-item { padding-block:16px; } :root body.user-service #buyTopList .candidate-item { gap:12px; padding-block:16px; } } :root body.user-service #buyTopList .candidate-mini-chart { display:none; } :root body.user-service #buyTopList .candidate-row-top .candidate-name-strength { position:static; display:flex; align-items:center; align-self:center; flex:0 0 23px; width:23px; height:14px; line-height:1; } :root body.user-service #buyTopList .has-mini-chart .candidate-row-top { padding-right:0; gap:6px; } :root body.user-service #buyTopList .has-mini-chart .candidate-name { flex:0 1 auto; } :root body.user-service #buyTopList .has-mini-chart .card-fav-btn { position:static; order:1; width:28px; min-width:28px; height:28px; min-height:28px; flex:0 0 28px; } @media(min-width:1024px) { :root body.user-service #buyTopList .candidate-item.has-mini-chart { grid-template-columns:116px minmax(0,1fr) 280px; grid-template-areas:'media data chart'; gap:20px; } :root body.user-service #buyTopList .has-mini-chart .candidate-readout-grid { max-width:452px; grid-template-columns:repeat(3,minmax(0,140px)); justify-content:start; gap:16px; } :root body.user-service #buyTopList .candidate-mini-chart { grid-area:chart; display:flex; flex-direction:column; justify-content:center; gap:6px; width:280px; height:100px; color:var(--ui-muted); font-size:11px; } :root body.user-service #buyTopList .candidate-mini-chart canvas { display:block; width:280px; height:66px; } :root body.user-service #buyTopList .has-mini-chart .candidate-row-top { padding-right:0; gap:6px; } :root body.user-service #buyTopList .has-mini-chart .candidate-name { flex:0 1 auto; } :root body.user-service #buyTopList .has-mini-chart .card-fav-btn { position:static; order:1; width:28px; min-width:28px; height:28px; min-height:28px; flex:0 0 28px; } } /* Candidate metadata is a compact footer, separate from the player/price comparison. */ @media(max-width:767px) { :root body.user-service #buyTopList > .candidate-item { grid-template-columns:96px minmax(0,1fr); column-gap:14px; padding:16px 0; } :root body.user-service #buyTopList .candidate-media { width:96px; height:113px; } :root body.user-service #buyTopList .candidate-media-season-card .player-season-card-compact { transform:none; } :root body.user-service #buyTopList .candidate-name { font-size:18px; } :root body.user-service #buyTopList .candidate-readout-item strong { font-size:20px; } :root body.user-service #buyTopList .candidate-readout-grid { gap:8px 10px; } :root body.user-service #buyTopList .candidate-readout-trend { border:0; padding-top:0; margin-top:0; } :root body.user-service #buyTopList .candidate-readout-trend strong { font-size:14px; } } /* Home product insights: show one efficiency leader and budget choices using the live FC catalog. */ :root body.user-service #homeModeView .home-product-insights { display:grid; gap:14px; min-width:0; } :root body.user-service #homeModeView .home-product-featured { display:grid; gap:7px; min-width:0; padding:0 0 13px; border-bottom:1px solid var(--ui-line); color:var(--ui-ink); text-decoration:none; } :root body.user-service #homeModeView .home-product-featured:hover { background:var(--ui-surface-subtle); } :root body.user-service #homeModeView .home-product-featured-label { color:var(--ui-muted); font-size:11px; } :root body.user-service #homeModeView .home-product-featured-rate { color:var(--ui-ink); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.03em; text-decoration:none; } :root body.user-service #homeModeView .home-product-featured-rate small { color:var(--ui-muted); font-size:11px; font-weight:500; letter-spacing:0; } :root body.user-service #homeModeView .home-product-featured-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; } :root body.user-service #homeModeView .home-product-featured-item>img { display:block; width:42px; height:48px; object-fit:contain; } :root body.user-service #homeModeView .home-product-image-fallback { display:grid; place-items:center; width:42px; height:48px; color:var(--ui-muted); font-size:10px; } :root body.user-service #homeModeView .home-product-featured-item>span { display:grid; gap:3px; min-width:0; } :root body.user-service #homeModeView .home-product-featured-item>span>b { overflow:hidden; color:var(--ui-ink); font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } :root body.user-service #homeModeView .home-product-featured-item>span>small { color:var(--ui-muted); font-size:11px; } :root body.user-service #homeModeView .home-product-featured-item>i { color:var(--ui-muted); font-size:18px; font-style:normal; } :root body.user-service #homeModeView .home-product-spend { min-width:0; } :root body.user-service #homeModeView .home-product-spend>header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; } :root body.user-service #homeModeView .home-product-spend h3 { margin:0; color:var(--ui-ink); font-size:14px; font-weight:750; } :root body.user-service #homeModeView .home-product-spend>header>span { color:var(--ui-muted); font-size:10px; text-align:right; } :root body.user-service #homeModeView .home-product-spend-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; } :root body.user-service #homeModeView .home-product-spend-option { display:flex; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:34px; padding:5px 3px; border:1px solid var(--ui-line); border-radius:3px; background:var(--ui-surface); color:var(--ui-ink); cursor:pointer; font:inherit; font-size:11px; font-variant-numeric:tabular-nums; } :root body.user-service #homeModeView .home-product-spend-option strong { font-size:11px; font-weight:750; } :root body.user-service #homeModeView .home-product-spend-option small { font-size:9px; font-weight:600; } :root body.user-service #homeModeView .home-product-spend-option:hover { background:var(--ui-surface-subtle); } :root body.user-service #homeModeView .home-product-spend-option.is-active { border-color:var(--ui-accent); background:var(--ui-accent); color:var(--ui-on-accent); } :root body.user-service #homeModeView .home-product-spend-result { min-width:0; margin-top:8px; } :root body.user-service #homeModeView .home-product-spend-plan { min-width:0; padding:9px 10px 6px; border:1px solid var(--ui-line); border-radius:3px; } :root body.user-service #homeModeView .home-product-spend-summary { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--ui-muted); } :root body.user-service #homeModeView .home-product-spend-summary small { font-size:10px; } :root body.user-service #homeModeView .home-product-spend-total { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--ui-line); } :root body.user-service #homeModeView .home-product-spend-total>span { color:var(--ui-muted); font-size:10px; } :root body.user-service #homeModeView .home-product-spend-total>strong { color:var(--ui-ink); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; } :root body.user-service #homeModeView .home-product-spend-items { display:grid; min-width:0; } :root body.user-service #homeModeView a.home-product-spend-item { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:7px; min-width:0; padding:7px 0; border-bottom:1px solid var(--ui-line); color:var(--ui-ink); text-decoration:none; } :root body.user-service #homeModeView a.home-product-spend-item:hover { text-decoration:none; } :root body.user-service #homeModeView .home-product-spend-item>img { display:block; width:32px; height:36px; object-fit:contain; } :root body.user-service #homeModeView .home-product-spend-item>span { display:grid; gap:3px; min-width:0; } :root body.user-service #homeModeView .home-product-spend-item strong { overflow:hidden; color:var(--ui-ink); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } :root body.user-service #homeModeView .home-product-spend-item small { color:var(--ui-muted); font-size:9px; line-height:1.4; overflow-wrap:anywhere; } :root body.user-service #homeModeView .home-product-spend-item>b { color:var(--ui-ink); font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; } :root body.user-service #homeModeView .home-product-spend-extra { margin:0; padding:6px 0 2px; color:var(--ui-muted); font-size:9px; text-align:right; } :root body.user-service #homeModeView .home-product-spend-empty { margin:0; padding:10px 0; color:var(--ui-muted); font-size:11px; } :root body.user-service #homeModeView .home-product-insights-note, :root body.user-service #homeModeView .home-product-insights-empty { margin:0; color:var(--ui-muted); font-size:10px; line-height:1.5; } @media(max-width:767px) { :root body.user-service #homeModeView, :root body.user-service #homeModeView :is(.home-board-panel,.home-board-block,.home-board-list) { width:100%; max-width:100%; min-width:0; box-sizing:border-box; } :root body.user-service #homeModeView .home-board-row { width:100%; max-width:100%; min-width:0; box-sizing:border-box; } :root body.user-service #homeModeView .home-board-row { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; } :root body.user-service #homeModeView .home-product-spend-options { gap:4px; } :root body.user-service #homeModeView .home-product-spend-option { min-height:32px; gap:1px; } :root body.user-service #homeModeView .home-product-spend-option strong { font-size:10px; } :root body.user-service #homeModeView .home-product-spend-option small { font-size:8px; } :root body.user-service #homeModeView .home-product-spend-plan { padding:8px; } :root body.user-service #homeModeView .home-board-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :root body.user-service #homeModeView :is(.home-board-time,.home-board-time time) { font-size:11px; white-space:nowrap; } :root body.user-service #homeCandidateList > .candidate-item:nth-child(n+4) { display:none; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) { grid-template-areas:'media title' 'media price' 'meta meta'; grid-template-rows:auto auto auto; align-items:start; row-gap:4px; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) :is(.candidate-main,.candidate-row-sub,.candidate-left) { display:contents; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) .candidate-row-top { grid-area:title; margin:0 0 4px; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) .candidate-readout-grid { grid-area:price; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) > .candidate-media { align-self:center; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-expected { grid-area:meta; gap:2px 8px; margin:6px 0 0; align-items:baseline; line-height:1.45; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-expected > span { padding:0 !important; margin:0; min-height:0; font-size:11px; font-weight:500; line-height:1.45; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-expected > span::before { content:none; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-expected > .side-buy { font-weight:650; } :root body.user-service :is(#homeCandidateList,#buyTopList) > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) { grid-template-areas:'media title' 'media price' 'media meta'; } :root body.user-service #buyTopList > .candidate-item:has(> .candidate-main > .candidate-row-sub > .candidate-left > .candidate-expected) { grid-template-rows:max-content max-content max-content; align-content:start; row-gap:4px; } :root body.user-service #buyTopList .candidate-expected { margin-top:2px; align-self:start; } } /* Candidate names use the same measured round-trip as player-card names. */ :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-row-top { flex-wrap:nowrap; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-name { display:block; flex:1 1 0; min-width:0; overflow:hidden; white-space:nowrap; overflow-wrap:normal; } :root body.user-service :is(#homeCandidateList,#buyTopList) .candidate-row-top > :not(.candidate-name) { flex-shrink:0; } :root body.user-service .candidate-name-text { display:inline-block; min-width:max-content; font:inherit; } :root body.user-service .candidate-name.is-overflowing .candidate-name-text { animation:ppCardNameMarquee var(--pp-name-duration,8s) ease-in-out infinite; } @media(prefers-reduced-motion:reduce) { :root body.user-service .candidate-name.is-overflowing { overflow-x:auto; scrollbar-width:none; } :root body.user-service .candidate-name.is-overflowing .candidate-name-text { animation:none; } } :root body.user-service .price-filter-title-row { display:flex; align-items:center; gap:6px; min-height:32px; margin-bottom:10px; } :root body.user-service .price-filter-title-row h2 { margin:0; } :root body.user-service .price-filter-title-row #candidateFilterHelp { min-height:32px; padding:0; flex:0 0 auto; } /* Search already supplies the 12px gap below the mobile home advertisement. */ @media(max-width:767px) { :root body.user-service.mode-home main.wrap > .service-workspace-head { padding-bottom:0; } } /* Stack home candidates on mobile and keep each card within the viewport. */ @media(max-width:767px) { :root body.user-service #homeModeView #homeCandidateList { grid-template-columns:minmax(0,1fr) !important; column-gap:0; width:100%; min-width:0; } :root body.user-service #homeModeView #homeCandidateList > .candidate-item.candidate-card { grid-template-columns:64px minmax(0,1fr) !important; grid-template-areas:'media data' !important; width:100%; min-width:0; gap:12px; overflow:hidden; } :root body.user-service #homeModeView #homeCandidateList .candidate-media { width:64px; height:76px; overflow:hidden; } :root body.user-service #homeModeView #homeCandidateList :is(.candidate-main,.candidate-row-sub,.candidate-left,.candidate-readout-grid,.candidate-readout-item) { min-width:0; max-width:100%; } :root body.user-service #homeModeView #homeCandidateList .candidate-row-top { min-width:0; flex-wrap:nowrap; overflow:hidden; } :root body.user-service #homeModeView #homeCandidateList .candidate-row-top .candidate-name { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } :root body.user-service #homeModeView #homeCandidateList .candidate-readout-item strong { overflow:hidden; font-size:clamp(11px,3.4vw,14px); text-overflow:ellipsis; white-space:nowrap; } } /* Keep page identity accessible while using the former title row for the ad. */ :root body.user-service .service-header-compact #servicePageTitle { position:absolute; width:1px; min-width:0; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } :root body.user-service main.wrap > .service-header-compact[data-ad-layout='inline'] { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'ad auth'; align-items:start; } @media(max-width:1023px) { :root body.user-service main.wrap > .service-workspace-head[data-ad-layout] { grid-template-columns:minmax(0,1fr); grid-template-areas:'ad'; gap:0; } } /* Price conditions are a short decision flow: choose a preset, optionally refine it, then search. */ :root body.user-service #priceOnlyContent .price-workbench-filters h2 { letter-spacing:-.02em; } :root body.user-service #priceOnlyContent #candidateRangeToggle { appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; padding:8px 11px; color:var(--ui-muted); background:var(--ui-surface-subtle) !important; background-color:var(--ui-surface-subtle) !important; border:1px solid var(--ui-line) !important; border-radius:6px; font-size:12px; font-weight:700; line-height:1.35; text-align:left; transition:color .16s ease, background-color .16s ease, border-color .16s ease; } :root body.user-service #priceOnlyContent #candidateRangeToggle::after { content:'⌄'; flex:0 0 auto; color:currentColor; font-size:15px; line-height:1; transition:transform .16s ease; } :root body.user-service #priceOnlyContent .filter-range.open #candidateRangeToggle { color:var(--ui-ink); background:var(--ui-surface) !important; background-color:var(--ui-surface) !important; border-color:var(--ui-focus) !important; } :root body.user-service #priceOnlyContent .filter-range.open #candidateRangeToggle::after { transform:rotate(180deg); } :root body.user-service #priceOnlyContent #candidateRangeApply { appearance:none; -webkit-appearance:none; min-height:40px; color:var(--ui-on-accent); background:var(--ui-accent) !important; background-color:var(--ui-accent) !important; border-color:var(--ui-accent) !important; border-radius:5px; font-size:12px; font-weight:700; } :root body.user-service #priceOnlyContent .price-search-entry-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:5px; font-size:13px; font-weight:800; letter-spacing:-.02em; } @media(min-width:768px) { :root body.user-service #priceOnlyContent #priceFilterGroup { gap:6px; } :root body.user-service #priceOnlyContent #priceFilterGroup .filter-chip { min-height:40px; padding-block:8px; } :root body.user-service #priceOnlyContent #priceFilterGroup .range-field input { min-height:40px; padding-inline:6px; font-size:10px; } } @media(max-width:767px) { :root body.user-service #priceOnlyContent .price-workbench-filters h2 { margin-bottom:8px; } :root body.user-service #priceOnlyContent #priceFilterGroup { gap:5px; } :root body.user-service #priceOnlyContent #priceFilterGroup .filter-chip { min-height:40px; padding:7px 6px; border-radius:5px; font-size:12px; } :root body.user-service #priceOnlyContent #priceFilterGroup .filter-range { gap:5px; margin-top:2px; } :root body.user-service #priceOnlyContent #priceFilterGroup .filter-range.open { gap:7px; padding:8px; border-radius:7px; box-shadow:none; } :root body.user-service #priceOnlyContent #priceFilterGroup .range-inline { row-gap:7px; } :root body.user-service #priceOnlyContent #priceFilterGroup .range-field input { min-height:42px; padding-inline:10px; border-radius:5px; } :root body.user-service #priceOnlyContent #priceFilterGroup .range-hint { margin:0; color:var(--ui-muted); font-size:10px; line-height:1.45; } :root body.user-service #priceOnlyContent .price-search-entry-btn { margin-top:12px; } } :root[data-theme='dark'] body.user-service #priceOnlyContent #candidateRangeToggle { color:#cbd5e1; background:#111827 !important; background-color:#111827 !important; border-color:#334155 !important; } :root[data-theme='dark'] body.user-service #priceOnlyContent .filter-range.open #candidateRangeToggle { color:#f8fafc; background:#0f172a !important; background-color:#0f172a !important; border-color:#64748b !important; } :root[data-theme='dark'] body.user-service #priceOnlyContent #candidateRangeApply { color:#f8fafc; background:#334155 !important; background-color:#334155 !important; border-color:#475569 !important; } /* Home priorities: purchase plan, community, then a short market preview. */ :root body.user-service #homeModeView .home-product-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); gap:28px; min-width:0; } :root body.user-service #homeModeView .home-product-context { min-width:0; } :root body.user-service #homeModeView .home-product-main { min-width:0; padding-left:28px; border-left:1px solid var(--ui-line); } :root body.user-service #homeModeView .home-product-main .home-product-featured { grid-template-columns:190px minmax(0,1fr); gap:4px 16px; margin:0 0 12px; padding:10px 0 12px; border:0; border-bottom:1px solid var(--ui-line); } :root body.user-service #homeModeView .home-product-main .home-product-featured-rate { grid-column:1; grid-row:2; font-size:20px; } :root body.user-service #homeModeView .home-product-main .home-product-featured-item { grid-column:2; grid-row:1 / 3; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; } :root body.user-service #homeModeView .home-product-main .home-product-featured-item>img { width:30px; height:38px; } @media(max-width:767px) { :root body.user-service #homeModeView .home-product-main .home-product-featured { grid-template-columns:minmax(0,1fr); gap:6px; } :root body.user-service #homeModeView .home-product-main .home-product-featured-item { grid-column:1; grid-row:3; } } :root body.user-service #homeModeView .home-board-panel { grid-template-columns:minmax(0,1fr); padding-top:24px; border-top:1px solid var(--ui-line); } :root body.user-service #homeModeView #homeCandidatesSection { padding-top:24px; border-top:1px solid var(--ui-line); } :root body.user-service #homeModeView .home-product-spend-option { min-height:44px; } :root body.user-service #homeModeView .home-product-spend-total>strong { font-size:22px; } :root body.user-service #homeModeView .home-product-spend-item strong { white-space:normal; font-size:12px; line-height:1.5; } @media(max-width:767px) { :root body.user-service #homeModeView .home-product-overview { grid-template-columns:minmax(0,1fr); gap:16px; } :root body.user-service #homeModeView .home-product-main { padding:16px 0 0; border:0; border-top:1px solid var(--ui-line); } :root body.user-service #homeModeView :is(.home-board-panel,#homeCandidatesSection) { padding-top:16px; } :root body.user-service #homeModeView .home-product-spend>header { flex-wrap:wrap; } } :root body.user-service #homeModeView .home-board-title { line-height:1.5; } :root body.user-service #homeModeView .home-product-insights { align-content:start; } :root body.user-service #homeModeView .home-product-main .home-product-featured-rate small { display:inline-block; white-space:nowrap; } /* Home budget flow: stable controls and readable recommendation rows. */ :root body.user-service #homeModeView .home-search-field button { flex-shrink:0; padding:0 12px; white-space:nowrap; } :root body.user-service #homeModeView #homeSearchInput { flex:1 1 0; width:0; } :root body.user-service #homeModeView .home-product-insights-block .home-section-head { align-items:center; gap:12px; } :root body.user-service #homeModeView #homeProductInsightsTitle { margin:0; font-size:16px; line-height:1.4; font-weight:700; } :root body.user-service #homeModeView #homeProductInsightsMore { flex-shrink:0; white-space:nowrap; font-size:13px; font-weight:600; min-height:44px; display:inline-flex; align-items:center; } :root body.user-service #homeModeView .home-product-spend h3 { font-size:14px; font-weight:600; } :root body.user-service #homeModeView .home-product-spend-option { white-space:nowrap; } :root body.user-service #homeModeView .home-product-spend-option strong { font-size:12px; font-weight:700; } :root body.user-service #homeModeView .home-product-spend-option small { font-size:10px; } :root body.user-service #homeModeView .home-product-spend-plan { padding:12px; } :root body.user-service #homeModeView .home-product-spend-total { border:0; padding:4px 0; } :root body.user-service #homeModeView .home-product-spend-total>span { font-size:12px; } :root body.user-service #homeModeView .home-product-spend-total>strong { font-size:20px; font-weight:700; white-space:nowrap; } :root body.user-service #homeModeView .home-product-spend-balance { margin:0; padding:0 0 12px; font-size:12px; color:var(--ui-muted); border-bottom:1px solid var(--ui-line); } :root body.user-service #homeModeView a.home-product-spend-item { grid-template-columns:36px minmax(0,1fr); gap:3px 10px; padding:8px 0; } :root body.user-service #homeModeView .home-product-spend-item>img { grid-row:1 / 3; width:36px; height:44px; } :root body.user-service #homeModeView .home-product-spend-item strong { font-size:13px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } :root body.user-service #homeModeView .home-product-spend-item small { font-size:12px; } :root body.user-service #homeModeView .home-product-spend-item>b { grid-column:2; font-size:14px; font-weight:600; } :root body.user-service #homeModeView .home-product-spend-item:last-child { border-bottom:0; } :root body.user-service #homeModeView .home-product-basis { margin-top:8px; color:var(--ui-muted); font-size:12px; line-height:1.6; } :root body.user-service #homeModeView .home-product-basis summary { cursor:pointer; min-height:44px; align-content:center; } :root body.user-service #homeModeView .home-product-basis p { margin:0 0 12px; } @media(max-width:767px) { :root body.user-service #homeModeView .home-search-field { min-height:54px; } :root body.user-service #homeModeView :is(#homeSearchInput,.home-search-field button) { height:44px; } :root body.user-service #homeModeView .home-search-field button { min-width:60px; flex-basis:60px; } :root body.user-service #homeModeView .home-product-spend-item strong { font-size:15px; } :root body.user-service #homeModeView .home-product-spend-item>b { font-size:16px; } } /* Ads sit between complete content blocks; short pages use a single ending ad. */ :root body.user-service .ad-layout-suppressed, :root body.user-service .ad-no-fill { display:none !important; } :root body.user-service #promoSlotMiddleWrap { grid-column:1 / -1; flex-shrink:0; margin-top:24px; margin-bottom:24px; } @media(max-width:767px) { :root body.user-service #promoSlotMiddleWrap { margin-top:20px; margin-bottom:20px; } } :root body.user-service :is(.players-grid,.uw-training-workspace,.home-product-overview) > #promoSlotMiddleWrap { margin-top:0; margin-bottom:0; }