/* Profile revamp — scoped to .acct */
.acct{--acct-hue:#6488ff;--acct-hue-2:#9db1ff;--acct-card:color-mix(in srgb,var(--surface-raised) 82%,transparent);--acct-line:color-mix(in srgb,var(--outline) 70%,transparent)}
.acct .account-inner{width:min(980px,100%);padding:22px 20px 72px}

.acct-hero{position:relative;overflow:hidden;margin-bottom:16px;padding:26px 24px 18px;border:1px solid color-mix(in srgb,var(--acct-hue) 35%,var(--outline));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--acct-hue) 22%,var(--surface-raised)),var(--surface-raised) 55%,color-mix(in srgb,var(--acct-hue-2) 12%,var(--surface-raised)));box-shadow:0 18px 40px -26px color-mix(in srgb,var(--acct-hue) 70%,transparent)}
.acct-hero-glow{position:absolute;inset:-40% -10% auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acct-hue) 40%,transparent),transparent 65%);filter:blur(10px);pointer-events:none;animation:acct-drift 14s ease-in-out infinite alternate}
@keyframes acct-drift{to{transform:translate(-60px,40px) scale(1.15)}}
.acct-hero-main{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.acct-avatar{width:84px;height:84px;flex:none;border-radius:22px;object-fit:cover;background:var(--site-bg);box-shadow:0 0 0 3px var(--surface-raised),0 0 0 5px var(--acct-hue),0 10px 24px -8px color-mix(in srgb,var(--acct-hue) 80%,transparent)}
.acct-who{flex:1;min-width:200px}
.acct .account-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acct .account-name-line h1{margin:0;color:var(--prose);font:800 clamp(26px,4.4vw,38px)/1.05 var(--font-ui);letter-spacing:.01em;text-transform:none}
.acct-who>p{margin:6px 0 0;color:var(--prose-3);font-size:12px}
.acct-social{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.acct-social span{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--site-bg) 60%,transparent);border:1px solid var(--acct-line);color:var(--prose-2);font-size:12px}
.acct-social b{color:var(--prose);font-weight:800}
.acct-hero-links{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;margin-left:auto}
.acct-btn,.acct .account-settings-link{display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 13px;border:1px solid var(--acct-line);border-radius:10px;background:color-mix(in srgb,var(--site-bg) 55%,transparent);color:var(--prose);font:700 13px var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.acct-btn:hover:not(:disabled):not(.is-static),.acct .account-settings-link:hover{border-color:var(--acct-hue);background:color-mix(in srgb,var(--acct-hue) 18%,var(--site-bg));transform:translateY(-1px)}
.acct-btn:disabled{opacity:.6;cursor:wait}.acct-btn.is-static{cursor:default;color:var(--prose-2)}
.acct-hero-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--acct-line)}
.acct-hero-actions:empty{display:none}

.acct-panel{margin:0 0 14px;padding:18px;border:1px solid var(--acct-line);border-radius:16px;background:var(--acct-card)}
.acct details.profile-admin{padding:12px 16px}
.acct details.profile-admin>summary{cursor:pointer;color:var(--prose-2);font-weight:800;font-size:13px}
.acct details.profile-admin[open]>summary{margin-bottom:12px}

.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.acct-stats>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;border:1px solid var(--acct-line);border-radius:14px;background:var(--acct-card)}
.acct-stats span{color:var(--prose-3);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.acct-stats strong{overflow:hidden;color:var(--prose);font:800 22px/1.1 var(--font-ui);text-overflow:ellipsis;white-space:nowrap}
.acct-stats small{color:var(--prose-3);font-size:11px}
.acct-stats>.is-main{border-color:color-mix(in srgb,var(--acct-hue) 45%,var(--outline));background:linear-gradient(160deg,color-mix(in srgb,var(--acct-hue) 20%,var(--surface-raised)),var(--surface-raised))}
.acct-stats>.is-main strong{color:color-mix(in srgb,var(--acct-hue) 55%,var(--prose))}
.acct .account-elo{margin:0;font-size:inherit}

.acct-tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;margin:0 0 14px;padding:5px;overflow-x:auto;border:1px solid var(--acct-line);border-radius:14px;background:color-mix(in srgb,var(--site-bg) 85%,transparent);backdrop-filter:blur(10px);scrollbar-width:none}
.acct-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:0;border-radius:10px;background:transparent;color:var(--prose-2);font:700 13px var(--font-ui);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.acct-tabs button:hover{color:var(--prose);background:var(--surface-raised)}
.acct-tabs button[aria-selected=true]{color:var(--prose);background:color-mix(in srgb,var(--acct-hue) 24%,var(--surface-raised));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acct-hue) 50%,transparent)}
.acct-tabs small{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--site-bg) 70%,transparent);color:var(--prose-3);font-size:11px;font-weight:800}
.acct-pane{animation:acct-in .22s ease-out}
@keyframes acct-in{from{opacity:0;transform:translateY(6px)}}

.acct .account-section{margin:0 0 14px}
.acct .account-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.acct .account-section-heading h2{margin:0;font:800 16px var(--font-ui);color:var(--prose)}
.acct .account-section-heading>span{color:var(--prose-3);font-size:12px}

.acct .account-badge-groups{display:flex;flex-direction:column;gap:12px}
.acct-badge-group{--tier:var(--prose-3);padding:12px 12px 12px 14px;border:1px solid var(--acct-line);border-left:3px solid var(--tier);border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--tier) 9%,transparent),transparent 60%)}
.acct-badge-group h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--tier);font:800 12px var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
.acct-badge-group h3 small{padding:1px 7px;border-radius:999px;background:var(--site-bg);color:var(--prose-2);font-size:11px;letter-spacing:0}
.acct-badge-group .account-badges{margin:0}

.acct-settings>h2{margin:0 0 14px;font:800 20px var(--font-ui)}
.acct .account-danger{border-radius:16px}

@media (max-width:640px){
  .acct .account-inner{padding:12px 10px 60px}
  .acct-hero{padding:18px 16px 14px;border-radius:16px}
  .acct-avatar{width:64px;height:64px;border-radius:18px}
  .acct-hero-links{margin-left:0;width:100%}
  .acct-stats{grid-template-columns:repeat(2,1fr)}
  .acct-stats>.is-main{grid-column:1/-1}
  .acct-tabs button{flex:none}
}

/* Polish pass */
.acct-btn.is-gift{border-color:color-mix(in srgb,#f59e0b 55%,transparent);background:color-mix(in srgb,#f59e0b 16%,var(--site-bg))}
.acct-tabs button svg{opacity:.75}.acct-tabs button[aria-selected=true] svg{opacity:1;color:var(--acct-hue)}
.acct-panel{box-shadow:0 1px 0 color-mix(in srgb,#fff 5%,transparent) inset,0 10px 30px -22px rgba(0,0,0,.5)}
.acct .account-section-heading h2{display:flex;align-items:center;gap:8px}
.acct .account-section-heading h2::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(var(--acct-hue),var(--acct-hue-2))}

/* Valuable entries: cards keep their natural width */
.acct .account-valuable{padding:18px;border:1px solid var(--acct-line);border-radius:16px;background:var(--acct-card)}
.acct .account-valuable-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.acct .account-valuable-row{grid-template-columns:auto max-content 1fr;gap:10px;padding:8px 12px;border-color:var(--acct-line);background:color-mix(in srgb,var(--site-bg) 50%,transparent);transition:border-color .15s,transform .15s}
.acct .account-valuable-row:hover{border-color:var(--acct-hue);transform:translateY(-1px)}
.acct .account-valuable-row>b{min-width:38px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--acct-hue) 18%,transparent);color:var(--prose);font-size:12px;text-align:center}
.acct .account-valuable-row>:nth-child(2){width:max-content!important;max-width:100%;justify-self:start;min-width:0}
.acct .account-valuable-row>span{justify-self:end;font-size:12px}
.acct .account-valuable-tabs button[aria-selected=true]{border-color:var(--acct-hue);background:color-mix(in srgb,var(--acct-hue) 18%,var(--surface-raised))}

/* Top 3 */
.acct .account-top-three{gap:12px}
.acct .account-top-slot{border-radius:14px;transition:transform .2s}
.acct .account-top-slot:hover{transform:translateY(-3px)}

/* Minigames */
.acct .account-mini-scores{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.acct .account-mini-scores>div{position:relative;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto auto;column-gap:10px;row-gap:1px;align-items:center;padding:11px 12px;border-radius:13px;border-color:var(--acct-line);background:color-mix(in srgb,var(--site-bg) 45%,transparent);transition:transform .15s,border-color .15s}
.acct .account-mini-scores>div:hover{transform:translateY(-2px);border-color:var(--outline-strong)}
.acct .acct-mini-icon{grid-row:1/4}
.acct .account-mini-scores span{font-size:11.5px;font-weight:700;color:var(--prose-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .account-mini-scores strong{font:800 16px var(--font-ui)}
.acct .account-mini-scores small{font-size:10.5px}

/* Recent rolls */
.acct .account-rolls{gap:7px}
.acct .account-roll{border-radius:12px;border-color:var(--acct-line);background:color-mix(in srgb,var(--site-bg) 45%,transparent);transition:border-color .15s}
.acct .account-roll:hover{border-color:var(--outline-strong)}
.acct .account-roll-meta strong{color:color-mix(in srgb,var(--acct-hue) 45%,var(--prose))}
.acct .account-load-more,.acct .account-games-more{border-radius:10px;border-color:var(--acct-line);background:color-mix(in srgb,var(--site-bg) 50%,transparent)}
.acct .account-load-more:hover,.acct .account-games-more:hover{border-color:var(--acct-hue)}

/* Badges */
.acct .account-badge-entry small{opacity:.8}
.acct-badge-group{transition:border-color .15s}

.practice-icon{margin-bottom:4px;border-radius:8px;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.mini-icon{border-radius:25%}

/* profile description (profile-bio.jsx) */
.acct-bio{position:relative;max-width:520px;margin:6px 0 4px;padding-right:26px}
.acct-bio p{margin:0;font-size:14px;line-height:1.45;color:var(--prose-2);white-space:pre-wrap;overflow-wrap:anywhere;text-transform:none}
.acct-bio-edit{position:absolute;right:0;top:0;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--prose-3);cursor:pointer;opacity:.6}
.acct-bio:hover .acct-bio-edit,.acct-bio-edit:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.acct-bio-add{margin:6px 0 4px;padding:0;border:0;background:none;color:var(--prose-3);font:inherit;font-size:13px;cursor:pointer;text-transform:none}
.acct-bio-add:hover{color:var(--prose)}
.acct-bio.is-editing{padding-right:0;width:min(520px,100%)}
.acct-bio textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:64px;padding:8px 10px;border-radius:10px;border:1px solid var(--outline);background:var(--surface-dim,transparent);color:var(--prose);font:inherit;font-size:14px;line-height:1.4;text-transform:none}
.acct-bio-bar{display:flex;align-items:center;gap:8px;margin-top:6px}
.acct-bio-bar small{margin-right:auto;font-size:11px;color:var(--prose-3)}
.acct-bio-bar .acct-bio-error{color:#ff6b6b}
.acct-bio-bar small+.acct-bio-error{margin-right:auto}


/* ---- Profile look -------------------------------------------------------------
   One header: who (name, title, date, description, friends · subscribers · EP)
   and one row of actions with line icons. Your own profile has a single
   Settings button; the title picker moved to Settings. Settings is its own page:
   a section menu and cards (Profile, Appearance, Game & notifications, Account data). */
.acct .acct-icon{display:block;width:16px;height:16px;flex:none}
.acct-hero-main{align-items:flex-start}
.acct .account-name-line{row-gap:6px}
.acct-meta{margin:5px 0 0;color:var(--prose-3);font-size:12.5px;text-transform:none}
.acct-add-title{padding:2px 9px;border:1px dashed var(--acct-line);border-radius:999px;color:var(--prose-3);font:600 11.5px/1.5 var(--font-ui);text-decoration:none;text-transform:none;transition:color .15s,border-color .15s}
.acct-add-title:hover{color:var(--prose);border-color:var(--acct-hue)}
.acct-social{gap:2px 14px;margin-top:8px;color:var(--prose-3);font-size:12.5px;text-transform:none}
.acct-social span{padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit}
.acct-social b{color:var(--prose);font-weight:750}
.acct-actions{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--acct-line)}
.acct-actions:empty{display:none}
.acct-actions-more{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.acct-hero>.acct-actions:has(>a.acct-btn:only-child){position:absolute;top:20px;right:20px;margin:0;padding:0;border:0}
.acct-btn,.acct-actions .subscribe-control>button,.acct-actions .community-button,.acct-actions .account-watch{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;margin:0;padding:0 14px;border:1px solid var(--acct-line);border-radius:10px;background:color-mix(in srgb,var(--site-bg) 55%,transparent);color:var(--prose);font:650 13px/1 var(--font-ui);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.acct-btn:hover:not(:disabled):not(.is-static),.acct-actions .subscribe-control>button:hover:not(:disabled),.acct-actions .community-button:hover,.acct-actions .account-watch:hover{transform:none;border-color:var(--acct-hue);background:color-mix(in srgb,var(--acct-hue) 16%,var(--site-bg));color:var(--prose)}
.acct-btn.is-primary{border-color:transparent;background:var(--acct-hue);color:#11131a}
.acct-btn.is-primary:hover:not(:disabled){background:color-mix(in srgb,var(--acct-hue) 85%,#fff);color:#11131a}
.acct-btn.is-static{color:var(--prose-2)}
.acct-btn.is-gift{border-color:color-mix(in srgb,#f59e0b 45%,var(--acct-line));background:color-mix(in srgb,#f59e0b 12%,var(--site-bg))}
.acct-btn.is-gift .acct-icon{color:#f5b84a}
.acct-actions .subscribe-control>button[aria-pressed=true]{color:#79d4b8}
.acct-actions .subscribe-control small{margin-top:4px}
.acct-actions .account-watch i{width:7px;height:7px;border-radius:50%;background:var(--prose-3)}
.acct-actions .account-watch.is-live i{background:#ef4444;box-shadow:0 0 0 3px #ef444433}
.acct-btn:focus-visible,.acct-actions button:focus-visible,.acct-actions a:focus-visible,.acct-settings-nav button:focus-visible,.acct-back:focus-visible{outline:2px solid var(--prose);outline-offset:2px}
.acct-stats{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.acct-stats strong{font-size:clamp(17px,2vw,22px);font-variant-numeric:tabular-nums}
/* Top 3 rolls: rank top left, heart (and replay) top right. */
.acct .account-top-slot{position:relative}
.acct .account-top-slot>:first-child:not(small):not(button){position:absolute;top:8px;right:10px;z-index:6}
.acct .account-top-slot:has(>.account-top-replay)>:first-child:not(small):not(button){right:42px}
.acct .account-top-slot>small{margin-bottom:8px;color:var(--prose-2);font:700 12px/1.4 var(--font-ui)}

/* Settings page */
.acct-settings{text-transform:none}
.acct-settings-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-bottom:18px}
.acct-back{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:1px solid var(--outline);border-radius:999px;color:var(--prose-2);font:600 13px/1 var(--font-ui);text-decoration:none;transition:background-color .15s,color .15s}
.acct-back:hover{background:var(--surface-raised);color:var(--prose)}
.acct-settings-title{display:flex;align-items:center;gap:12px;min-width:0}
.acct-settings-title img{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--surface-raised);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--acct-hue)}
.acct-settings-title h1{margin:0;color:var(--prose);font:800 24px/1.1 var(--font-ui);text-transform:none}
.acct-settings-title p{margin:3px 0 0;color:var(--prose-3);font-size:12.5px}
.acct-settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start;gap:20px}
.acct-settings-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--outline-subtle);border-radius:14px;background:var(--surface)}
.acct-settings-nav button{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--prose-2);font:600 13.5px/1.2 var(--font-ui);text-align:left;text-transform:none;cursor:pointer;transition:background-color .15s,color .15s}
.acct-settings-nav button:hover{background:var(--surface-raised);color:var(--prose)}
.acct-settings-nav button .acct-icon{color:var(--prose-3)}
.acct-settings-body{display:grid;gap:16px;min-width:0}
.acct-set-card{scroll-margin-top:16px;padding:18px 20px 20px;border:1px solid var(--outline);border-radius:16px;background:var(--surface)}
.acct-set-card>header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.acct-set-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--acct-hue) 14%,var(--surface-raised));color:var(--acct-hue)}
.acct-set-card h2{margin:0;color:var(--prose);font:750 16px/1.3 var(--font-ui);letter-spacing:0;text-transform:none}
.acct-set-card>header p{max-width:62ch;margin:3px 0 0;color:var(--prose-3);font-size:12.5px;line-height:1.5}
.acct-set-card.is-danger{border-color:color-mix(in srgb,#ef4444 40%,var(--outline))}
.acct-set-card.is-danger .acct-set-icon{background:color-mix(in srgb,#ef4444 14%,var(--surface-raised));color:#ef7777}
.acct-field{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);align-items:start;gap:8px 20px;padding:14px 0;border-top:1px solid var(--outline-subtle)}
.acct-set-body>.acct-field:first-child{padding-top:4px;border-top:0}
.acct-field-label b{display:block;color:var(--prose);font-size:13.5px;font-weight:650}
.acct-field-label small{display:block;margin-top:3px;color:var(--prose-3);font-size:12px;line-height:1.45}
.acct-field-control{min-width:0}
#settings-appearance h3{display:none}
.acct-field-control .acct-bio{margin:0}
.acct-field-control .acct-bio-add{margin:6px 0 0}
.acct-field-control .title-picker-custom>.title-picker-label{display:none}

@media (max-width:760px){
  .acct-settings-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .acct-settings-nav{top:0;z-index:4;flex-direction:row;overflow-x:auto;scrollbar-width:none;border-radius:12px}
  .acct-settings-nav::-webkit-scrollbar{display:none}
  .acct-settings-nav button{flex:none;padding:8px 11px;font-size:13px}
  .acct-set-card{scroll-margin-top:62px}
  .acct-field{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .acct-hero>.acct-actions:has(>a.acct-btn:only-child){position:static;margin-top:14px;padding-top:12px;border-top:1px solid var(--acct-line)}
  .acct-actions-more{margin-left:0}
  .acct-actions-more .acct-btn{width:38px;padding:0}
  .acct-actions-more .acct-btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .acct-btn,.acct-actions .subscribe-control>button,.acct-actions .community-button,.acct-actions .account-watch{height:34px;padding:0 12px;font-size:12.5px}
  .acct-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acct-set-card{padding:16px 14px 18px;border-radius:14px}
  .acct-settings-title h1{font-size:21px}
}

/* ---- Badge collection -------------------------------------------------------
   Search, rarity chips with counts, Rarest / A–Z; tiles grouped by rarity (a
   coloured dot and count per group), bigger tiles from Mythic up. A tile opens
   the badge's details. */
.badge-collection .account-section-heading{margin-bottom:12px}
.bc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px}
.bc-search{display:flex;align-items:center;gap:7px;flex:1 1 220px;max-width:340px;height:36px;padding:0 12px;border:1px solid rgb(255 255 255/.1);border-radius:10px;background:rgb(0 0 0/.2);color:var(--prose-3)}
.bc-search:focus-within{border-color:var(--glass-color,var(--acct-hue));color:var(--prose-2)}
.bc-search input{flex:1;min-width:0;border:0;background:none;color:var(--prose);font:500 13.5px var(--font-ui);text-transform:none;outline:none}
.bc-order{display:inline-flex;gap:2px;padding:3px;border:1px solid rgb(255 255 255/.1);border-radius:999px}
.bc-order button{padding:5px 12px;border-radius:999px;color:var(--prose-3);font:600 12px/1.3 var(--font-ui);text-transform:none;cursor:pointer}
.bc-order button[aria-pressed=true]{background:rgb(255 255 255/.1);color:var(--prose)}
.bc-tiers{display:flex;gap:6px;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.bc-tiers::-webkit-scrollbar{display:none}
.bc-tiers button{display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 11px;border:1px solid rgb(255 255 255/.09);border-radius:999px;background:rgb(255 255 255/.04);color:var(--prose-2);font:600 12px/1 var(--font-ui);text-transform:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.bc-tiers button:hover{background:rgb(255 255 255/.08)}
.bc-tiers button[aria-pressed=true]{border-color:color-mix(in srgb,var(--tier,var(--prose)) 60%,transparent);background:color-mix(in srgb,var(--tier,#fff) 16%,transparent);color:var(--prose)}
.bc-tiers small,.bc-group h3 small{color:var(--prose-3);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.bc-tiers i,.bc-group h3 i{width:8px;height:8px;border-radius:50%;background:var(--tier);box-shadow:0 0 8px var(--tier)}
.bc-group+.bc-group{margin-top:16px}
.bc-group h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--prose);font:700 13px/1.3 var(--font-ui);letter-spacing:.02em;text-transform:none}
.bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.bc-tile{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:9px;min-height:48px;padding:7px 10px;border:1px solid rgb(255 255 255/.07);border-radius:11px;background:linear-gradient(90deg,color-mix(in srgb,var(--tier) 9%,transparent),transparent 70%),rgb(0 0 0/.16);color:var(--prose);text-align:left;text-transform:none;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.bc-tile:hover{border-color:color-mix(in srgb,var(--tier) 45%,transparent);transform:translateY(-1px)}
.bc-tile:focus-visible{outline:2px solid var(--prose);outline-offset:2px}
.bc-emoji{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;font-size:19px;line-height:1}
.bc-name{overflow:hidden;font:650 12.5px/1.3 var(--font-ui);text-overflow:ellipsis;white-space:nowrap}
.bc-meta{display:flex;gap:6px;overflow:hidden;color:var(--prose-3);font:500 11px/1.3 var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-meta small{color:color-mix(in srgb,var(--tier) 70%,var(--prose));font-size:11px;font-weight:700}
.bc-grid.is-rare{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.bc-grid.is-rare .bc-tile{grid-template-columns:40px minmax(0,1fr);min-height:62px;padding:10px 12px;border-color:color-mix(in srgb,var(--tier) 35%,transparent);background:radial-gradient(120px 60px at 0 0,color-mix(in srgb,var(--tier) 22%,transparent),transparent),rgb(0 0 0/.2);box-shadow:inset 0 1px 0 rgb(255 255 255/.06)}
.bc-grid.is-rare .bc-emoji{width:40px;height:40px;font-size:26px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tier) 60%,transparent))}
.bc-grid.is-rare .bc-name{font-size:13.5px}
.bc-empty{margin:18px 0;color:var(--prose-3);font-size:13px;text-align:center}
@media (max-width:640px){
  .bc-search{max-width:none}
  .bc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .bc-grid.is-rare{grid-template-columns:minmax(0,1fr)}
}

/* ---- Settings page (settings-page.jsx) ---------------------------------------
   Every setting in a named card: one row per setting, its name and a sentence
   saying what it does on the left, the control on the right. */
.settings-page .setting-row{gap:20px;padding:13px 0;border-top:1px solid var(--outline-subtle);border-radius:0;color:var(--prose);font-size:14px;cursor:default}
.settings-page .setting-row:hover{background:none}
.settings-page .acct-set-body>:first-child .setting-row:first-child,.settings-page .acct-set-body>.setting-row:first-child,.settings-page .settings-slot>.setting-row:first-child{border-top:0;padding-top:4px}
.settings-page .setting-row>span:first-child{gap:3px;font-weight:600}
.settings-page .setting-row small{max-width:56ch;color:var(--prose-3);font-size:12.5px;font-weight:400;line-height:1.45}
.settings-page label.setting-row{cursor:pointer}
.settings-page .setting-select{max-width:none;padding:7px 10px;border-radius:10px;font-size:13px}
.settings-page .setting-sub{padding-top:6px}
.settings-page .setting-sub+.setting-sub{margin-top:6px;border-top:1px solid var(--outline-subtle)}
.settings-page .setting-sub>h4{margin:10px 0 0;color:var(--prose-3);font:700 11.5px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.settings-page .setting-sub>.setting-row:first-of-type{border-top:0}
.settings-page .setting-note{padding:4px 0;font-size:13px}
.settings-page .setting-row button{text-transform:none}
/* Every button in a row looks like the page's buttons (Manage, Sign out…). */
.settings-page .setting-button,.settings-page .shop-watch-add{height:36px;padding:0 14px;border:1px solid var(--acct-line);border-radius:10px;background:color-mix(in srgb,var(--site-bg) 55%,transparent);font:650 13px/1 var(--font-ui);transition:background-color .15s,border-color .15s}
.settings-page .setting-button:hover,.settings-page .shop-watch-add:hover{border-color:var(--acct-hue);background:color-mix(in srgb,var(--acct-hue) 18%,var(--site-bg))}
.settings-page .shop-watch-add[aria-expanded=true]{border-color:var(--prose);background:var(--prose);color:var(--site-bg)}
.settings-page .setting-button.is-danger{border-color:color-mix(in srgb,#ef4444 50%,transparent);background:color-mix(in srgb,#ef4444 14%,var(--site-bg));color:#fca5a5}
.settings-page .setting-button.is-danger:hover{border-color:#ef4444;background:color-mix(in srgb,#ef4444 26%,var(--site-bg))}
.settings-page .setting-wipe{flex-wrap:wrap}
.settings-page .setting-wipe>.account-confirm,.settings-page .setting-wipe>.account-error{flex:1 1 100%;margin:0}
.settings-page .music-volume input[type=range]{width:min(200px,45vw)}
.settings-slot:empty::before{content:"Loading\2026";color:var(--prose-3);font-size:13px}
.settings-links{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:12px;border-top:1px solid var(--outline-subtle)}
.settings-links a{color:var(--prose-2);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.settings-links a:hover{color:var(--prose)}
.settings-page .acct-settings-nav button[aria-current]{background:color-mix(in srgb,var(--acct-hue) 16%,var(--surface-raised));color:var(--prose)}
.settings-page .acct-settings-nav button[aria-current] .acct-icon{color:var(--acct-hue)}
.settings-page .acct-settings-nav button.is-account .acct-icon{color:#ef7777}
.settings-page .acct-settings-head .acct-btn{margin-left:auto}
@media (max-width:640px){.settings-page .setting-row{flex-wrap:wrap;gap:10px}.settings-page .setting-row>span:first-child{flex:1 1 220px}.settings-page .setting-row.setting-stack>span:first-child{flex:none}}

/* The theme picker's own music box: Theme music is in the Sound section here. */
.settings-page .interface-theme-picker .theme-music-toggle{display:none}
.settings-page .interface-theme-picker{margin:0;padding:0;border:0}

/* Banner at the top of the profile (beta, profile-media.jsx), like Discord: the
   picture sits on its lower edge. */
.acct-hero.has-banner{padding-top:150px}
.acct-hero-banner{position:absolute;top:0;left:0;right:0;height:190px;background:center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);pointer-events:none}
.acct-hero.has-banner .acct-hero-glow{display:none}
@media (max-width:640px){.acct-hero.has-banner{padding-top:110px}.acct-hero-banner{height:140px}}

/* Settings › Profile › Picture & banner (beta) */
.pm{display:grid;gap:0;width:100%;max-width:520px}
.pm-banner{position:relative;display:grid;place-items:center;aspect-ratio:3/1;border:1px solid var(--outline);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--acct-hue,#6488ff) 30%,var(--surface-raised)),var(--surface-raised)) center/cover no-repeat;overflow:hidden}
.pm-empty{color:var(--prose-3);font-size:13px;text-transform:none}
.pm-banner-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.pm-banner-actions .acct-btn{backdrop-filter:blur(6px);background:rgb(0 0 0/.55);color:#fff}
.pm-row{display:flex;align-items:flex-start;gap:14px;margin-top:-36px;padding:0 0 0 14px;position:relative}
.pm-avatar{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--site-bg);box-shadow:0 0 0 5px var(--surface,#16161a)}
.pm-side{display:grid;gap:6px;min-width:0;padding-top:46px}
.pm-buttons{display:flex;flex-wrap:wrap;gap:6px}
.pm-side small{color:var(--prose-3);font-size:11.5px;line-height:1.45;text-transform:none}
.pm .account-error{margin-top:10px}
@media (max-width:640px){.pm-row{flex-direction:column;padding-left:10px}.pm-side{padding-top:0}.pm-avatar{width:72px;height:72px}}
.pm-toggle{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:10px 12px;border:1px solid var(--outline);border-radius:12px;color:var(--prose);font-size:13px;cursor:pointer;text-transform:none}
.pm-toggle input{flex:none;width:34px;height:20px;margin:1px 0 0;appearance:none;-webkit-appearance:none;position:relative;border-radius:999px;background:#3a3a44;cursor:pointer;transition:background-color .15s}
.pm-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.pm-toggle input:checked{background:var(--glass-color,#6488ff)}
.pm-toggle input:checked::after{transform:translateX(14px)}
.pm-toggle span{display:grid;gap:2px;font-weight:600}
.pm-toggle small{color:var(--prose-3);font-size:11.5px;font-weight:400;line-height:1.4}

/* The banner as the profile's background (beta, profile-media.jsx): dimmed, in
   place of the colour backdrop. */
.acct-backdrop{position:fixed;top:var(--acct-top,0);bottom:var(--acct-bottom,0);left:0;right:0;z-index:-1;pointer-events:none;background:center/cover no-repeat}
.acct-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 20%,rgb(6 6 10/.66),rgb(6 6 10/.86))}
.acct.has-backdrop::before{display:none}
/* A profile with its own banner: the liquid glass turns clear (no frost, a
   faint sheen and its edges), so the banner and the background show through.
   It also means nothing behind the cards has to be refiltered while a GIF moves. */
:root .acct.is-media :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel),:root .acct.is-media :is(.acct-hero,.acct-stats>div,.acct-tabs,.acct-panel).has-lens{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--lg-sheen),linear-gradient(rgb(255 255 255/.035),rgb(255 255 255/.035))}
:root .acct.is-media.has-backdrop :is(.acct-hero,.acct-stats>div,.acct-panel){background:var(--lg-sheen),linear-gradient(rgb(8 8 12/.32),rgb(8 8 12/.32))}
:root .acct.is-media .acct-tabs,:root .acct.is-media .acct-tabs.has-lens{background:var(--lg-sheen),linear-gradient(rgb(10 10 14/.78),rgb(10 10 14/.78))}
.pm.is-simple .pm-row{margin-top:0;padding-left:0;align-items:center}
.pm.is-simple .pm-side{padding-top:0}
.pm.is-simple .pm-avatar{box-shadow:0 0 0 3px var(--outline)}