/* profile.css — maintained by section. */ /* profile-preview-id2 */ /* New profile layout selected by the server for all viewers. */ html.as-private-profile .pageContentContainer{max-width:1440px!important} html.as-private-profile #asProfile.pp-ready{flex:0 0 100%!important;max-width:100%!important;width:100%;order:0;padding:0 15px;min-width:0} html.as-private-profile #asProfileSidebar.pp-legacy-sidebar{display:none!important} #asProfilePreviewNotice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px 14px;color:var(--pf-muted);font-size:12px;line-height:1.5} #asProfilePreviewNotice a{color:var(--pf-text);text-decoration:underline;text-underline-offset:3px} #asProfilePreviewNotice[hidden]{display:none!important} #asProfile .pp-shell{color:var(--pf-text);min-width:0} #asProfile .pp-shell [hidden],#asProfile .pp-legacy [hidden]{display:none!important} #asProfile .pp-legacy{margin:0!important} #asProfile .pp-hero{position:relative;isolation:isolate;border:1px solid var(--pf-border);border-radius:20px 20px 0 0;background:var(--pf-panel);min-height:320px;display:flex;align-items:center;justify-content:center;padding:34px 24px 28px} #asProfile .pp-cover{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--pf-text) 11%,transparent),transparent 65%),var(--pf-fill)} #asProfile .pp-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,17,28,.65),rgba(8,17,28,.16));opacity:0} #asProfile .pp-has-cover .pp-cover::after{opacity:1} #asProfile .pp-cover-media{display:block;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center;pointer-events:none;transform:none!important} #asProfile .pp-hero-main{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;text-align:center} #asProfile .pp-hero .as-profile-avatar{width:132px;min-width:132px;max-width:132px;height:132px;margin:0!important;padding:10px;filter:drop-shadow(0 5px 15px #0004)} #asProfile .pp-heading{max-width:100%;min-width:0} #asProfile .pp-name{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;max-width:100%} #asProfile .pp-title{font-size:30px;line-height:1.2;font-weight:700;margin:0;overflow-wrap:anywhere;letter-spacing:-.6px;color:inherit;text-shadow:none;background:none;padding:0;border:0} #asProfile .pp-hero .userBadges{display:inline-flex;gap:5px;align-items:center;max-width:100%;flex-wrap:wrap} #asProfile .pp-hero .userBadges img{max-width:28px;max-height:28px;object-fit:contain} #asProfile .pp-subtitle{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--pf-muted)} #asProfile .pp-group{font-weight:500} #asProfile .pp-status{display:block;margin:8px 0 0;font-size:12px;color:var(--pf-muted);line-height:1.5} #asProfile .pp-status :is(#sonline,#soffline){display:inline-block!important;width:7px!important;height:7px!important;min-width:7px;margin:0 6px 1px 0;vertical-align:middle;border-radius:50%} #asProfile .pp-has-cover :is(.pp-id,.pp-status){color:#eff5fc;text-shadow:0 1px 4px #0008} #asProfile .pp-tabs{display:flex;justify-content:center;gap:8px;padding:0 18px;background:var(--pf-fill);border:1px solid var(--pf-border);border-top:0;border-radius:0 0 16px 16px;overflow-x:auto;scrollbar-width:thin} #asProfile .pp-tab{position:relative;flex:0 0 auto;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:19px 20px!important;font:600 14px/1.4 inherit;color:var(--pf-muted)!important;white-space:nowrap;cursor:pointer;min-height:57px;text-shadow:none!important} #asProfile .pp-tab[aria-selected="true"]{color:var(--pf-text)!important} #asProfile .pp-tab[aria-selected="true"]::after{content:"";position:absolute;bottom:0;left:20px;right:20px;height:3px;border-radius:3px 3px 0 0;background:var(--pf-text)} #asProfile .pp-tab:hover{color:var(--pf-text)!important} #asProfile .pp-shell :is(button,summary,a,[role="button"]):focus-visible{outline:2px solid var(--pf-text)!important;outline-offset:3px} #asProfile .pp-commands{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:16px 0} #asProfile :is(.pp-primary-actions,.pp-menu-list,.pp-account){list-style:none!important;margin:0!important;padding:0!important} #asProfile :is(.pp-primary-actions,.pp-menu-list,.pp-account)>li{list-style:none!important;margin:0!important;padding:0!important;border:0!important;min-width:0;background:none!important;box-shadow:none!important} #asProfile .pp-primary-actions{display:flex;gap:8px;flex-wrap:wrap} #asProfile .pp-primary-actions a,#asProfile .pp-menu>summary{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 15px!important;min-height:40px;height:auto!important;border:1px solid var(--pf-border)!important;border-radius:10px!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important;background:var(--pf-panel)!important;font-size:13px!important;font-weight:500!important;line-height:1.4!important;cursor:pointer;box-shadow:none!important;text-decoration:none!important;white-space:normal;text-align:center} #asProfile .pp-primary-actions a{background:color-mix(in srgb,var(--pf-text) 8%,var(--pf-panel))!important} #asProfile .pp-menu{position:relative} #asProfile .pp-menu>summary{list-style:none} #asProfile .pp-menu>summary::-webkit-details-marker{display:none} #asProfile .pp-chevron{font-size:16px;line-height:1;color:var(--pf-muted)} #asProfile .pp-menu[open]>summary{border-color:var(--pf-text)!important} #asProfile .pp-menu-list{position:absolute;z-index:50;right:0;top:calc(100% + 8px);width:260px;padding:6px!important;border:1px solid var(--pf-border);border-radius:12px;background:var(--pf-panel);box-shadow:0 12px 32px var(--pf-shadow);max-width:calc(100vw - 44px)} #asProfile .pp-menu-list a{display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px!important;width:100%;min-height:40px;height:auto!important;padding:10px!important;margin:0!important;border:0!important;border-radius:7px!important;box-shadow:none!important;background:transparent!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important;text-align:left!important;font-size:13px!important;font-weight:400!important;line-height:1.4!important;text-decoration:none!important;cursor:pointer;white-space:normal!important} #asProfile .pp-menu-list a:is(:hover,:focus-visible){background:color-mix(in srgb,var(--pf-text) 8%,transparent)!important} #asProfile .pp-menu-list .fa-money{display:none} #asProfile .pp-menu-list .fa{order:-1;flex:0 0 18px;color:var(--pf-muted);text-align:center} #asProfile .pp-metrics{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;padding:18px 22px;margin:0 0 22px;border:1px solid var(--pf-border);border-radius:14px;background:var(--pf-fill)} #asProfile .pp-metric{flex:1;min-width:110px;padding:2px 22px;border-right:1px solid var(--pf-border);display:flex;flex-direction:column;gap:4px} #asProfile .pp-metric:first-child{padding-left:0} #asProfile .pp-metric strong{font-size:23px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums} #asProfile .pp-metric>span{font-size:12px;color:var(--pf-muted)} #asProfile .pp-account{display:flex;gap:28px;align-items:center;margin-left:auto!important;padding-left:26px!important;flex-wrap:wrap} #asProfile .pp-account .as-profile-meta{display:flex;flex-direction:column-reverse;gap:4px} #asProfile .pp-account .as-profile-meta-label{font-size:12px;color:var(--pf-muted)} #asProfile .pp-account .as-profile-meta-value{font-size:18px;font-weight:600;line-height:1.65;white-space:nowrap} #asProfile .pp-panel{padding-top:6px;min-height:180px} #asProfile .pp-overview{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start} #asProfile :is(.pp-main-column,.pp-side-column){min-width:0;display:flex;flex-direction:column;gap:20px} #asProfile .pp-card,#asProfile .pp-shell .block{margin:0!important;padding:24px!important;border-radius:14px!important;border:1px solid var(--pf-border)!important;background-color:var(--pf-panel)!important;background-image:var(--pf-fill)!important;box-shadow:0 4px 12px color-mix(in srgb,var(--pf-shadow) 45%,transparent)!important;color:var(--pf-text)} #asProfile :is(.pp-card-title,.pp-shell .block_head){font-size:17px!important;font-weight:600;line-height:1.4;height:auto!important;padding:0!important;margin:0 0 18px!important;border:0!important;color:var(--pf-text)!important;letter-spacing:0} #asProfile .pp-shell .block_head::before,#asProfile .pp-shell .block_head::after{display:none!important} #asProfile .pp-info-table{width:100%;border-collapse:collapse;margin:0!important;table-layout:fixed;background:transparent!important} #asProfile .pp-info-table tr{background:transparent!important} #asProfile .pp-info-table td{font-size:14px;line-height:1.6;border:0!important;border-top:1px solid var(--pf-border)!important;background:none!important;padding:12px 0!important;vertical-align:top;overflow-wrap:anywhere;color:var(--pf-text)!important} #asProfile .pp-info-table tr:first-child td{border-top:0!important;padding-top:0!important} #asProfile .pp-info-table tr:last-child td{padding-bottom:0!important} #asProfile .pp-info-table td:first-child{width:43%;color:var(--pf-muted)!important;padding-right:20px!important} #asProfile .pp-info-table td img{max-width:28px;height:28px;object-fit:cover;border-radius:50%;margin-right:7px} #asProfile .pp-info-table td b{font-weight:500!important} #asProfile .pp-awards #achivments_area{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #asProfile .pp-awards #achivments_area img{width:48px!important;height:48px!important;object-fit:contain} #asProfile .pp-side-column .gifts-items{display:flex!important;gap:10px;overflow-x:auto;padding:0 0 10px;scrollbar-width:thin;max-width:100%;margin:0} #asProfile .pp-side-column .gift{flex:0 0 66px;background:color-mix(in srgb,var(--pf-text) 4%,transparent);border-color:var(--pf-border);border-radius:10px} #asProfile .pp-side-column .gift img{width:64px!important;height:64px!important;object-fit:contain} /* Compact friends; each identity keeps its own group artwork and equipped frame. */ #asProfile #pp-panel-friends>.block{padding:16px 18px!important} #asProfile #pp-panel-friends .block_head{margin-bottom:12px!important;font-size:15px!important} #asProfile #pp-panel-friends #friends{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px 12px;max-height:none!important;overflow:visible!important;padding:0!important} #asProfile #pp-panel-friends #friends::after{display:none!important} #asProfile #pp-panel-friends #friends>a{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:auto!important;margin:0!important;padding:4px 2px!important;float:none!important;text-align:center;min-width:0;font-size:12px;line-height:1.4;text-decoration:none} #asProfile #pp-panel-friends #friends>a>img{width:48px!important;height:48px!important;object-fit:cover;border-radius:50%;margin:8px!important;max-width:none!important} #asProfile #pp-panel-friends #friends .pp-friend-avatar{position:relative!important;display:block!important;box-sizing:border-box;width:64px!important;height:64px!important;flex:0 0 64px;min-width:64px;max-width:none!important;margin:0!important;padding:0!important;border:0!important;float:none!important;transform:none!important;overflow:visible!important} #asProfile #pp-panel-friends #friends .pp-friend-image{position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;box-sizing:border-box;display:block!important;width:48px!important;height:48px!important;margin:0!important;padding:0!important;max-width:none!important;object-fit:cover;object-position:center;border:1px solid var(--pf-border);border-radius:50%!important;float:none!important} #asProfile #pp-panel-friends #friends .pp-friend-frame{position:absolute!important;z-index:1;inset:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;box-sizing:border-box;display:block!important;width:58px!important;height:58px!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;object-fit:contain;object-position:center;float:none!important;pointer-events:none} #asProfile #pp-panel-friends #friends .pp-friend-identity{display:flex;justify-content:center;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:3px 4px;max-width:100%;min-width:0;white-space:normal;overflow:visible} #asProfile #pp-panel-friends #friends .pp-friend-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;max-width:100%;font-size:12px;line-height:1.4;white-space:normal} #asProfile #pp-panel-friends #friends .pp-friend-badges{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;max-width:100%;line-height:1} #asProfile #pp-panel-friends #friends .pp-friend-badges img{position:static!important;display:block;width:14px!important;height:14px!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;object-fit:contain} #asProfile #pp-panel-friends .empty-element{grid-column:1/-1} @media(max-width:575px){#asProfile #pp-panel-friends #friends{grid-template-columns:minmax(0,1fr);gap:10px 6px}#asProfile #pp-panel-friends>.block{padding:14px!important}} #asProfile #pp-panel-activity{display:grid;gap:20px} #asProfile #pp-panel-services .table-responsive{overflow-x:auto} #asProfile .pp-empty{margin:0;padding:40px 15px;text-align:center;color:var(--pf-muted);font-size:14px} #asProfile .pp-side-column #users_visit{display:flex!important;flex-wrap:wrap;gap:8px;margin:0!important} #asProfile .pp-side-column #users_visit img{width:42px!important;height:42px!important;border-radius:50%!important;object-fit:cover} #asProfile .pp-shell .news-composer{margin-top:0} #asProfile .pp-shell #last_activity p,#asProfile .pp-shell #mybans p{color:var(--pf-muted);border-color:var(--pf-border)} @media(max-width:991px){#asProfile .pp-overview{grid-template-columns:minmax(0,1fr) 250px;gap:16px}#asProfile .pp-card,#asProfile .pp-shell .block{padding:20px!important}#asProfile .pp-account{gap:18px;padding-left:18px!important}#asProfile .pp-metric{padding:2px 14px}} @media(max-width:767px){html.as-private-profile #asProfile.pp-ready{padding:0 10px}#asProfile .pp-hero{min-height:290px;padding:26px 16px}#asProfile .pp-tabs{justify-content:flex-start;gap:0;padding:0 6px}#asProfile .pp-tab{padding:16px 14px!important;font-size:13px!important;min-height:52px}#asProfile .pp-tab[aria-selected="true"]::after{left:14px;right:14px}#asProfile .pp-title{font-size:26px}#asProfile .pp-overview{grid-template-columns:minmax(0,1fr)}#asProfile .pp-commands{justify-content:center}#asProfile .pp-primary-actions{justify-content:center}#asProfile .pp-menu-list{right:0}#asProfile .pp-menu:first-of-type .pp-menu-list{left:0;right:auto}#asProfile .pp-metrics{padding:16px;row-gap:16px}#asProfile .pp-metric{min-width:0;padding:0 10px;flex:1}#asProfile .pp-metric:last-of-type{border:0}#asProfile .pp-metric strong{font-size:20px}#asProfile .pp-account{flex-basis:100%;margin:0!important;padding:14px 0 0!important;border-top:1px solid var(--pf-border);gap:32px}#asProfile .pp-account .as-profile-meta-value{font-size:17px}#asProfile .pp-card,#asProfile .pp-shell .block{padding:18px!important}#asProfile .pp-info-table td{font-size:13px}#asProfile .pp-info-table td:first-child{width:43%;padding-right:12px!important}} @media(prefers-reduced-motion:reduce){#asProfile .pp-shell *{scroll-behavior:auto!important;animation:none!important;transition:none!important}} /* Preserve contrast over cover artwork even in the light palette. */ #asProfile .pp-has-cover :is(.pp-id,.pp-status){color:#eff5fc!important;-webkit-text-fill-color:#eff5fc!important} #asProfile .pp-tab{font-family:inherit;font-size:14px;font-weight:600;line-height:1.4} html.as-private-profile #asProfilePreviewNotice{padding:9px 12px;margin-bottom:12px;border:1px solid var(--pf-border);border-radius:10px;background:var(--pf-panel);color:var(--pf-muted)} #asProfile .pp-tabs{scrollbar-color:var(--pf-border) transparent} #asProfile .pp-tabs::-webkit-scrollbar{height:4px} #asProfile .pp-tabs::-webkit-scrollbar-thumb{background:var(--pf-border);border-radius:4px} /* v2: cover above a profile bar, overlapping avatar at the left. */ #asProfile .pp-hero-v2{display:block;min-height:0;padding:0;border-radius:20px;background:var(--pf-panel);isolation:auto} #asProfile .pp-hero-v2 .pp-cover{position:relative;inset:auto;z-index:auto;height:clamp(220px,23vw,360px);border-radius:19px 19px 0 0} #asProfile .pp-hero-v2 .pp-cover::after{background:linear-gradient(0deg,rgba(10,17,26,.15),transparent 65%)} #asProfile .pp-hero-v2 .pp-hero-main{position:relative;z-index:1;display:grid;grid-template-columns:184px minmax(0,1fr) auto;align-items:center;gap:24px;max-width:none;min-height:146px;padding:24px 28px;background:var(--pf-panel);border-radius:18px;margin-top:-18px;text-align:left} #asProfile .pp-hero-v2 .pp-hero-main.pp-no-commands{grid-template-columns:184px minmax(0,1fr)} #asProfile .pp-hero-v2 .as-profile-avatar{position:relative;width:184px;min-width:184px;max-width:184px;height:184px;padding:10px;margin:-94px 0 0!important;align-self:start;filter:none;overflow:visible} #asProfile .pp-hero-v2 .as-profile-avatar>img:first-child{outline:6px solid var(--pf-panel)} #asProfile .pp-hero-v2 .pp-heading{align-self:center;min-width:0;padding:0} #asProfile .pp-hero-v2 .pp-name{justify-content:flex-start;gap:8px} #asProfile .pp-hero-v2 .pp-title{font-size:30px;line-height:1.2;letter-spacing:-.5px} #asProfile .pp-hero-v2 .pp-subtitle{justify-content:flex-start;gap:12px;margin-top:12px;font-size:13px} #asProfile .pp-hero-v2 .pp-id{color:var(--pf-muted)!important;-webkit-text-fill-color:var(--pf-muted)!important;text-shadow:none} #asProfile .pp-hero-v2 .pp-status{position:absolute;right:2px;bottom:13px;z-index:2;max-width:calc(100% - 12px);box-sizing:border-box;padding:4px 9px;border:4px solid var(--pf-panel);border-radius:30px;margin:0;font-size:11px;font-weight:600;line-height:1.3;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important;background:color-mix(in srgb,var(--pf-text) 18%,var(--pf-panel));text-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #asProfile .pp-hero-v2 .pp-about-button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:5px!important;color:var(--pf-muted)!important;-webkit-text-fill-color:var(--pf-muted)!important;font-family:inherit;font-size:13px;font-weight:400;line-height:1.4;cursor:pointer} #asProfile .pp-hero-v2 .pp-about-button:hover{color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important} #asProfile .pp-hero-v2 .pp-about-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;flex:0 0 18px} #asProfile .pp-hero-v2 .pp-commands{align-self:center;justify-content:flex-end;flex-wrap:nowrap;gap:8px;margin:0;padding:0} #asProfile .pp-hero-v2 .pp-primary-actions{flex-wrap:nowrap} #asProfile .pp-hero-v2 .pp-primary-actions a{font-size:14px!important;min-height:44px;white-space:nowrap;padding:11px 22px!important;background:var(--pf-text)!important;color:var(--pf-panel)!important;-webkit-text-fill-color:var(--pf-panel)!important;border-color:var(--pf-text)!important;border-radius:11px!important} #asProfile .pp-hero-v2 .pp-menu>summary{min-height:44px;padding:11px 16px!important;background:color-mix(in srgb,var(--pf-text) 7%,var(--pf-panel))!important;border:1px solid transparent!important;font-size:14px!important;border-radius:11px!important} #asProfile .pp-hero-v2 .pp-gift-menu>summary{width:44px;padding:9px!important} #asProfile .pp-hero-v2 .pp-gift-menu>summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #asProfile .pp-hero-v2 .pp-menu[open]>summary{border-color:var(--pf-border)!important} #asProfile .pp-hero-v2 .pp-menu-list{z-index:80} #asProfile .pp-hero-v2 .pp-menu-list>.pp-menu-label{padding:10px 10px 5px!important;margin-top:5px!important;border-top:1px solid var(--pf-border)!important;color:var(--pf-muted);font-size:11px;line-height:1.4} #asProfile .pp-tabs{margin:18px 0 20px;border:1px solid var(--pf-border);border-radius:16px;box-shadow:0 4px 12px color-mix(in srgb,var(--pf-shadow) 45%,transparent)} #asProfile .pp-card{scroll-margin-top:100px} @media(max-width:1100px){#asProfile .pp-hero-v2 .pp-hero-main{grid-template-columns:164px minmax(0,1fr) auto;gap:18px;padding:24px}#asProfile .pp-hero-v2 .pp-hero-main.pp-no-commands{grid-template-columns:164px minmax(0,1fr)}#asProfile .pp-hero-v2 .as-profile-avatar{width:164px;min-width:164px;max-width:164px;height:164px;margin-top:-82px!important}#asProfile .pp-hero-v2 .pp-title{font-size:26px}#asProfile .pp-hero-v2 .pp-primary-actions a{padding:11px 16px!important}} @media(max-width:850px){#asProfile .pp-hero-v2 .pp-hero-main,#asProfile .pp-hero-v2 .pp-hero-main.pp-no-commands{grid-template-columns:150px minmax(0,1fr);gap:14px 20px;padding:22px}#asProfile .pp-hero-v2 .as-profile-avatar{width:150px;min-width:150px;max-width:150px;height:150px;margin-top:-76px!important}#asProfile .pp-hero-v2 .pp-commands{grid-column:2;justify-content:flex-start}#asProfile .pp-hero-v2 .pp-heading{align-self:start;padding-top:4px}#asProfile .pp-hero-v2 .pp-subtitle{gap:8px 12px}#asProfile .pp-hero-v2 .pp-cover{height:240px}} @media(max-width:575px){#asProfile .pp-hero-v2 .pp-cover{height:200px}#asProfile .pp-hero-v2 .pp-hero-main,#asProfile .pp-hero-v2 .pp-hero-main.pp-no-commands{grid-template-columns:100px minmax(0,1fr);gap:18px 12px;padding:18px 14px;min-height:0}#asProfile .pp-hero-v2 .as-profile-avatar{width:100px;min-width:100px;max-width:100px;height:100px;padding:6px;margin-top:-54px!important}#asProfile .pp-hero-v2 .as-profile-avatar>img:first-child{outline-width:4px}#asProfile .pp-hero-v2 .pp-status{right:-2px;bottom:2px;font-size:10px;padding:3px 6px;border-width:3px}#asProfile .pp-hero-v2 .pp-heading{padding-top:0}#asProfile .pp-hero-v2 .pp-title{font-size:23px;letter-spacing:-.3px}#asProfile .pp-hero-v2 .pp-name{gap:5px}#asProfile .pp-hero-v2 .pp-subtitle{margin-top:8px;font-size:12px;gap:5px 10px}#asProfile .pp-hero-v2 .pp-about-button{font-size:12px}#asProfile .pp-hero-v2 .userBadges img{max-width:22px;max-height:22px}#asProfile .pp-hero-v2 .pp-commands{grid-column:1/-1;justify-content:flex-end;gap:8px}#asProfile .pp-hero-v2 .pp-menu-list{right:0;left:auto}#asProfile .pp-hero-v2 .pp-gift-menu .pp-menu-list{right:-82px;left:auto}#asProfile .pp-hero-v2 .pp-primary-actions a{padding:10px 18px!important}#asProfile .pp-hero-v2 .pp-cover-media{object-position:center}} /* v4: the cover fills the entire header; identity and actions sit above it. */ #asProfile .pp-hero-overlay{display:flex;align-items:flex-end;justify-content:stretch;min-height:clamp(380px,34vw,480px);isolation:isolate;z-index:2;--pp-hero-text:var(--pf-text);--pp-hero-muted:var(--pf-muted)} #asProfile .pp-hero-overlay .pp-cover{position:absolute;inset:0;z-index:0;height:100%;border-radius:inherit} #asProfile .pp-hero-overlay.pp-has-cover{--pp-hero-text:#f7f9fc;--pp-hero-muted:#e2e7ed} #asProfile .pp-hero-overlay .pp-cover::after{background:linear-gradient(180deg,rgba(4,9,17,.04) 15%,rgba(4,9,17,.22) 45%,rgba(4,9,17,.8) 100%)} #asProfile .pp-hero-overlay .pp-hero-main{width:100%;min-height:0;margin:0;padding:30px 28px;background:transparent;border-radius:0;align-items:center} #asProfile .pp-hero-overlay .as-profile-avatar{margin:0!important;align-self:center;filter:drop-shadow(0 4px 14px #0005)} #asProfile .pp-hero-overlay .as-profile-avatar>img:first-child{outline:none} #asProfile .pp-hero-overlay .pp-heading{align-self:center;padding:0} #asProfile .pp-hero-overlay .pp-status{position:static;display:flex;align-items:center;width:auto;max-width:none;margin:0 0 8px;padding:0;border:0;border-radius:0;background:none;font-size:12px;font-weight:500;line-height:1.5;white-space:normal;overflow:visible;color:var(--pp-hero-muted)!important;-webkit-text-fill-color:var(--pp-hero-muted)!important} #asProfile .pp-hero-overlay .pp-status :is(#sonline,#soffline){flex:0 0 7px;margin:0 7px 0 0} #asProfile .pp-hero-overlay .pp-id,#asProfile .pp-hero-overlay .pp-about-button{color:var(--pp-hero-muted)!important;-webkit-text-fill-color:var(--pp-hero-muted)!important} #asProfile .pp-hero-overlay .pp-about-button:hover{color:var(--pp-hero-text)!important;-webkit-text-fill-color:var(--pp-hero-text)!important} #asProfile .pp-hero-overlay.pp-has-cover .pp-heading{text-shadow:0 1px 5px #0008} #asProfile .pp-hero-overlay.pp-has-cover .pp-primary-actions a{background:#f7f9fc!important;color:#1c2632!important;-webkit-text-fill-color:#1c2632!important;border-color:#f7f9fc!important} #asProfile .pp-hero-overlay.pp-has-cover .pp-menu>summary{background:rgba(15,23,34,.66)!important;color:#f7f9fc!important;-webkit-text-fill-color:#f7f9fc!important;border-color:#ffffff35!important;backdrop-filter:blur(10px)} #asProfile .pp-hero-overlay.pp-has-cover .pp-chevron{color:#e2e7ed} #asProfile .pp-hero-overlay.pp-has-cover :is(.pp-primary-actions a,.pp-menu>summary,.pp-about-button):focus-visible{outline-color:#f7f9fc!important} @media(max-width:850px){#asProfile .pp-hero-overlay{min-height:400px}#asProfile .pp-hero-overlay .pp-hero-main{padding:24px}#asProfile .pp-hero-overlay .pp-commands{grid-column:2}} @media(max-width:575px){#asProfile .pp-hero-overlay{min-height:360px}#asProfile .pp-hero-overlay .pp-hero-main{padding:22px 14px;row-gap:20px}#asProfile .pp-hero-overlay .pp-commands{grid-column:1/-1}#asProfile .pp-hero-overlay .pp-status{margin-bottom:6px;font-size:11px}} /* v5: independent shared cover. The equipped background remains behind the page. */ #asProfile .pp-hero-overlay .pp-cover-default{background:radial-gradient(ellipse at 86% 8%,#38bdf82e,transparent 54%),radial-gradient(ellipse at 15% 0,#647fc422,transparent 48%),linear-gradient(125deg,#132135,#0d1725 52%,#102e3d)} #asProfile .pp-cover-default::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(130deg,transparent 0,transparent 96px,#bce9ff0b 97px,#bce9ff0b 98px,transparent 99px,transparent 196px);pointer-events:none} #asProfile .pp-cover-brand{position:absolute;z-index:1;top:52px;right:48px;left:48px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;color:#ecf7ff;-webkit-text-fill-color:#ecf7ff;text-shadow:none} #asProfile .pp-cover-kicker{display:flex;align-items:center;gap:12px;font-family:inherit;font-size:11px;font-weight:600;line-height:1.4;letter-spacing:3px;color:#a6bfcc;-webkit-text-fill-color:#a6bfcc} #asProfile .pp-cover-kicker::before{content:"";width:28px;height:2px;background:#62d7ce} #asProfile .pp-cover-title{display:block;font-family:inherit;font-size:clamp(28px,3.5vw,48px);font-weight:800;line-height:1.08;letter-spacing:-1.6px;white-space:nowrap} #asProfile .pp-cover-domain{color:#62d7ce;-webkit-text-fill-color:#62d7ce} #asProfile .pp-status #sonline{background:#34d47c!important;box-shadow:0 0 10px #34d47c88!important;filter:none!important;animation:pp-online-pulse 1.6s ease-in-out infinite!important} @keyframes pp-online-pulse{0%,100%{opacity:1}50%{opacity:.3}} @media(max-width:850px){#asProfile .pp-cover-brand{top:36px;right:28px;left:28px}#asProfile .pp-cover-title{font-size:32px}} @media(max-width:575px){#asProfile .pp-cover-brand{top:30px;right:20px;left:20px;align-items:flex-start;gap:10px}#asProfile .pp-cover-title{font-size:clamp(20px,6vw,28px);letter-spacing:-.7px}#asProfile .pp-cover-kicker{font-size:9px;letter-spacing:2px;gap:8px}#asProfile .pp-cover-kicker::before{width:20px}} @media(prefers-reduced-motion:reduce){#asProfile .pp-status #sonline{animation:none!important;opacity:1}} /* v6: compact profile values under the actions, on the cover. */ #asProfile .pp-hero-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:24px;min-width:0} #asProfile .pp-hero-side .pp-commands{align-self:auto;grid-column:auto} #asProfile .pp-hero-summary{display:flex;align-items:flex-start;justify-content:flex-end;gap:28px;max-width:100%;color:var(--pp-hero-text);text-shadow:0 1px 5px #0008} #asProfile .pp-hero-summary .pp-metric{flex:0 1 auto;min-width:0;padding:0;border:0;gap:5px} #asProfile .pp-hero-summary .pp-account{flex:0 1 auto;flex-wrap:nowrap;align-items:flex-start;gap:28px;margin:0!important;padding:0!important;border:0} #asProfile .pp-hero-summary .as-profile-meta{gap:5px} #asProfile .pp-hero-summary :is(.pp-metric strong,.as-profile-meta-value){font-size:21px;font-weight:600;line-height:1.3;white-space:nowrap;color:var(--pp-hero-text)!important;-webkit-text-fill-color:var(--pp-hero-text)!important;font-variant-numeric:tabular-nums} #asProfile .pp-hero-summary :is(.pp-metric>span,.as-profile-meta-label){font-size:12px;font-weight:400;line-height:1.5;color:var(--pp-hero-muted)!important;-webkit-text-fill-color:var(--pp-hero-muted)!important} @media(max-width:1100px){#asProfile .pp-hero-summary,#asProfile .pp-hero-summary .pp-account{gap:20px}} @media(max-width:850px){#asProfile .pp-hero-side{grid-column:1/-1;gap:20px}#asProfile .pp-hero-overlay{min-height:470px}} @media(max-width:575px){#asProfile .pp-hero-overlay{min-height:440px}#asProfile .pp-hero-side{align-items:stretch}#asProfile .pp-hero-side .pp-commands{justify-content:flex-end}#asProfile .pp-hero-summary{justify-content:space-between;gap:18px}#asProfile .pp-hero-summary .pp-account{flex:1;justify-content:space-evenly;gap:18px}#asProfile .pp-hero-summary :is(.pp-metric strong,.as-profile-meta-value){font-size:18px}} /* v7: a shorter cover, with room for the branding and profile controls. */ #asProfile .pp-hero-overlay{min-height:clamp(300px,23vw,320px)} #asProfile .pp-hero-overlay .pp-hero-main{padding:22px 28px} #asProfile .pp-cover-brand{top:28px;right:32px;left:32px;gap:8px} #asProfile .pp-cover-title{font-size:clamp(28px,3vw,40px)} @media(max-width:850px){#asProfile .pp-hero-overlay{min-height:360px}#asProfile .pp-hero-overlay .pp-hero-main,#asProfile .pp-hero-overlay .pp-hero-main.pp-no-commands{grid-template-columns:120px minmax(0,1fr);padding:18px 22px;row-gap:14px}#asProfile .pp-hero-overlay .as-profile-avatar{width:120px;min-width:120px;max-width:120px;height:120px}#asProfile .pp-hero-side{gap:16px}#asProfile .pp-cover-brand{top:24px;right:24px;left:24px}#asProfile .pp-cover-title{font-size:30px}} @media(max-width:575px){#asProfile .pp-hero-overlay{min-height:340px}#asProfile .pp-hero-overlay .pp-hero-main,#asProfile .pp-hero-overlay .pp-hero-main.pp-no-commands{grid-template-columns:100px minmax(0,1fr);padding:18px 14px}#asProfile .pp-hero-overlay .as-profile-avatar{width:100px;min-width:100px;max-width:100px;height:100px}#asProfile .pp-cover-brand{top:22px;right:20px;left:20px}#asProfile .pp-cover-title{font-size:clamp(20px,6vw,28px)}} /* v10: compact information card; both columns share the same row heights. */ #asProfile .pp-card.pp-details-card{padding:18px 24px!important} #asProfile .pp-details-card>.pp-card-title{margin-bottom:12px!important} #asProfile .pp-details-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px} #asProfile .pp-details-grid:not(.pp-details-single)::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px solid var(--pf-border)} #asProfile .pp-details-table{display:grid;grid-template-rows:subgrid;grid-row:1 / span var(--pp-detail-rows);min-width:0} #asProfile .pp-details-table>tbody{display:contents} #asProfile .pp-details-table tr{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);min-height:36px} #asProfile .pp-details-card .pp-info-table.pp-details-table td{width:auto!important;min-width:0;padding:7px 0!important;font-size:14px;line-height:1.45;align-content:center} #asProfile .pp-details-card .pp-info-table.pp-details-table td:first-child{padding-right:14px!important} #asProfile .pp-details-card .pp-info-table.pp-details-table td img{max-width:24px;height:24px} #asProfile .pp-details-single{grid-template-columns:minmax(0,1fr)} @media(max-width:991px){ #asProfile .pp-card.pp-details-card{padding:16px 18px!important} #asProfile .pp-details-grid{display:block} #asProfile .pp-details-grid::before{display:none} #asProfile .pp-details-table{display:table} #asProfile .pp-details-table>tbody{display:table-row-group} #asProfile .pp-details-table tr{display:table-row} #asProfile .pp-details-card .pp-info-table.pp-details-table td{vertical-align:middle} #asProfile .pp-details-card .pp-info-table.pp-details-table td:first-child{width:43%!important} #asProfile .pp-details-table+.pp-details-table{border-top:1px solid var(--pf-border)} } @media(max-width:767px){#asProfile .pp-details-card .pp-info-table.pp-details-table td{font-size:13px}} /* v11: denser overview, paired card heights and a vertically centered header. */ #asProfile .pp-card.pp-details-card{padding:12px 18px!important} #asProfile .pp-details-card>.pp-card-title{font-size:15px!important;margin-bottom:8px!important} #asProfile .pp-details-grid{column-gap:32px} #asProfile .pp-details-table tr{min-height:30px} #asProfile .pp-details-card .pp-info-table.pp-details-table td{padding:5px 0!important;font-size:13px;line-height:1.4} #asProfile .pp-details-card .pp-info-table.pp-details-table td img{max-width:20px;height:20px} #asProfile .pp-overview-paired{row-gap:16px} #asProfile .pp-overview-paired>.pp-details-card{grid-column:1;grid-row:1;align-self:stretch} #asProfile .pp-overview-paired>.pp-gifts-card{grid-column:2;grid-row:1;align-self:stretch} #asProfile .pp-overview-paired>.pp-main-column{grid-column:1;grid-row:2} #asProfile .pp-overview-paired>.pp-side-column{grid-column:2;grid-row:2} #asProfile .pp-shell .block.pp-gifts-card{padding:12px 16px!important;min-width:0;display:flex;flex-direction:column;gap:8px} #asProfile .pp-gifts-card .userGiftsHeader{align-items:center;font-size:15px!important;margin:0!important;gap:10px} #asProfile .pp-gifts-card .userGiftsHeader small{font-size:12px;font-weight:400} #asProfile .pp-gifts-card .gifts-items{display:flex!important;align-items:center;gap:8px;overflow-x:auto;max-width:100%;margin:auto 0!important;padding:0 0 6px;scrollbar-width:thin} #asProfile .pp-gifts-card .gift{flex:0 0 64px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:3px;background:color-mix(in srgb,var(--pf-text) 4%,transparent);border:1px solid var(--pf-border);border-radius:8px} #asProfile .pp-gifts-card .gift img{width:56px!important;height:56px!important;object-fit:contain} #asProfile .pp-gifts-card :is(.showAllGifts,.sendGiftUser){font-size:12px!important;line-height:1.4!important;min-height:28px;height:auto!important;padding:4px 10px!important;border-radius:8px!important} #asProfile .pp-gifts-card .sendGiftUser{width:100%;margin:0!important} #asProfile .pp-gifts-card .emptyGifts{font-size:13px;min-height:54px;display:flex;align-items:center} #asProfile .pp-tabs{margin:12px 0 12px;gap:4px;border-radius:12px} #asProfile .pp-tab{min-height:40px;padding:10px 16px!important;font-size:13px!important;line-height:1.4!important} #asProfile .pp-tab[aria-selected="true"]::after{left:16px;right:16px;height:2px} #asProfile .pp-hero-overlay{min-height:0;align-items:center} #asProfile .pp-hero-overlay .pp-hero-main{padding:18px 24px} #asProfile .pp-hero-side{gap:12px} #asProfile .pp-hero-side>.pp-cover-brand{position:static;inset:auto;align-items:flex-end;gap:4px;max-width:100%} #asProfile .pp-hero-side .pp-cover-title{font-size:23px;letter-spacing:-.6px} #asProfile .pp-hero-side .pp-cover-kicker{font-size:9px;letter-spacing:1.5px;gap:8px} #asProfile .pp-hero-side .pp-cover-kicker::before{width:18px} #asProfile .pp-hero-overlay .pp-primary-actions a,#asProfile .pp-hero-overlay .pp-menu>summary{min-height:32px;padding:6px 12px!important;font-size:12px!important;border-radius:8px!important} #asProfile .pp-hero-overlay .pp-gift-menu>summary{width:32px;padding:6px!important} #asProfile .pp-hero-overlay .pp-gift-menu>summary svg{width:18px;height:18px} #asProfile .pp-hero-overlay .pp-chevron{font-size:13px} #asProfile .pp-hero-summary,#asProfile .pp-hero-summary .pp-account{gap:18px} #asProfile .pp-hero-summary :is(.pp-metric strong,.as-profile-meta-value){font-size:16px;line-height:1.3} #asProfile .pp-hero-summary :is(.pp-metric>span,.as-profile-meta-label){font-size:10px} #asProfile .pp-hero-summary :is(.pp-metric,.as-profile-meta){gap:3px} @media(max-width:991px){ #asProfile .pp-details-table tr.pp-details-spacer{display:none!important} } @media(max-width:850px){ #asProfile .pp-hero-overlay .pp-hero-main,#asProfile .pp-hero-overlay .pp-hero-main.pp-no-commands{padding:18px 20px;row-gap:16px} #asProfile .pp-hero-side{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px} #asProfile .pp-hero-side>.pp-cover-brand{align-items:flex-start;grid-column:1;grid-row:1/3} #asProfile .pp-hero-side .pp-commands{grid-column:2;grid-row:1} #asProfile .pp-hero-summary{grid-column:2;grid-row:2} #asProfile .pp-hero-side .pp-cover-title{font-size:20px} } @media(max-width:767px){ #asProfile .pp-overview-paired{grid-template-columns:minmax(0,1fr)} #asProfile .pp-overview-paired>:is(.pp-details-card,.pp-gifts-card,.pp-main-column,.pp-side-column){grid-column:1;grid-row:auto} #asProfile .pp-tabs{padding:0 4px;gap:0} #asProfile .pp-tab{padding:10px 12px!important} #asProfile .pp-tab[aria-selected="true"]::after{left:12px;right:12px} } @media(max-width:575px){ #asProfile .pp-hero-overlay .pp-hero-main,#asProfile .pp-hero-overlay .pp-hero-main.pp-no-commands{padding:16px 14px;row-gap:14px} #asProfile .pp-hero-side{display:flex;flex-direction:column;align-items:stretch;gap:12px} #asProfile .pp-hero-side>.pp-cover-brand{display:flex;align-items:flex-end} #asProfile .pp-hero-side .pp-commands{justify-content:flex-end} #asProfile .pp-hero-summary{justify-content:space-between} #asProfile .pp-hero-summary .pp-account{justify-content:flex-end;gap:20px} } /* v12: no horizontal separators in the user information card. */ #asProfile .pp-details-card .pp-info-table.pp-details-table td{border:0!important} #asProfile .pp-details-card .pp-details-table+.pp-details-table{border-top:0!important} /* v13: consistent space before the site footer for every profile tab. */ html.as-private-profile #asProfile.pp-ready{padding-bottom:24px!important} /* v15: compact friend cards with contextual actions. */ #asProfile #pp-panel-friends #friends .pp-friend{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:4px 8px;min-width:0;margin:0;padding:10px 12px;border:1px solid var(--pf-border);border-radius:10px;background:color-mix(in srgb,var(--pf-text) 2%,transparent)} #asProfile #pp-panel-friends #friends .pp-friend-avatar{grid-column:1;grid-row:1/3} #asProfile #pp-panel-friends #friends .pp-friend-identity{grid-column:2;grid-row:1;justify-content:flex-start;align-self:end;text-decoration:none;min-height:20px} #asProfile #pp-panel-friends #friends .pp-friend-name{font-size:13px} #asProfile .pp-friend-actions{grid-column:2;grid-row:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;align-self:start} #asProfile .pp-friend-button,#asProfile .pp-friend-menu>summary{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:28px;height:auto;width:auto;margin:0!important;padding:4px 9px!important;border:1px solid var(--pf-border)!important;border-radius:6px!important;box-shadow:none!important;background:color-mix(in srgb,var(--pf-text) 5%,transparent)!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important;text-decoration:none!important;font-family:inherit;font-size:11px!important;font-weight:500!important;line-height:18px!important;white-space:nowrap;cursor:pointer} #asProfile .pp-friend-button:hover,#asProfile .pp-friend-menu>summary:hover{background:color-mix(in srgb,var(--pf-text) 10%,transparent)!important} #asProfile .pp-friend-button:disabled{cursor:default;opacity:.65} #asProfile .pp-friend-self{font-size:12px;color:var(--pf-muted)} #asProfile .pp-friend-menu{position:relative;margin:0} #asProfile .pp-friend-menu>summary{width:30px;padding:4px!important;list-style:none} #asProfile .pp-friend-menu>summary::-webkit-details-marker{display:none} #asProfile .pp-friend-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} #asProfile #pp-panel-friends #friends .pp-friend:has(.pp-friend-menu[open]){z-index:10} #asProfile .pp-friend-dropdown{position:absolute;top:calc(100% + 5px);right:0;z-index:20;min-width:180px;padding:5px;border:1px solid var(--pf-border);border-radius:9px;background:var(--pf-panel);box-shadow:0 8px 22px var(--pf-shadow)} #asProfile .pp-friend-dropdown>a,#asProfile .pp-friend-dropdown>button{display:block;width:100%;height:auto;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:5px!important;background:none!important;box-shadow:none!important;text-decoration:none!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important;font-family:inherit;font-size:12px!important;font-weight:400!important;line-height:18px!important;white-space:nowrap;text-align:left;cursor:pointer} #asProfile .pp-friend-dropdown>:hover{background:color-mix(in srgb,var(--pf-text) 8%,transparent)!important} #asProfile .pp-friend-notice{margin:10px 0 0;font-size:12px;color:var(--pf-muted)} #asProfile .pp-friend-notice:empty{display:none} @media(max-width:575px){#asProfile #pp-panel-friends #friends .pp-friend{padding:8px;column-gap:6px}#asProfile .pp-friend-button{padding:4px 7px!important}} /* Accepted friends and request lists stay inside the profile shell. */ #asProfile #pp-panel-friends #friends:has(.pp-friends-section){display:block!important} #asProfile #friends .pp-friend-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px} #asProfile #friends .pp-friend-list[hidden]{display:none!important} #asProfile .pp-friend-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px} #asProfile .pp-friend-tabs>button{display:inline-flex;align-items:center;gap:7px;width:auto;height:auto;margin:0!important;padding:7px 12px!important;border:1px solid var(--pf-border)!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--pf-muted)!important;font-family:inherit;font-size:12px!important;font-weight:600;line-height:18px;cursor:pointer} #asProfile .pp-friend-tabs>button[aria-selected="true"]{background:color-mix(in srgb,var(--pf-text) 9%,transparent)!important;color:var(--pf-text)!important} #asProfile .pp-friend-count{font-size:11px;font-weight:400;opacity:.8} #asProfile .pp-friend-tabs>button:focus-visible{outline:2px solid var(--pf-text);outline-offset:2px} @media(max-width:1199px){#asProfile #friends .pp-friend-list{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:991px){#asProfile #friends .pp-friend-list{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:767px){#asProfile #friends .pp-friend-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:575px){#asProfile #friends .pp-friend-list{grid-template-columns:minmax(0,1fr);gap:10px}#asProfile .pp-friend-tabs>button{padding:6px 8px!important;font-size:11px!important}} /* The installed service-management UI lives inside the owner's privileges tab. */ #asProfile #ppMyStores{min-width:0;width:100%} #asProfile #ppMyStores>.my-stores-page{width:100%;max-width:none;flex:none;float:none;margin:0;padding:0} #asProfile #ppMyStores .myStoresModern{padding:0!important;overflow:visible!important} #asProfile #ppMyStores .myStoresHeroText h1{font-size:17px!important} #asProfile #ppMyStores .myStoresTable>tbody>.pp-stores-state{display:block;min-height:70px} #asProfile #ppMyStores .myStoresTable>tbody>.pp-stores-state>td{display:flex;justify-content:center;gap:12px;border:0!important;padding:16px!important} /* Own notifications keep the site's existing rows, pagination and actions. */ #asProfile #ppNotifications{min-width:0;width:100%} html body .wapper #asProfile #ppNotifications .notificationsPageColumn{padding:0!important;margin:0!important;float:none} html body .wapper #asProfile #ppNotifications #notifications_line.notificationsPagePanel{margin:0!important} #asProfile #ppNotifications .notificationsPaginationSource{margin:16px 0 0} /* Own settings retain their forms inside the profile, without the old sidebar. */ #asProfile #ppSettings { min-width: 0; } #asProfile #ppSettings .settingsModern { width: 100%; max-width: none; flex: 0 0 100%; padding: 0; } #asProfile #ppSettings .settingsModernHero { padding: 18px 22px !important; margin-bottom: 16px !important; } #asProfile #ppSettings .settingsModernHero h1 { font-size: 20px !important; margin: 0 0 4px !important; } #asProfile #ppSettings .settingsModernHero p { font-size: 14px; margin: 0; } #asProfile #ppSettings .settingsModern > .row { margin: 0 -8px; } #asProfile #ppSettings .settingsModern > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; min-width: 0; } #asProfile #ppSettings .settingsModern .block { margin-bottom: 16px; } #asProfile #ppSettings [id$="_area"] { scroll-margin-top: 90px; } @media(max-width: 767px) { #asProfile #ppSettings .settingsModernHero { padding: 16px; } #asProfile #ppSettings .settingsModernHero__icon { display: none; } #asProfile #ppSettings .settingsModern .block { padding: 16px; } #asProfile #ppSettings .input-group { min-width: 0; } } /* v28: profile figures below the login. */ #asProfile .pp-heading>.pp-hero-summary{justify-content:flex-start;margin-top:20px;flex-wrap:wrap;gap:14px} #asProfile .pp-heading>.pp-hero-summary .pp-account{flex:0 1 auto;justify-content:flex-start;gap:18px} #asProfile .pp-hero-overlay .as-profile-avatar[role=button]{cursor:zoom-in} #asProfile .pp-hero-overlay .as-profile-avatar[role=button]:focus-visible{outline:2px solid var(--pp-hero-text);outline-offset:4px;border-radius:50%} @media(max-width:575px){#asProfile .pp-heading>.pp-hero-summary{margin-top:12px;gap:10px}#asProfile .pp-heading>.pp-hero-summary .pp-account{gap:12px;flex-wrap:wrap}#asProfile .pp-heading>.pp-hero-summary :is(.pp-metric strong,.as-profile-meta-value){font-size:14px}} /* profile-preview-id2-cover */ /* Code-native artwork follows every palette, including the custom accent. */ #asProfile{--pc-base:#102335;--pc-deep:#09131f;--pc-accent:var(--private-accent,#62d7ce);--pc-ink:#f0f6fc;--pc-muted:#c2d0df;--pc-line:#ffffff0c} html[data-private-mode="dark"] #asProfile{--pc-base:#292929;--pc-deep:#0b0c0e;--pc-ink:#f5f5f5;--pc-muted:#c8c8c8;--pc-accent:var(--private-accent,#bbbfc5)} html[data-private-mode="neutral"] #asProfile{--pc-base:#62656b;--pc-deep:#303239;--pc-ink:#fff;--pc-muted:#d7dbe1;--pc-accent:var(--private-accent,#e0e4e8)} html[data-private-mode="light"] #asProfile{--pc-base:#d7e0e7;--pc-deep:#acbdcb;--pc-ink:#1c3043;--pc-muted:#415b70;--pc-accent:var(--private-accent,#446f91);--pc-line:#ffffff35} /* appearance.js copies the legacy Ocean gradient to the end of the page. Keep the mode-aware background authoritative; its colours still use theme variables. */ @supports (--private-theme-static: 1) { html body #asProfile .pp-hero-overlay.pp-default-cover .pp-cover-default, html body #asProfile .pp-cover-preview{background:radial-gradient(ellipse at 88% 5%,color-mix(in srgb,var(--pc-accent) 28%,transparent),transparent 57%),radial-gradient(ellipse at 5% 105%,color-mix(in srgb,var(--pc-accent) 12%,transparent),transparent 60%),linear-gradient(115deg,var(--pc-deep),var(--pc-base))} } #asProfile .pp-cover-default::before{background:repeating-linear-gradient(130deg,transparent 0,transparent 95px,var(--pc-line) 96px,var(--pc-line) 97px,transparent 98px,transparent 194px)} #asProfile .pp-default-cover .pp-cover::after{opacity:0} #asProfile .pp-default-cover .pp-cover-brand,#asProfile .pp-cover-preview .pp-cover-brand{color:var(--pc-ink)!important;-webkit-text-fill-color:var(--pc-ink)!important} #asProfile .pp-default-cover .pp-cover-kicker,#asProfile .pp-cover-preview .pp-cover-kicker{color:var(--pc-muted)!important;-webkit-text-fill-color:var(--pc-muted)!important} #asProfile .pp-default-cover .pp-cover-domain,#asProfile .pp-cover-preview .pp-cover-domain{color:color-mix(in srgb,var(--pc-accent) 65%,var(--pc-ink))!important;-webkit-text-fill-color:color-mix(in srgb,var(--pc-accent) 65%,var(--pc-ink))!important} #asProfile .pp-cover-kicker::before{background:var(--pc-accent)} #asProfile .pp-default-cover .pp-heading{--pp-hero-text:var(--pc-ink);--pp-hero-muted:var(--pc-muted);text-shadow:none!important} #asProfile .pp-default-cover :is(.pp-status,.pp-hero-summary,.pp-hero-summary strong,.as-profile-meta-value){color:var(--pc-ink)!important;-webkit-text-fill-color:var(--pc-ink)!important;text-shadow:none!important} #asProfile .pp-default-cover :is(.pp-metric>span,.as-profile-meta-label){color:var(--pc-muted)!important;-webkit-text-fill-color:var(--pc-muted)!important} #asProfile .pp-custom-cover .pp-cover::before,#asProfile .pp-custom-cover .pp-cover-brand,#asProfile .pp-cover-preview.pp-cover-custom::before,#asProfile .pp-cover-preview.pp-cover-custom .pp-cover-brand{display:none!important} #asProfile .pp-cover-preview{position:relative;isolation:isolate;width:100%;box-sizing:border-box;aspect-ratio:24/5;min-height:110px;overflow:hidden;border:1px solid var(--pf-border);border-radius:12px;margin:0 0 14px} #asProfile .pp-cover-preview .pp-cover-preview-brand{inset:0;padding:18px;justify-content:center;align-items:flex-end;gap:6px} #asProfile .pp-cover-preview .pp-cover-title{font-size:clamp(18px,2.3vw,28px);letter-spacing:-.6px} #asProfile .pp-cover-preview .pp-cover-kicker{font-size:9px;letter-spacing:1.5px} #asProfile .pp-cover-editor .pp-cover-help,#asProfile .pp-cover-editor .pp-cover-file{font-size:12px;line-height:1.5;color:var(--pf-muted);margin:0 0 8px} #asProfile .pp-cover-editor-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px} #asProfile .pp-cover-editor-actions .btn{width:auto!important;min-height:32px;padding:6px 12px!important;font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;cursor:pointer} #asProfile .pp-cover-editor-actions .btn:disabled{opacity:.5;cursor:default} #asProfile .pp-cover-message{font-size:13px;line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere;color:var(--pf-text)} #asProfile .pp-cover-message:empty{display:none} #asProfile .pp-cover-error{border-left:3px solid var(--pf-muted);padding-left:10px} #asProfile .pp-cover-editor input[hidden],#asProfile .pp-cover-editor button[hidden]{display:none!important} @media(max-width:575px){#asProfile .pp-cover-preview .pp-cover-kicker{font-size:8px;letter-spacing:1px}#asProfile .pp-cover-preview .pp-cover-preview-brand{padding:12px}} /* Keep uploaded artwork and its contrast outside appearance.js recoloring. This is the site's existing opt-out, not a global theme override. */ @supports (--private-theme-static: 1) { html body #asProfile .pp-hero-overlay.pp-custom-cover, html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover, html body #asProfile .pp-cover-preview.pp-cover-custom { background:#080d14!important;filter:none!important;opacity:1!important; } html body #asProfile .pp-custom-cover .pp-cover::after, html body #asProfile .pp-cover-preview.pp-cover-custom::after { content:none!important;display:none!important; } html body #asProfile .pp-cover-custom>.pp-cover-media { object-fit:cover!important;object-position:center!important; filter:none!important;opacity:1!important;mix-blend-mode:normal!important; } html body #asProfile .pp-custom-cover :is(.pp-status,.pp-hero-summary,.pp-hero-summary strong,.as-profile-meta-value) { color:#f7f9fc!important;-webkit-text-fill-color:#f7f9fc!important;text-shadow:0 1px 4px #000; } html body #asProfile .pp-custom-cover :is(.pp-metric>span,.as-profile-meta-label) { color:#e2e7ed!important;-webkit-text-fill-color:#e2e7ed!important;text-shadow:0 1px 4px #000; } html body #asProfile .pp-hero-overlay.pp-has-cover.pp-custom-cover .pp-menu>summary { background:#101c2ce8!important;color:#f7f9fc!important;-webkit-text-fill-color:#f7f9fc!important;border-color:#ffffff40!important; } html body #asProfile .pp-hero-overlay.pp-has-cover.pp-custom-cover .pp-primary-actions a { background:#f7f9fc!important;color:#1c2632!important;-webkit-text-fill-color:#1c2632!important;border-color:#f7f9fc!important; } html body #asProfile .pp-custom-cover .pp-chevron{color:#e2e7ed!important} @media(max-width:850px) { html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover::after { content:""!important;display:block!important;opacity:1!important;pointer-events:none; background:linear-gradient(90deg,rgba(8,13,20,.9),rgba(8,13,20,.72) 72%,rgba(8,13,20,.28))!important; } } } /* BEGIN profile-personal-status-20261015 */ @supports (--private-theme-static: 1) { html body #asProfile .pp-hero-overlay.pp-with-personal-status .pp-hero-main{grid-template-columns:184px minmax(0,1fr) auto;grid-template-rows:minmax(132px,1fr) auto;min-height:248px;padding:22px 24px;gap:16px 24px} html body #asProfile .pp-with-personal-status .as-profile-avatar{grid-column:1;grid-row:1/3} html body #asProfile .pp-with-personal-status .pp-heading{grid-column:2;grid-row:1;min-width:0;align-self:center} html body #asProfile .pp-with-personal-status .pp-hero-side{grid-column:3;grid-row:1;align-self:center} html body #asProfile .pp-with-personal-status .pp-hero-bottom{grid-column:2/-1;grid-row:2;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;min-width:0} html body #asProfile .pp-with-personal-status .pp-hero-bottom>.pp-hero-summary{grid-column:auto;grid-row:auto;justify-content:flex-start;flex-wrap:wrap;gap:14px;margin:0} html body #asProfile .pp-with-personal-status .pp-hero-bottom .pp-account{flex:0 1 auto;justify-content:flex-start;gap:18px;flex-wrap:wrap} html body #asProfile .pp-with-personal-status .pp-hero-bottom>.pp-commands{grid-column:auto;grid-row:auto;align-self:flex-end;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0 0 0 auto} html body #asProfile .pp-with-personal-status .pp-personal-status{margin:8px 0 0;max-width:640px;font-size:14px;font-weight:400;line-height:1.45;white-space:normal;overflow-wrap:anywhere;color:var(--pp-hero-text)!important;-webkit-text-fill-color:var(--pp-hero-text)!important} html body #asProfile .pp-with-personal-status .pp-personal-status[hidden]{display:none!important} html body #asProfile .pp-with-personal-status.pp-default-cover .pp-personal-status{color:var(--pc-ink)!important;-webkit-text-fill-color:var(--pc-ink)!important;text-shadow:none} html body #asProfile .pp-with-personal-status.pp-custom-cover .pp-personal-status{color:#f7f9fc!important;-webkit-text-fill-color:#f7f9fc!important;text-shadow:0 1px 3px #000,0 0 6px #000} html body #asProfile .pp-with-personal-status.pp-custom-cover .pp-hero-side{display:none} html body #asProfile .pp-with-personal-status.pp-custom-cover .pp-heading{grid-column:2/-1;max-width:640px} html body #asProfile .pp-with-personal-status.pp-default-cover .pp-hero-bottom .pp-menu>summary{background:var(--pc-base)!important;border-color:var(--pf-border)!important;color:var(--pc-ink)!important;-webkit-text-fill-color:var(--pc-ink)!important} html body #asProfile .pp-with-personal-status.pp-default-cover .pp-hero-bottom .pp-chevron{color:var(--pc-muted)!important} html body #asProfile .pp-personal-status-editor{scroll-margin-top:90px} html body #asProfile .pp-personal-status-editor label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--pf-text)} html body #asProfile .pp-personal-status-editor textarea{display:block;width:100%;box-sizing:border-box;min-height:94px;padding:10px 12px;resize:vertical;font:inherit;line-height:1.5;border:1px solid var(--pf-border)!important;border-radius:10px;background:var(--pf-panel)!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important} html body #asProfile .pp-personal-status-editor textarea:focus-visible{outline:2px solid var(--private-accent,var(--pf-text));outline-offset:2px} html body #asProfile .pp-personal-status-help{font-size:12px;line-height:1.5;color:var(--pf-muted);margin:8px 0 12px} html body #asProfile .pp-personal-status-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} html body #asProfile .pp-personal-status-actions button{width:auto!important;font:inherit;font-size:14px;padding:9px 14px!important;min-height:40px} html body #asProfile .pp-personal-status-actions button:disabled{opacity:.55;cursor:default} html body #asProfile .pp-personal-status-count{font-size:12px;color:var(--pf-muted);font-variant-numeric:tabular-nums} html body #asProfile .pp-personal-status-message{font-size:13px;line-height:1.5;margin:12px 0 0;color:var(--pf-text);overflow-wrap:anywhere} html body #asProfile .pp-personal-status-message:empty{display:none} @media(max-width:1100px){html body #asProfile .pp-hero-overlay.pp-with-personal-status .pp-hero-main{grid-template-columns:164px minmax(0,1fr) auto;gap:16px 18px}} @media(max-width:850px){ html body #asProfile .pp-hero-overlay.pp-with-personal-status .pp-hero-main{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0;padding:20px;gap:18px} html body #asProfile .pp-with-personal-status .as-profile-avatar{grid-row:1} html body #asProfile .pp-with-personal-status .pp-hero-side{grid-column:1/-1;grid-row:2;display:flex;align-items:flex-end} html body #asProfile .pp-with-personal-status .pp-hero-side>.pp-cover-brand{align-items:flex-end} html body #asProfile .pp-with-personal-status .pp-hero-bottom{grid-column:1/-1;grid-row:3} html body #asProfile .pp-with-personal-status.pp-custom-cover .pp-hero-bottom{grid-row:2} } @media(max-width:575px){ html body #asProfile .pp-hero-overlay.pp-with-personal-status .pp-hero-main{grid-template-columns:100px minmax(0,1fr);padding:18px 14px;gap:16px 12px} html body #asProfile .pp-with-personal-status .pp-hero-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} html body #asProfile .pp-with-personal-status .pp-hero-bottom>.pp-hero-summary{grid-column:1/-1;grid-row:1} html body #asProfile .pp-with-personal-status .pp-hero-bottom>.pp-commands{grid-column:1/-1;grid-row:2;justify-self:end} html body #asProfile .pp-with-personal-status .pp-personal-status{font-size:13px} html body #asProfile .pp-with-personal-status .pp-hero-bottom .pp-account{gap:14px} html body #asProfile .pp-with-personal-status .pp-hero-summary :is(.pp-metric strong,.as-profile-meta-value){font-size:14px} } } /* END profile-personal-status-20261015 */ /* profile-cover-storage-20261021-v54 */ /* Only the failed-cover notice; the existing profile layout is preserved. */ #asProfile .pp-cover-load-notice{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;padding:8px 18px;font-size:13px;line-height:1.4;background:var(--pf-panel,#acbac5);color:var(--pf-text,#24313d)} #asProfile .pp-cover-load-notice button{width:auto;min-height:32px;padding:5px 10px;border:1px solid currentColor;border-radius:8px;font:inherit;color:inherit;background:transparent;cursor:pointer} #asProfile .pp-cover-load-notice button:disabled{opacity:.6;cursor:wait} /* profile-preview-id2-photos */ /* Photo surfaces use the installed theme palette, including text-fill overrides. */ :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm){--ph-border:var(--pf-border,#344d67);--ph-muted:var(--pf-muted,#b6c4d4);--ph-text:var(--pf-text,#eef4fb);--ph-bg:var(--pf-panel,#182940);--ph-fill:var(--pf-fill,linear-gradient(#20344f,#182940));--ph-shadow:var(--pf-shadow,#0005);--ph-hover:var(--private-hover-fill,var(--ph-fill));--ph-accent:var(--private-accent,var(--ph-text));color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;font-family:inherit;line-height:1.45} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) *{box-sizing:border-box} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) [hidden]{display:none!important} html.pph-open,html.pph-open body{overflow:hidden!important} #pphPhotos{padding:18px!important} #pphPhotos .pph-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} #pphPhotos .pph-heading .pp-card-title{margin:0!important} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;margin:0;padding:7px 12px;border:1px solid var(--ph-border)!important;border-radius:9px;background-color:var(--ph-bg)!important;background-image:var(--ph-fill)!important;color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;box-shadow:inset 0 1px 0 #ffffff12,0 3px 7px var(--ph-shadow)!important;text-shadow:none!important;font-family:inherit;font-size:13px;font-weight:500;line-height:1.35;cursor:pointer;transition:border-color .15s} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-button:hover{background-image:var(--ph-hover)!important;border-color:var(--ph-accent)!important} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) :is(button,textarea,input):focus-visible{outline:2px solid var(--ph-accent)!important;outline-offset:3px} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-button:disabled{opacity:.55;cursor:default} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) svg{display:block;flex:none;width:20px;height:20px;stroke:currentColor;fill:none} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-status{font-size:13px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important;white-space:pre-wrap;overflow-wrap:anywhere} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-status:not(:empty){padding:10px 0 16px} :is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) .pph-status .pph-button{margin-left:10px} #pphPhotos .pph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,180px));gap:12px;align-items:start} #pphPhotos .pph-grid+button:not([hidden]){display:flex;margin:18px auto 0} #pphPhotos .pph-tile{display:block;width:100%;min-height:0;padding:0;overflow:hidden;text-align:left;border-radius:10px;box-shadow:none!important} #pphPhotos .pph-thumbnail{display:flex;align-items:center;justify-content:center;width:100%;height:158px;padding:5px;background:color-mix(in srgb,var(--ph-bg) 85%,#000)!important} #pphPhotos .pph-thumbnail img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;border:0!important;border-radius:0!important} #pphPhotos .pph-tile-meta{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:8px;font-size:11px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important;white-space:nowrap} html body :is(#pphViewer,#pphUpload){box-sizing:border-box;position:fixed;inset:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;border:1px solid var(--ph-border)!important;border-radius:15px;background-color:var(--ph-bg)!important;background-image:var(--ph-fill)!important;padding:0;box-shadow:0 24px 80px #0007!important;overflow:auto} html body :is(#pphViewer,#pphUpload)::backdrop{background:rgba(0,0,0,.84)!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} :is(#pphViewer,#pphUpload) .pph-close{position:absolute;right:12px;top:12px;z-index:10;width:32px;height:32px;min-height:32px;padding:6px} :is(#pphViewer,#pphUpload) .pph-close svg{width:20px;height:20px} /* The full-screen dialog is only a dark scrim; the centered frame carries the photo. */ html body #pphViewer{width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important;padding:24px 56px!important} #pphViewer .pph-close{position:fixed;top:10px;right:10px;width:36px;height:36px;background:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important;box-shadow:none!important} #pphViewer .pph-close:hover{background:#ffffff18!important} #pphViewer .pph-close svg{width:26px;height:26px;stroke:#fff!important} #pphViewer .pph-view-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;width:min(1180px,100%);height:min(820px,100%);min-height:0;margin:auto;border:1px solid var(--ph-border);border-radius:12px;overflow:hidden;background:var(--ph-bg);box-shadow:0 20px 80px #0005;position:relative;top:50%;transform:translateY(-50%)} #pphViewer .pph-view-body>.pph-status{padding:25px} #pphViewer .pph-media{display:flex;flex-direction:column;min-width:0;min-height:0;background:#090b0f} #pphViewer .pph-stage{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;flex:1;overflow:hidden;background:#090b0f;color:#fff;-webkit-text-fill-color:#fff} #pphViewer .pph-stage img{display:block!important;width:100%!important;height:100%!important;max-height:100%!important;max-width:100%!important;object-fit:contain!important;border:0!important;border-radius:0!important} #pphViewer .pph-media-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:45px;padding:8px 16px;border-top:1px solid var(--ph-border);background-color:var(--ph-bg);background-image:var(--ph-fill);color:var(--ph-muted);-webkit-text-fill-color:var(--ph-muted);font-size:12px} #pphViewer .pph-detail{display:flex;flex-direction:column;min-height:0;min-width:0;background-color:var(--ph-bg)!important;background-image:var(--ph-fill)!important;border-left:1px solid var(--ph-border)} #pphViewer .pph-photo-meta{display:flex;align-items:center;gap:11px;padding:16px;flex:none;border-bottom:1px solid var(--ph-border)} #pphViewer .pph-author-avatar{display:block;flex:none;width:38px!important;height:38px!important;object-fit:cover;border-radius:50%!important} #pphViewer .pph-photo-identity{display:flex;flex-direction:column;gap:3px;min-width:0} #pphViewer .pph-author{font-weight:600;font-size:14px;overflow-wrap:anywhere} #pphViewer a{color:color-mix(in srgb,#2384d1 70%,var(--ph-text))!important;-webkit-text-fill-color:currentColor!important;text-decoration:none} #pphViewer a:hover{text-decoration:underline} :is(#pphViewer,#pphUpload) .pph-muted{font-size:12px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} #pphViewer .pph-actionbar{position:relative;display:flex;align-items:center;gap:7px;flex:none;min-height:52px;padding:8px 14px;border-bottom:1px solid var(--ph-border);z-index:2} #pphViewer .pph-reactions{display:flex;flex-wrap:wrap;gap:5px;min-width:0} #pphViewer :is(.pph-choose-reaction,.pph-reaction){padding:4px 6px;min-height:30px;box-shadow:none!important;background:transparent!important;border-color:transparent!important} #pphViewer .pph-choose-reaction svg{width:25px;height:25px;color:var(--ph-muted)} #pphViewer :is(.pph-reaction,.pph-emoji)[aria-pressed=true]{border-color:var(--ph-accent)!important;background:color-mix(in srgb,var(--ph-text) 10%,transparent)!important} #pphViewer .pph-picker{position:absolute;top:calc(100% + 5px);left:10px;right:10px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:10px;border:1px solid var(--ph-border);border-radius:12px;background-color:var(--ph-bg)!important;background-image:var(--ph-fill)!important;box-shadow:0 10px 28px var(--ph-shadow);z-index:3} #pphViewer .pph-emoji{font:24px/1.2 "Apple Color Emoji","Segoe UI Emoji",sans-serif;min-width:0;padding:5px 0;min-height:36px;box-shadow:none!important;background:transparent!important;border-color:transparent!important;-webkit-text-fill-color:initial!important} #pphViewer .pph-discussion{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px;scrollbar-width:thin} /* Caption and reactions stay outside the scrolling comment list. */ #pphViewer .pph-detail:has(>.pph-caption)>.pph-actionbar{border-bottom:0} #pphViewer .pph-caption{white-space:pre-wrap;overflow-wrap:anywhere;flex:none;font-size:13px;margin:0;padding:14px 16px;border-bottom:1px solid var(--ph-border);max-height:min(200px,30dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} #pphViewer .pph-error{flex:none;color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;font-size:13px;white-space:pre-wrap;padding:10px;border:1px solid var(--ph-border);border-radius:8px;margin:10px 0} #pphViewer .pph-error:empty{display:none} #pphViewer .pph-comments{font-size:13px} #pphViewer .pph-no-comments{display:flex;flex:1;min-height:120px;align-items:center;justify-content:center} #pphViewer .pph-comments-empty{display:flex;align-items:center;flex-direction:column;gap:14px;text-align:center;padding:18px 6px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} #pphViewer .pph-comments-empty svg{width:46px;height:46px;stroke-width:1.2;opacity:.65} #pphViewer .pph-comments-empty p{margin:0;max-width:240px} #pphViewer .pph-comment{padding:13px 0;border-bottom:1px solid var(--ph-border);font-size:13px} #pphViewer .pph-comment-top{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap} #pphViewer .pph-comment-top a{font-weight:600;overflow-wrap:anywhere} #pphViewer .pph-comment-top time{font-size:10px} #pphViewer .pph-comment p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere} #pphViewer :is(.pph-text-button,.pph-delete){min-height:22px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;font-size:11px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} #pphViewer .pph-delete{font-size:12px} #pphViewer .pph-discussion>button:not([hidden]){align-self:center;margin:12px 0} #pphViewer .pph-comment-form{display:flex;align-items:center;gap:8px;flex:none;min-height:56px;padding:10px 12px;border-top:1px solid var(--ph-border);background:var(--ph-bg);margin:0} :is(#pphViewer,#pphUpload) textarea{display:block;width:100%;border:1px solid var(--ph-border)!important;background:color-mix(in srgb,var(--ph-bg) 95%,var(--ph-text))!important;color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;border-radius:9px;padding:10px;font:inherit;font-size:13px;box-shadow:none!important} :is(#pphViewer,#pphUpload) textarea::placeholder{color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important;opacity:1} #pphViewer .pph-comment-form textarea{flex:1;min-width:0;min-height:36px;height:36px;max-height:96px;padding:8px 0;border:0!important;background:transparent!important;resize:none;line-height:20px} #pphViewer .pph-send{flex:none;width:32px;height:32px;min-height:32px;padding:5px;box-shadow:none!important;background:transparent!important;border-color:transparent!important} #pphViewer .pph-send svg{width:22px;height:22px} #pphViewer .pph-blocked{padding:12px;margin:0;border-top:1px solid var(--ph-border);font-size:12px} html body #pphUpload{width:440px;padding:24px!important} #pphUpload h2{color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;margin:0 32px 8px 0;font-size:20px} #pphUpload .pph-file-choice{display:flex;align-items:center;gap:12px;padding:16px 0} #pphUpload .pph-file-label{position:relative;flex:none;overflow:hidden} #pphUpload .pph-file-label:focus-within{outline:2px solid var(--ph-accent);outline-offset:3px} #pphUpload .pph-file-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0} #pphUpload .pph-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} #pphUpload .pph-upload-preview{display:block;width:100%;height:150px;object-fit:contain;margin:0 0 16px;border-radius:9px;background:color-mix(in srgb,var(--ph-bg) 85%,#000)} #pphUpload .pph-label{display:flex;flex-direction:column;gap:7px;font-size:13px;margin:0 0 14px} #pphUpload textarea{min-height:72px;resize:vertical} @media(max-width:700px){ #pphPhotos{padding:14px!important}#pphPhotos .pph-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#pphPhotos .pph-thumbnail{height:138px}#pphPhotos .pph-heading{gap:8px} html body #pphViewer{padding:46px 8px 8px!important;overflow:auto!important}#pphViewer .pph-view-body{display:flex;flex-direction:column;width:100%;height:auto;min-height:calc(100dvh - 56px);max-height:none;top:0;transform:none}#pphViewer .pph-media{flex:none;height:40dvh;min-height:180px}#pphViewer .pph-media-footer{min-height:36px;padding:7px 12px}#pphViewer .pph-detail{flex:1;min-height:340px;border-left:0;border-top:1px solid var(--ph-border)}#pphViewer .pph-photo-meta{padding:12px 14px}#pphViewer .pph-discussion{max-height:36dvh;min-height:150px}#pphViewer .pph-comment-form{position:sticky;bottom:0;z-index:2}#pphViewer .pph-close{top:5px;right:8px} html body #pphUpload{max-width:calc(100vw - 24px);padding:20px!important}#pphUpload .pph-file-choice{gap:8px}#pphUpload .pph-filename{max-width:150px} } @media(prefers-reduced-motion:reduce){:is(#pphPhotos,#pphViewer,#pphUpload,#pphConfirm) *{transition:none!important;scroll-behavior:auto!important}} /* User identities and discussion controls. */ html body #pphViewer .pph-view-body{grid-template-columns:minmax(0,1fr) 340px} html body #pphViewer .pph-user{display:flex;align-items:flex-start;gap:12px;min-width:0;width:100%} html body #pphViewer .pph-avatar{display:block;position:relative;flex:none;width:38px;height:38px;margin:5px;overflow:visible;background:none!important} html body #pphViewer .pph-avatar-image{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover} html body #pphViewer .pph-avatar-frame{position:absolute;inset:-17%;display:block;width:134%!important;height:134%!important;max-width:none!important;object-fit:contain;border-radius:0!important;pointer-events:none;z-index:1} html body #pphViewer .pph-user-info{flex:1;min-width:0;padding-top:4px} html body #pphViewer .pph-user-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:20px;line-height:1.35} html body #pphViewer .pph-user-link{min-width:0;max-width:100%;font-size:13px;font-weight:600;text-decoration:none!important;background:none!important} html body #pphViewer .pph-user-name{white-space:normal;overflow-wrap:anywhere;color:inherit;-webkit-text-fill-color:currentColor} html body #pphViewer .pph-badge{display:inline-block;flex:none;width:19px!important;height:19px!important;object-fit:contain;border-radius:0!important;max-width:none!important} html body #pphViewer .pph-photo-meta{padding:14px 16px} html body #pphViewer .pph-photo-meta time{display:block;margin-top:4px} html body #pphViewer .pph-comment{display:flex;align-items:flex-start;gap:6px;padding:14px 0} html body #pphViewer .pph-comment .pph-avatar{width:32px;height:32px;margin:4px} html body #pphViewer .pph-comment .pph-user{gap:9px} html body #pphViewer .pph-comment .pph-user-info{padding-top:2px} html body #pphViewer .pph-comment-text{font-size:13px;margin:6px 0;line-height:1.45} html body #pphViewer .pph-comment-date{display:block;font-size:10px;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important;margin-top:7px} html body #pphViewer .pph-comment-tools{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:26px} html body #pphViewer :is(.pph-comment-delete,.pph-comment-tools .pph-choose-reaction,.pph-icon-button,.pph-clip){display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;min-height:28px;padding:4px;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} html body #pphViewer :is(.pph-comment-delete,.pph-comment-tools .pph-choose-reaction){width:24px;height:24px;min-height:24px;padding:3px} html body #pphViewer .pph-comment-tools svg{width:18px;height:18px} html body #pphViewer :is(.pph-comment-delete,.pph-icon-button,.pph-clip):hover{background:color-mix(in srgb,var(--ph-text) 10%,transparent)!important;color:var(--ph-text)!important} html body #pphViewer .pph-comment .pph-reactions:empty{display:none} html body #pphViewer .pph-comment .pph-reactions{margin-top:6px;gap:4px} html body #pphViewer .pph-comment .pph-reaction{min-height:24px;padding:3px 5px;font-size:12px} html body #pphViewer .pph-floating-picker{position:fixed;top:auto;left:auto;right:auto;bottom:auto;width:280px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;z-index:30} html body #pphViewer .pph-comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:9px 10px;align-items:center} html body #pphViewer .pph-composer-tools{display:flex;align-items:center;gap:2px} html body #pphViewer .pph-comment-form textarea{grid-column:1;min-height:36px;font-size:12px} html body #pphViewer .pph-clip{position:relative;overflow:hidden;margin:0;cursor:pointer} html body #pphViewer .pph-clip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;padding:0} html body #pphViewer .pph-clip:focus-within{outline:2px solid var(--ph-accent);outline-offset:2px} html body #pphViewer .pph-attachment-preview{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;padding:5px;border:1px solid var(--ph-border);border-radius:8px} html body #pphViewer .pph-attachment-preview>img{width:42px!important;height:42px!important;object-fit:contain;border-radius:4px} html body #pphViewer .pph-attachment-preview>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} html body #pphViewer .pph-comment-attachment{display:block;width:max-content;max-width:100%;margin-top:8px} html body #pphViewer .pph-comment-attachment>img{display:block;max-width:100%!important;width:auto!important;height:auto!important;max-height:130px!important;object-fit:contain;border-radius:6px!important} html body #pphConfirm{box-sizing:border-box;position:fixed;inset:0;width:380px;max-width:calc(100vw - 32px);margin:auto;padding:24px;border:1px solid var(--ph-border)!important;border-radius:14px;background-color:var(--ph-bg)!important;background-image:var(--ph-fill)!important;box-shadow:0 20px 80px #0007!important} html body #pphConfirm::backdrop{background:rgba(0,0,0,.55)!important} html body #pphConfirm h2{font-size:19px;line-height:1.3;margin:0 0 12px;color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important} html body #pphConfirm p{font-size:14px;line-height:1.5;margin:0;color:var(--ph-muted)!important;-webkit-text-fill-color:var(--ph-muted)!important} html body #pphConfirm .pph-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px} html body #pphViewer.pph-viewer::backdrop,html body #pphUpload.pph-upload::backdrop{background:rgba(0,0,0,.84)!important} html body #pphViewer.pph-viewer :is(.pph-media,.pph-stage){background:#090b0f!important} @media(max-width:700px){html body #pphViewer .pph-view-body{display:flex}html body #pphViewer .pph-photo-meta{padding:12px 14px}} /* Album navigation and the site's purchased sticker packs. */ html body #pphViewer .pph-nav{position:fixed;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:42px;height:64px;padding:6px;min-height:0;z-index:10;border:0!important;border-radius:12px;background:transparent!important;box-shadow:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.8} html body #pphViewer .pph-nav-previous{left:7px}html body #pphViewer .pph-nav-next{right:7px} html body #pphViewer .pph-nav svg{width:30px;height:30px;stroke:#fff!important;stroke-width:2} html body #pphViewer .pph-nav:hover{opacity:1;background:#ffffff18!important} html body #pphViewer .pph-navigation-error{position:fixed;left:50%;top:65px;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 40px);padding:12px;border:1px solid var(--ph-border);border-radius:10px;background:var(--ph-bg);font-size:13px} html body #pphViewer .pph-navigation-error button{margin-left:10px} /* Match templates/d2you/css/smiles.css: 280px content, picture tabs and compact grids. */ html body #pphViewer .pph-sticker-picker{display:flex;flex-direction:column;gap:8px;padding:0;width:282px;max-height:calc(100dvh - 24px);overflow:visible;border-radius:12px;box-shadow:0 10px 30px #0005} html body #pphViewer .pph-sticker-picker::after{content:"";position:absolute;left:var(--ph-picker-tail);transform:translateX(-50%);width:0;height:0;border:8px solid transparent;pointer-events:none} html body #pphViewer .pph-sticker-picker[data-placement="top"]::after{top:100%;border-top-color:var(--ph-bg)} html body #pphViewer .pph-sticker-picker[data-placement="bottom"]::after{bottom:100%;border-bottom-color:var(--ph-bg)} html body #pphViewer .pph-sticker-picker>p{padding:12px;margin:0} html body #pphViewer .pph-sticker-tabs{display:flex;align-items:flex-start;gap:8px;flex:none;min-width:0;padding:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;user-select:none} html body #pphViewer .pph-sticker-tabs::-webkit-scrollbar{display:none} html body #pphViewer .pph-sticker-tabs.is-dragging{cursor:grabbing} html body #pphViewer .pph-sticker-pack{position:relative;flex:0 0 34px;min-width:34px;width:34px;height:34px;min-height:34px;margin:0;padding:0;box-shadow:none!important;background:transparent!important;border:0!important;border-radius:8px;transition:transform .2s} html body #pphViewer .pph-sticker-pack[aria-pressed=true]{background:transparent!important;border:0!important} html body #pphViewer .pph-sticker-pack[aria-pressed=true]::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:var(--ph-text)} html body #pphViewer .pph-sticker-pack:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--ph-text) 7%,transparent)!important} html body #pphViewer .pph-sticker-pack img{display:block;width:34px!important;height:34px!important;max-width:none!important;object-fit:contain;border-radius:8px!important;pointer-events:none} html body #pphViewer .pph-pack-locked img{opacity:.7;filter:brightness(.7)} html body #pphViewer .pph-sticker-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;column-gap:20px;row-gap:10px;min-height:0;height:260px;max-height:55dvh;flex:0 1 260px;overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:thin;scrollbar-color:var(--ph-text) transparent;overscroll-behavior:contain;border-radius:0 0 12px 12px} html body #pphViewer .pph-sticker-items::-webkit-scrollbar{width:4px} html body #pphViewer .pph-sticker-items::-webkit-scrollbar-thumb{background:var(--ph-text);border-radius:2px} html body #pphViewer .pph-sticker-items::-webkit-scrollbar-track{background:transparent} html body #pphViewer .pph-sticker-choice{justify-self:start;padding:0;min-width:0;width:64px;max-width:100%;height:64px;min-height:64px;box-shadow:none!important;border:0!important;border-radius:6px;background:transparent!important;transition:transform .2s} html body #pphViewer .pph-sticker-choice:hover{transform:scale(1.1);background:color-mix(in srgb,var(--ph-text) 7%,transparent)!important} html body #pphViewer .pph-sticker-choice img{display:block;width:64px!important;height:64px!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;border-radius:0!important} html body #pphViewer .pph-smile-items{grid-template-columns:repeat(5,minmax(0,1fr))} html body #pphViewer .pph-smile-items .pph-sticker-choice{width:32px;height:32px;min-height:32px;padding:0} html body #pphViewer .pph-smile-items img{width:32px!important;height:32px!important} @media(prefers-reduced-motion:reduce){html body #pphViewer :is(.pph-sticker-pack,.pph-sticker-choice){transition:none}} html body #pphViewer .pph-comment .pph-inline-smile{display:inline-block;width:24px!important;height:24px!important;object-fit:contain!important;vertical-align:middle;border:0!important;border-radius:0!important;margin:0 2px} html body #pphViewer .pph-sticker-items>p{grid-column:1/-1;font-size:13px;margin:12px 0} html body #pphViewer .pph-stickers-locked{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:10px;font-size:13px} html body #pphViewer .pph-comment-sticker{display:block;max-width:100%!important;width:130px!important;height:130px!important;object-fit:contain;margin-top:8px;border-radius:0!important} @media(max-width:700px){html body #pphViewer .pph-nav{top:calc(46px + 20dvh);width:34px;height:48px;background:#0006!important}html body #pphViewer .pph-nav-previous{left:10px}html body #pphViewer .pph-nav-next{right:10px}} /* Homepage chat actions: same glyphs, dimensions, spacing and hover outline. */ html body #pphViewer .pph-comment-avatar{display:flex;flex:none;width:51px;align-items:center;flex-direction:column;gap:2px} html body #pphViewer .pph-comment-actions{display:grid;grid-template-columns:24px 24px;align-items:center;width:51px;gap:3px;padding:3px 0;min-height:32px} html body #pphViewer .pph-comment-actions .pph-reply-button{grid-column:1;grid-row:1} html body #pphViewer .pph-comment-actions .pph-choose-reaction{grid-column:2;grid-row:1} html body #pphViewer :is(.pph-reply-button,.pph-choose-reaction){display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;min-width:24px;min-height:24px;height:24px;padding:0;border:1px solid transparent!important;border-radius:6px;box-shadow:none!important;background:transparent!important;color:var(--ph-text)!important;-webkit-text-fill-color:var(--ph-text)!important;font-size:0;line-height:0;transition:background .15s,border-color .15s} html body #pphViewer :is(.pph-reply-button,.pph-choose-reaction) svg{width:18px;height:18px;color:inherit} html body #pphViewer :is(.pph-reply-button,.pph-choose-reaction):enabled:is(:hover,[aria-expanded="true"]){background:color-mix(in srgb,var(--ph-text) 11%,transparent)!important;border-color:color-mix(in srgb,var(--ph-text) 25%,transparent)!important} html body #pphViewer :is(.pph-reply-button,.pph-choose-reaction):focus-visible{outline:2px solid var(--ph-text)!important;outline-offset:1px} html body #pphViewer .pph-choose-reaction:disabled{opacity:1;cursor:default;background:transparent!important;border-color:transparent!important} @media(prefers-reduced-motion:reduce){html body #pphViewer :is(.pph-reply-button,.pph-choose-reaction){transition:none}} html body #pphViewer .pph-reply-quote{background:transparent!important;color:var(--ph-muted)!important;display:flex;flex-direction:column;border:0;border-left:2px solid var(--ph-border);padding:4px 8px;margin:8px 0;color:var(--ph-muted);font-size:11px;overflow-wrap:anywhere} html body #pphViewer .pph-comment-attachment{cursor:zoom-in} html.pph-image-open,html.pph-image-open body{overflow:hidden!important} html body #pphImagePreview{position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:48px;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;overflow:hidden;color:#fff!important} html body #pphImagePreview[open]{display:flex;align-items:center;justify-content:center} html body #pphImagePreview::backdrop{background:#000e!important} html body #pphImagePreview>img{display:block;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain;border-radius:0!important;box-shadow:none!important} html body #pphImagePreview .pph-close{position:absolute;top:10px;right:10px;display:flex;justify-content:center;align-items:center;width:36px;height:36px;padding:6px;background:transparent!important;border:0;color:#fff!important;box-shadow:none!important;cursor:pointer} html body #pphImagePreview svg{width:26px;height:26px;stroke:#fff;fill:none} html body #pphImagePreview [hidden]{display:none!important} html body #pphImagePreview .pph-status{position:absolute;color:#fff!important;-webkit-text-fill-color:#fff!important} @media(max-width:575px){html body #pphImagePreview{padding:46px 12px 20px}} /* profile-about-20261016-v37 */ #asProfile .pp-profile-side-top{display:flex;flex-direction:column;gap:16px;min-width:0;width:100%;box-sizing:border-box;align-self:start} #asProfile .pp-overview-paired>.pp-profile-side-top{grid-column:2;grid-row:1} #asProfile .pp-overview-about,#asProfile .pp-overview-about>.pp-main-column,#asProfile .pp-overview-about>.pp-side-column{gap:16px} #asProfile .pp-profile-side-top>.pp-gifts-card{margin:0!important;min-height:0!important} #asProfile .pp-profile-side-top .gifts-items{margin:8px 0!important} #asProfile .pp-about-card{margin:0!important;padding:14px 16px!important;min-width:0} #asProfile .pp-about-card[hidden]{display:none!important} #asProfile .pp-about-card .pp-card-title{margin:0 0 10px!important;font-size:16px!important;line-height:1.3} #asProfile .pp-about-text{margin:0;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--pf-text,inherit)} #asProfile #pp-settings-about textarea{display:block;width:100%;box-sizing:border-box;min-height:112px;height:112px;resize:vertical;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid var(--pf-border)!important;border-radius:10px;background:var(--pf-panel)!important;color:var(--pf-text)!important;-webkit-text-fill-color:var(--pf-text)!important} #asProfile #pp-settings-about textarea:focus-visible{outline:2px solid var(--private-accent,var(--pf-text));outline-offset:2px} #asProfile .pp-about-actions{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:10px} #asProfile .pp-about-count{font-size:12px;opacity:.7;white-space:nowrap} #asProfile .pp-about-error{margin:10px 0 0;font-size:13px;line-height:1.4} #asProfile .pp-about-error[hidden]{display:none!important} @media(max-width:767px){#asProfile .pp-overview-paired>.pp-profile-side-top{grid-column:1;grid-row:auto}} /* profile-card-headings-20261016-v38 */ #asProfile .pp-shell .block.pp-visitors-card{padding:12px 16px!important} #asProfile .pp-shell .block_head.pp-count-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px!important;line-height:1.4!important;font-weight:600;margin:0 0 10px!important} #asProfile .pp-count-heading :is(.pp-count-label,.pp-count-name,.pp-heading-count){margin:0!important;float:none;position:static} #asProfile .pp-count-heading :is(.pp-count-label,.pp-count-name){font:inherit;color:inherit} #asProfile .pp-count-heading .pp-count-label{display:inline-flex;align-items:center;gap:12px;min-width:0} #asProfile .pp-count-heading .pp-count-name{min-width:0} #asProfile .pp-count-heading .pp-heading-count{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;min-width:28px;height:24px;padding:1px 7px;border:1px solid var(--pf-border);border-radius:7px;background:color-mix(in srgb,var(--pf-text) 5%,transparent);color:var(--pf-text);font-size:12px;font-weight:650;line-height:20px;font-variant-numeric:tabular-nums;white-space:nowrap} #asProfile .pp-count-heading>.showAllGifts{flex:0 0 auto} #asProfile .pp-visitors-card #users_visit{margin:0!important} /* profile-mobile-fixes-20261019-v45 */ /* Keep the mobile section order introduced in v44. */ @media (max-width: 767px) { #asProfile .pp-overview.pp-mobile-order { display: flex; flex-direction: column; gap: 0; } #asProfile .pp-overview.pp-mobile-order > .pp-main-column { width: 100%; gap: 16px; } #asProfile .pp-mobile-order .pp-gifts-card .gifts-items { margin: 8px 0 !important; } #asProfile .pp-mobile-order .pp-visitors-card #users_visit { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; padding: 4px 0; min-width: 0; } #asProfile .pp-mobile-order .pp-visitors-card #users_visit .user_visit { display: block; box-sizing: border-box; width: 100%; height: auto; min-width: 0; aspect-ratio: 1; margin: 0; padding: 0; } #asProfile .pp-mobile-order .pp-visitors-card #users_visit .user_visit > img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; } #asProfile .pp-mobile-order .pp-visitors-card #users_visit > .empty-element { grid-column: 1 / -1; } } /* Size the card as well as the image: the old 64px height cropped mobile gifts. */ html body #asProfile .pp-overview .pp-gifts-card .gifts-items > .gift { position: relative; display: block; box-sizing: border-box; width: 100%; height: auto; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; overflow: hidden; } html body #asProfile .pp-overview .pp-gifts-card .gifts-items > .gift img { position: absolute; inset: 0; display: block; box-sizing: border-box; width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; margin: 0 !important; padding: 6px; object-fit: contain; object-position: center; } @media (max-width: 767px) { /* Preserve the comment DOM and handlers; let its content span the whole card. */ html body #asProfile #comments .comment.pwr-comment-card { display: grid; grid-template-columns: 50px minmax(0, 1fr) !important; grid-template-rows: auto auto auto; gap: 10px 12px; padding: 12px; margin-bottom: 12px; } html body #asProfile #comments .pwr-comment-card::before, html body #asProfile #comments .pwr-comment-card > .news-comment-footer::before { content: none; display: none; } html body #asProfile #comments .pwr-comment-card > .pwr-avatar { grid-column: 1; grid-row: 1; margin: 0; align-self: start; } html body #asProfile #comments .pwr-comment-card > .news-comment-content { display: contents; } html body #asProfile #comments .pwr-comment-card .info { grid-column: 2; grid-row: 1; position: relative; display: block; min-width: 0; height: auto; min-height: 50px; padding: 0 22px 0 0; } html body #asProfile #comments .pwr-comment-card .info .author { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; float: none; width: auto; min-width: 0; max-width: none; height: auto; min-height: 20px; margin: 0; line-height: 1.4; } html body #asProfile #comments .pwr-comment-card .author > a { max-width: 100%; height: auto; line-height: inherit; white-space: normal; overflow-wrap: anywhere; } html body #asProfile #comments .pwr-comment-card .news-user-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; line-height: 1; } html body #asProfile #comments .pwr-comment-card .info .date { display: block; position: static; float: none; clear: none; width: auto; height: auto; margin: 3px 0 0; padding: 0; font-size: 12px; line-height: 1.4; white-space: normal; } html body #asProfile #comments .pwr-comment-card .info .dell_message { position: absolute; top: 0; right: 0; margin: 0; } html body #asProfile #comments .pwr-comment-card .news-comment-content > .with_code { grid-column: 1 / -1; grid-row: 2; min-width: 0; padding: 0; margin: 0; overflow-wrap: anywhere; } html body #asProfile #comments .pwr-comment-card .with_code > :first-child { margin-top: 0; } html body #asProfile #comments .pwr-comment-card .with_code > :last-child { margin-bottom: 0; } html body #asProfile #comments .pwr-comment-card .with_code :is(img, video, iframe) { max-width: 100%; } html body #asProfile #comments .pwr-comment-card .with_code img { height: auto; } html body #asProfile #comments .pwr-comment-card .with_code :is(pre, table) { max-width: 100%; overflow-x: auto; } html body #asProfile #comments .pwr-comment-card > .news-comment-footer { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; margin: 0; border-top: 1px solid var(--pf-border); } html body #asProfile #comments .pwr-comment-card .news-comment-tools { display: flex; flex: 0 0 auto; justify-content: flex-start; gap: 6px; } html body #asProfile #comments .pwr-comment-card .news-comment-tools .news-add-reaction { width: 36px; height: 36px; margin: 0; } html body #asProfile #comments .pwr-comment-card .news-comment-footer > .fr-post { flex: 1 1 120px; min-width: 0; padding: 0; } } /* Uploaded covers stay behind the complete header, including on phones. Keep artwork/contrast outside the site's automatic palette rewriting. */ @supports (--private-theme-static: 1) { @media (max-width: 767px) { html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: inherit; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover > .pp-cover-media { width: 100%; height: 100%; object-fit: cover !important; object-position: center !important; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover::after { content: "" !important; display: block !important; opacity: 1 !important; background: linear-gradient(180deg, rgba(8,13,20,.34), rgba(8,13,20,.62)) !important; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-hero-main { --pp-hero-text: #f7f9fc; --pp-hero-muted: #e2e7ed; position: relative; z-index: 1; background: transparent !important; } } } /* profile-cover-full-20261019-v47 */ /* Use the entire image across the entire header at every screen size. Independent width/height scaling intentionally follows the header's proportions. */ @supports (--private-theme-static: 1) { html body #asProfile .pp-hero-overlay.pp-custom-cover { display: flex; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: inherit; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover > .pp-cover-media { position: absolute !important; inset: 0 !important; display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0; padding: 0; object-fit: fill !important; object-position: center !important; } html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-hero-main { position: relative; z-index: 1; margin: 0; background: transparent !important; } } /* profile-visitors-grid-20261017-v43 */ /* Six equal visitor columns fill the existing card without changing its width. */ #asProfile .pp-side-column .pp-visitors-card #users_visit { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; padding: 4px 0; min-width: 0; } #asProfile .pp-side-column .pp-visitors-card #users_visit .user_visit { display: block; box-sizing: border-box; width: 100%; height: auto; min-width: 0; aspect-ratio: 1; margin: 0; padding: 0; } #asProfile .pp-side-column .pp-visitors-card #users_visit .user_visit > img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; } #asProfile .pp-side-column .pp-visitors-card #users_visit > .empty-element { grid-column: 1 / -1; } /* profile-gifts-compact-20261016-v42 */ /* Compact gift history and picker; purchase confirmation keeps its own layout. */ html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact.modal { padding: 16px !important; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-dialog { width: 100% !important; max-width: 920px !important; margin: 0 auto !important; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-content { display: flex; flex-direction: column; padding: 16px !important; max-height: min(700px,calc(100vh - 32px)); max-height: min(700px,calc(100dvh - 32px)); overflow: hidden !important; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-header { gap: 12px; padding: 0 0 10px !important; margin: 0 0 12px !important; align-items: center; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-title { min-width: 0; height: auto !important; font-size: 16px !important; font-weight: 700; line-height: 1.4 !important; white-space: normal; overflow-wrap: anywhere; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .close2 { flex: 0 0 32px; width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 22px !important; } html body:has(#asProfile) #userGifts.pp-gifts-compact .userGifts, html body:has(#asProfile) #exampleModal.pp-gifts-compact .modal-body { min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 4px 0 0 !important; } html body:has(#asProfile) #userGifts.pp-gifts-compact .userGifts { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 10px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .userGift { display: grid !important; grid-template-columns: 72px minmax(0,1fr); grid-column: auto !important; align-items: center; align-content: start; width: auto !important; max-width: none !important; min-width: 0; margin: 0; padding: 10px; gap: 8px 10px; border-radius: 10px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .giftPicture { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; margin: 0; } html body:has(#asProfile) #userGifts.pp-gifts-compact .giftPicture img { display: block; width: 72px !important; height: 72px !important; padding: 0; object-fit: contain; border-radius: 8px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo { grid-column: 2; grid-row: 1; flex-wrap: nowrap; align-items: flex-start; gap: 7px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo > img, html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo > a > img { width: 28px; height: 28px; flex: 0 0 28px; object-fit: cover; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo > a:has(> img) { flex: 0 0 28px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .sendAuthor { font-size: 13px; line-height: 1.35; } html body:has(#asProfile) #userGifts.pp-gifts-compact .sendDate { font-size: 11px; line-height: 1.4; padding-top: 3px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .giftMessage { grid-column: 1 / -1; text-align: left; font-size: 13px; line-height: 1.45; padding: 0; margin: 0; } html body:has(#asProfile) #userGifts.pp-gifts-compact .giftMessage:empty { display: none; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .gifts-row { margin: 0; gap: 6px; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .category-name { margin: 0; padding: 0; font-size: 13px; line-height: 1.5; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .gifts-items-container { display: block; min-width: 0; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .manyElements::after { display: none; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .gifts-items { display: grid; grid-template-columns: repeat(auto-fill,minmax(112px,1fr)); gap: 8px; padding: 0; overflow: visible; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .gift { display: flex; align-items: center; min-width: 0; width: auto; padding: 4px 0 0; border-radius: 9px !important; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .gift img { display: block; width: 96px; height: 96px; max-width: 100%; padding: 0; border-radius: 6px; object-fit: contain; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .price-overlay { position: static !important; width: 100%; height: 28px; min-height: 28px; font-size: 13px; line-height: 28px; text-align: center; opacity: 1; transform: none; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .modal-body hr { margin: 12px 0; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-control { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; margin: 0 0 12px; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-control label { margin: 0; font-size: 13px; font-weight: 600; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-control select { flex: 1; min-width: 0; max-width: 280px; height: 34px !important; min-height: 34px !important; padding: 4px 30px 4px 10px !important; font-size: 13px !important; } html body:has(#asProfile) #exampleModal.pp-gifts-compact.pp-gift-categories-ready .gifts-row[hidden], html body:has(#asProfile) #exampleModal.pp-gifts-compact.pp-gift-categories-ready .category-name, html body:has(#asProfile) #exampleModal.pp-gifts-compact.pp-gift-categories-ready .gifts-buyList > hr { display: none !important; } @media (max-width: 760px) { html body:has(#asProfile) #userGifts.pp-gifts-compact .userGifts { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 520px) { html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact.modal { padding: 10px !important; } html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-content { padding: 12px !important; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); } html body:has(#asProfile) #userGifts.pp-gifts-compact .userGifts { grid-template-columns: minmax(0,1fr); gap: 8px; } } /* Category control is aligned independently of the site's global form styles. */ html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-control { align-items: center !important; gap: 10px; margin: 0 0 14px !important; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-control label { display: flex !important; align-items: center !important; flex: 0 0 auto; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; line-height: 20px !important; font-size: 14px !important; transform: none !important; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-trigger { display: flex !important; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 340px; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--pf-border) !important; border-radius: 9px !important; background-color: var(--pf-panel) !important; background-image: var(--pf-fill) !important; color: var(--pf-text) !important; -webkit-text-fill-color: var(--pf-text) !important; font-family: inherit; font-weight: 500; font-size: 14px !important; line-height: 20px !important; text-align: left; box-shadow: inset 0 1px 0 #ffffff18,0 2px 5px var(--pf-shadow) !important; cursor: pointer; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-trigger:is(:focus-visible,[aria-expanded="true"]) { outline: 2px solid var(--pf-accent); outline-offset: 2px; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-count { flex: 0 0 auto; min-width: 24px; padding: 0 5px; border: 1px solid var(--pf-border); border-radius: 5px; color: var(--pf-muted); font-size: 11px; line-height: 18px; text-align: center; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-arrow { flex: 0 0 7px; width: 7px; height: 7px; margin: -4px 2px 0 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-menu { position: fixed; z-index: 3; display: flex; flex-direction: column; box-sizing: border-box; padding: 6px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--pf-border); border-radius: 10px; background-color: var(--pf-panel); background-image: var(--pf-fill); color: var(--pf-text); box-shadow: 0 8px 24px var(--pf-shadow); pointer-events: auto; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-menu[hidden] { display: none !important; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-option { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 6px; font-size: 14px; line-height: 22px; cursor: pointer; } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-option:is(:hover,.is-active) { background: color-mix(in srgb,var(--pf-text) 10%,transparent); } html body:has(#asProfile) #exampleModal.pp-gifts-compact .pp-gift-category-option[aria-selected="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--pf-accent); } /* Recipient artwork uses the same server-rendered values as the profile header. */ html body:has(#asProfile) :is(#userGifts,#exampleModal).pp-gifts-compact .modal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; overflow: visible; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient-avatar { position: relative; display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; padding: 3px; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient-avatar > img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient-avatar > .pp-gift-recipient-frame { position: absolute; inset: 0; width: 36px; height: 36px; object-fit: contain; border-radius: 0; pointer-events: none; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient-name { min-width: 0; overflow-wrap: anywhere; -webkit-text-fill-color: currentColor !important; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient-name[style*="text-fill-color"] { -webkit-text-fill-color: transparent !important; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient .userBadges { display: inline-flex; align-items: center; gap: 4px; } html body:has(#asProfile) .pp-gifts-compact .pp-gift-recipient .userBadges img { width: 20px !important; height: 20px !important; max-width: none; object-fit: contain; border-radius: 0; margin: 0; padding: 0; } /* Three complete gifts in the sidebar. The full history remains under “Все”. */ html body #asProfile .pp-gifts-card .gifts-items { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; padding: 0 !important; overflow: visible !important; } html body #asProfile .pp-gifts-card .gifts-items > .gift { min-width: 0; width: 100%; box-sizing: border-box; } html body #asProfile .pp-gifts-card .gifts-items > .gift:nth-child(n+4) { display: none !important; } html body #asProfile .pp-gifts-card .gifts-items > .gift img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; box-sizing: border-box; padding: 5px; object-fit: contain; } html body #asProfile .pp-gifts-card .emptyGifts { grid-column: 1 / -1; } /* profile-gift-senders-20261019-v48 */ html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo.pp-gift-sender-ready { align-items: center; min-width: 0; gap: 8px; overflow: visible; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo .additionalInfo { min-width: 0; flex: 1; } html body:has(#asProfile) #userGifts.pp-gifts-compact .pp-gift-sender-avatar { position: relative; display: block; flex: 0 0 32px !important; width: 32px; height: 32px; margin: 4px; overflow: visible; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo img.pp-gift-sender-image { display: block; width: 32px !important; height: 32px !important; max-width: none; margin: 0; padding: 0; border-radius: 50%; object-fit: cover; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo img.pp-gift-sender-frame { position: absolute !important; inset: -4px !important; display: block; width: 40px !important; height: 40px !important; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0 !important; object-fit: contain; pointer-events: none; } html body:has(#asProfile) #userGifts.pp-gifts-compact .pp-gift-sender-ready .sendAuthor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; min-width: 0; max-width: 100%; height: auto; padding: 0; overflow: visible; white-space: normal; text-decoration: none; } html body:has(#asProfile) #userGifts.pp-gifts-compact .pp-gift-sender-name { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } html body:has(#asProfile) #userGifts.pp-gifts-compact .pp-gift-sender-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; } html body:has(#asProfile) #userGifts.pp-gifts-compact .senderInfo img.pp-gift-sender-badge { display: block; width: 16px !important; height: 16px !important; max-width: 16px; margin: 0; padding: 0; border: 0; border-radius: 0 !important; object-fit: contain; } html body:has(#asProfile) #userGifts.pp-gifts-compact .pp-gift-sender-ready .sendDate { white-space: normal; overflow-wrap: anywhere; }