/* ───────── Maple ID · UI layer v4 ─────────
 * - no blue tap box, iOS-style press animation
 * - restyled QR sheet
 * - basic card: bigger profile picture, theme + glass compatible
 * - everything follows the theme variables (--accent, --accent-2, --maple-red)
 */

/* ===== no tap highlight / focus box on press ===== */
*{-webkit-tap-highlight-color:transparent}
a,button,.btn,.tile,.live,[role=button],[role=tab],.swatch,.tab,.layout-opt,summary{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;outline:none}
:focus:not(:focus-visible){outline:none!important}
button:focus,a:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-2,var(--accent));outline-offset:3px;border-radius:12px}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit}
input,textarea,select{-webkit-tap-highlight-color:transparent}

/* ===== iOS-style press: quick squeeze in, springy release ===== */
button,a[href],.btn,.tile,.live,[role=button],[role=tab],.swatch,.tab,.ptab,.layout-opt,label.toggle,summary,.qs-btn,.like,.love{
  transition:scale .5s cubic-bezier(.34,1.56,.64,1),filter .35s ease,background-color .25s,border-color .25s,color .25s,box-shadow .3s,transform .25s var(--ease,ease),opacity .2s;
  will-change:auto}
.is-pressed{scale:var(--ps,.955);filter:brightness(1.22) saturate(1.08);transition:scale .11s ease-out,filter .11s ease-out,background-color .11s,border-color .11s!important}
.tile.is-pressed,.support.is-pressed,.cta-card.is-pressed,.prod.is-pressed,.layout-opt.is-pressed,.swatch.is-pressed{--ps:.975}
.icon-pill.is-pressed,.love.is-pressed,.like.is-pressed,.tile-copy.is-pressed,.qty button.is-pressed,.x-btn.is-pressed,.qs-x.is-pressed{--ps:.88}
.reacts button.is-pressed,.reactions button.is-pressed,.chip.is-pressed{--ps:.92}
.btn:active{transform:none}
.is-pressed.tile,.is-pressed.live{transform:none}
/* list rows get a soft tint while pressed, like iOS table cells */
.tile.is-pressed,.live.is-pressed{background-image:linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent) 14%,transparent))}
@media (prefers-reduced-motion:reduce){.is-pressed{scale:1;filter:brightness(1.15)}}

/* ===== the leaf & theme everywhere ===== */
.brand .leaf-ico,.leaf-ico{transition:filter .4s}
body,.topbar,.btn,.panel{transition:background-color .4s,border-color .4s,color .3s}
.btn-accent{background:linear-gradient(135deg,var(--accent) 0%,color-mix(in oklab,var(--accent) 62%,var(--maple-red,var(--accent))) 100%);color:var(--on-accent,var(--bg-2))}
.nav-link[data-theme-follow]{color:var(--accent)}
.tab.active{color:var(--on-accent,var(--bg-2))}
.auth-tabs [aria-selected=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.keep{display:flex;align-items:center;gap:10px;margin:2px 0 14px;font-size:13.5px;color:var(--muted);cursor:pointer;width:fit-content}
.keep input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:transparent;display:grid;place-items:center;transition:background .25s,border-color .25s,scale .4s cubic-bezier(.34,1.56,.64,1);cursor:pointer;flex:none}
.keep input:checked{background:var(--accent);border-color:var(--accent)}
.keep input::after{content:"";width:6px;height:11px;border:solid var(--on-accent,var(--bg-2));border-width:0 2.2px 2.2px 0;transform:rotate(45deg) scale(0);margin-top:-2px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.keep input:checked::after{transform:rotate(45deg) scale(1)}
.keep input:active{scale:.88}
.keep:has(input:focus-visible) input{outline:2px solid var(--accent-2);outline-offset:2px}
.keep span{color:var(--text)}

/* ===== BASIC card: bigger avatar, centred identity, theme + glass aware ===== */
.card-page .idcard{--av:132px;padding:14px;border-radius:30px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel) 60%);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.card-page .idcard:before{display:none}
.card-page .idcard-banner{height:158px;border-radius:22px;border:0;background:linear-gradient(120deg,var(--accent),var(--accent-2) 60%,var(--maple-red,var(--accent)))}
.card-page .idcard-banner .foil{background:repeating-linear-gradient(0deg,#0003 0 1px,transparent 1px 3px),linear-gradient(to top,color-mix(in srgb,var(--panel) 96%,transparent),transparent 72%)}
.card-page .idcard-banner:after{display:none}
.card-page .idcard-body{padding:0 6px 4px}
.card-page .idcard-head{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:0;row-gap:0}
.card-page .avatar{width:var(--av);height:var(--av);margin-top:calc(var(--av) / -2 - 4px);padding:4px;
  background:var(--panel);box-shadow:0 16px 40px -16px var(--accent-glow,#0008),0 0 0 6px color-mix(in srgb,var(--panel) 80%,transparent)}
.card-page .avatar-inner{border-width:3px;border-color:var(--panel)}
.card-page .avatar span{font-size:44px}
.card-page .who{padding:14px 0 0;width:100%;text-align:center}
.card-page .who h1{font-size:clamp(25px,7.4vw,32px);letter-spacing:-.01em}
.card-page .who p{margin-top:8px;display:inline-block;padding:5px 13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent);letter-spacing:.14em}
.card-page .bio{text-align:center;margin-top:16px;color:var(--text);opacity:.82}

/* love + visits row: visits on the left, love on the right, same height */
.card-page .idcard-head .like{position:absolute;right:6px;top:14px;margin:0;grid-column:auto;grid-row:auto;
  background:color-mix(in srgb,var(--panel) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card-page .idcard-head .visits{position:absolute;left:6px;top:14px;display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--panel) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card-page .idcard-head .visits i{color:var(--accent-2)}
.card-page .idcard-head{position:relative}
.card-page .facts{grid-template-columns:1.5fr 1fr;border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.card-page .facts dd{overflow-wrap:anywhere}
.card-page .mrz{display:none}
.card-page .actions .btn{border-radius:16px;height:50px;background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.card-page .actions .btn-accent{background:linear-gradient(135deg,var(--accent),color-mix(in oklab,var(--accent) 62%,var(--maple-red,var(--accent))))}
.card-page .tile,.card-page .reactions button,.card-page .tile-copy{background:color-mix(in srgb,var(--accent) 5%,var(--panel));border-color:color-mix(in srgb,var(--accent) 16%,var(--line))}
.card-page .tile .ico{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.card-page .list h2{color:var(--muted)}
.card-page .support{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 16%,transparent),var(--panel) 62%) padding-box,conic-gradient(from var(--support-angle),var(--accent),transparent 30%,var(--accent-2) 50%,transparent 70%,var(--accent)) border-box}
.card-page .owner-bar{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.card-page .donate-btn,.widget-section .donate-btn{color:var(--on-accent,var(--bg-2))}
@media (width<=400px){.card-page .idcard{--av:118px}.card-page .idcard-head{grid-template-columns:1fr}}

/* basic card + Clear glass: the whole card, tiles, pills and buttons turn into frosted glass */
html[data-glass=on] .card-page .idcard,[data-glass=on] .card-page .idcard{
  background:linear-gradient(165deg,color-mix(in srgb,var(--ink) 7.1%,transparent),color-mix(in srgb,var(--ink) 2%,transparent))!important;border-color:color-mix(in srgb,var(--ink) 14.1%,transparent)!important;
  -webkit-backdrop-filter:blur(calc(var(--gb,14)*1px)) saturate(160%);backdrop-filter:blur(calc(var(--gb,14)*1px)) saturate(160%);
  box-shadow:0 34px 80px -40px #000,inset 0 1px 0 color-mix(in srgb,var(--ink) 10.2%,transparent)!important}
html[data-glass=on] .card-page .idcard-banner .foil{background:repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 3px),linear-gradient(to top,color-mix(in srgb,var(--bg) 40%,transparent),transparent 72%)}
html[data-glass=on] .card-page .avatar{background:color-mix(in srgb,var(--ink) 7.8%,transparent);box-shadow:0 16px 40px -16px var(--accent-glow),0 0 0 6px color-mix(in srgb,var(--ink) 6.3%,transparent)}
html[data-glass=on] .card-page .avatar-inner{border-color:color-mix(in srgb,var(--ink) 7.8%,transparent)}
html[data-glass=on] .card-page .tile,html[data-glass=on] .card-page .tile-copy,html[data-glass=on] .card-page .reactions button,
html[data-glass=on] .card-page .actions .btn:not(.btn-accent),html[data-glass=on] .card-page .like,html[data-glass=on] .card-page .visits,html[data-glass=on] .card-page .who p{
  background:linear-gradient(color-mix(in srgb,var(--ink) 6.3%,transparent),color-mix(in srgb,var(--ink) 2%,transparent))!important;border-color:color-mix(in srgb,var(--ink) 11%,transparent)!important;
  -webkit-backdrop-filter:blur(calc(var(--gb,14)*.6px));backdrop-filter:blur(calc(var(--gb,14)*.6px))}
html[data-glass=on] .card-page .support{background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--ink) 2.4%,transparent) 64%) padding-box,conic-gradient(from var(--support-angle),var(--accent),transparent 30%,var(--accent-2) 50%,transparent 70%,var(--accent)) border-box;-webkit-backdrop-filter:blur(calc(var(--gb,14)*.6px));backdrop-filter:blur(calc(var(--gb,14)*.6px))}
html[data-glass=on] .card-page .facts{border-color:color-mix(in srgb,var(--ink) 11%,transparent)}
html[data-glass=on] .card-page .bio,html[data-glass=on] .card-page .who p,html[data-glass=on] .card-page .facts dt,html[data-glass=on] .card-page .list h2{color:color-mix(in srgb,var(--ink) 78.4%,transparent)}
html[data-glass=on] .card-page .like.liked{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 32%,transparent),color-mix(in srgb,var(--ink) 3.1%,transparent))!important;border-color:var(--accent)!important}
html[data-glass=on] body::before{z-index:0}
html[data-glass=on] .topbar{background:color-mix(in srgb,var(--ink) 5.1%,transparent);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
html[data-glass=on] .toast{background:color-mix(in srgb,var(--ink) 90.2%,transparent);color:var(--bg)}

/* the basic card reacts to every theme: banner, rings and tiles use theme vars (also inside the Studio preview) */
.preview-inner .idcard{--av:112px}
.preview-inner .idcard-banner{height:132px}

/* card styles on the basic card (these used to be star-only in places) */
[data-cstyle=neon] .card-page .tile-copy,[data-cstyle=outline] .card-page .tile-copy{background:transparent!important;border-color:color-mix(in srgb,var(--accent) 40%,transparent)!important}
[data-cstyle=outline] .card-page .actions .btn:not(.btn-accent),[data-cstyle=outline] .card-page .reactions button,[data-cstyle=outline] .card-page .like,[data-cstyle=outline] .card-page .visits{background:transparent!important}
[data-cstyle=solid] .card-page .actions .btn:not(.btn-accent),[data-cstyle=solid] .card-page .reactions button,[data-cstyle=solid] .card-page .tile-copy,[data-cstyle=solid] .card-page .tile{background:var(--panel-solid)!important}
[data-cstyle=tinted] .card-page .tile,[data-cstyle=tinted] .card-page .tile-copy,[data-cstyle=tinted] .card-page .actions .btn:not(.btn-accent),[data-cstyle=tinted] .card-page .reactions button{background:color-mix(in srgb,var(--accent) 14%,var(--bg))!important}
[data-cstyle=bubble] .card-page .tile,[data-cstyle=bubble] .card-page .tile-copy,[data-cstyle=bubble] .card-page .actions .btn,[data-cstyle=bubble] .card-page .reactions button{border-radius:26px!important}
[data-cstyle=bubble] .card-page .support{border-radius:30px}

/* ===== STAR card tweaks (visits on the left, gear always open) ===== */
.panel .name-row .visits{position:absolute;left:8px;top:70px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line-strong);background:color-mix(in srgb,var(--ink) 4%,transparent);font-family:var(--mono);font-size:12px;color:var(--muted)}
.panel .name-row .visits i{color:var(--accent-2);font-size:13px}
.panel{overflow:visible}
.stats{grid-template-columns:1fr auto}
.stats dd{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.stats > div:first-child{padding-left:8px}
.gear{margin-top:12px;padding:0 4px}
.gear .specs-box{margin-top:0}
.gear-label{display:flex;align-items:center;gap:7px;padding:0 4px 8px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.gear-label i{color:var(--accent);font-size:10px}
html[data-glass=on] .gear .specs-box{background:var(--g-fill);border-color:color-mix(in srgb,var(--ink) 9%,transparent)}

/* ===== QR sheet ===== */
.qs{position:fixed;inset:0;z-index:200;display:grid;align-items:end;justify-items:center;pointer-events:none}
.qs.open{pointer-events:auto}
.qs-back{position:absolute;inset:0;background:rgba(5,3,4,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.qs.open .qs-back{opacity:1}
.qs-sheet{position:relative;width:min(100%,420px);padding:10px 18px calc(20px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--panel-solid)),var(--bg) 55%);
  border:1px solid color-mix(in srgb,var(--accent) 26%,color-mix(in srgb,var(--ink) 10.2%,transparent));border-bottom:0;box-shadow:0 -30px 80px -30px var(--accent-glow,#000a);
  transform:translateY(105%);transition:transform .5s cubic-bezier(.22,1,.36,1);touch-action:pan-y;color:var(--text)}
.qs.open .qs-sheet{transform:none}
.qs-grab{width:40px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--ink) 20%,transparent);margin:0 auto 14px}
.qs-x{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7.1%,transparent);color:var(--text);font-size:13px;padding:0}
.qs-card{text-align:center;padding:6px 0 4px}
.qs-code{width:min(72vw,248px);margin:4px auto 0;padding:10px;border-radius:26px;background:#fff;position:relative;
  box-shadow:0 24px 60px -24px var(--accent-glow,#000),0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent);
  animation:qs-pop .6s cubic-bezier(.34,1.56,.64,1) both .12s}
.qs-code svg{display:block;width:100%;height:auto;border-radius:16px}
@keyframes qs-pop{from{opacity:0;transform:scale(.86) translateY(14px)}to{opacity:1;transform:none}}
.qs-name{margin:20px 0 4px;font-family:var(--display,var(--sans));font-size:22px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.qs-url{font-family:var(--mono);font-size:12px;color:var(--accent-2);overflow-wrap:anywhere}
.qs-hint{margin-top:8px;font-size:12.5px;color:var(--muted)}
.qs-acts{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:18px}
.qs-btn{height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:500;color:var(--text);
  background:color-mix(in srgb,var(--ink) 5.1%,transparent);border:1px solid color-mix(in srgb,var(--ink) 10.2%,transparent);padding:0 8px;text-align:center;white-space:nowrap}
.qs-btn i{color:var(--accent);font-size:13px}
.qs-main{background:linear-gradient(135deg,var(--accent),color-mix(in oklab,var(--accent) 62%,var(--maple-red,var(--accent))));border-color:transparent;color:var(--on-accent,var(--bg-2));font-weight:600}
.qs-main i{color:inherit}
@media (min-width:560px){.qs{align-items:center}.qs-sheet{border-radius:30px;border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,color-mix(in srgb,var(--ink) 10.2%,transparent));padding-bottom:22px;transform:translateY(30px) scale(.96);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}.qs.open .qs-sheet{opacity:1;transform:none}.qs-grab{display:none}}
@media (max-width:360px){.qs-btn span{display:none}.qs-acts{grid-template-columns:repeat(3,1fr)}}
#qr-modal{display:none!important}

/* ===== bottom dock: fixed + centred, the page reserves its height so nothing is covered ===== */
:root{--dock-h:62px;--dock-space:calc(var(--dock-h) + 26px + env(safe-area-inset-bottom,0px))}
body.has-dock{padding-bottom:var(--dock-space)}
.dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;gap:2px;padding:6px;border-radius:30px;
  height:var(--dock-h);max-width:calc(100vw - 24px);
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--accent,#ff6a3d) 22%,color-mix(in srgb,var(--ink) 10.2%,transparent));
  box-shadow:0 18px 44px -14px #000,0 0 0 1px #0000004d,inset 0 1px 0 color-mix(in srgb,var(--ink) 7.8%,transparent);
  transform:translateX(-50%);transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.dock.away,.dock.gone{transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
.dock-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:72px;padding:0 14px;border-radius:24px;
  color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:.02em;position:relative;
  transition:scale .5s cubic-bezier(.34,1.56,.64,1),filter .3s,color .25s,background-color .3s}
.dock-i i{font-size:17px;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.dock-i.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.dock-i.on i{transform:translateY(-1px) scale(1.08)}
.dock-i.is-pressed{--ps:.9}
.dock-i:hover{color:var(--text)}
.dock-i.on:hover{color:var(--accent)}
@media (max-width:360px){.dock-i{min-width:60px;padding:0 9px}}
/* things that normally sit at the bottom move up above the dock */
body.has-dock .toast,body.has-dock #toast{bottom:calc(var(--dock-space) + 4px)!important}
body.has-dock .savebar{bottom:calc(var(--dock-space) - 8px)}
body.has-dock.star-mode .star-frame{bottom:auto;height:100vh;height:100dvh}
body.has-dock.star-mode{background:var(--bg)}
html[data-glass=on] .dock{background:color-mix(in srgb,var(--ink) 7.1%,transparent)}

/* ===== homepage: who is on Maple ID (finder + leaderboard) ===== */
#explore{scroll-margin-top:84px}
.ex-count{color:var(--muted);margin-top:12px;font-size:15px}
.ex-count b{color:var(--accent);font-family:var(--mono);font-weight:500}
.ex-box{max-width:720px;border-radius:26px;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 6%,color-mix(in srgb,var(--ink) 3.1%,transparent)),color-mix(in srgb,var(--ink) 1.2%,transparent))}
.ex-search{display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 16px;border-radius:18px;background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s}
.ex-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.ex-search>i{color:var(--accent);font-size:15px}
.ex-search input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px;color:var(--text);-webkit-appearance:none;appearance:none}
.ex-search input::-webkit-search-cancel-button{display:none}
.ex-clear{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:13px;padding:0}
.ex-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0;padding:4px;border-radius:16px;background:color-mix(in srgb,var(--bg) 50.2%,transparent);border:1px solid var(--line)}
.ex-tabs button{height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--muted);text-align:center}
.ex-tabs button[aria-selected=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.ex-tabs button i{color:var(--accent);font-size:12px}
.ex-list{list-style:none;display:flex;flex-direction:column;gap:6px;min-height:60px}
.ex-row{display:grid;grid-template-columns:32px 48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:18px;
  background:color-mix(in srgb,var(--ink) 2.4%,transparent);border:1px solid transparent;transition:background-color .25s,border-color .25s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.ex-row:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 24%,transparent)}
.ex-rank{font-family:var(--mono);font-size:13px;color:var(--dim);text-align:center}
.ex-row.t1 .ex-rank,.ex-row.t2 .ex-rank,.ex-row.t3 .ex-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:var(--panel-solid);font-size:12.5px}
.ex-row.t1 .ex-rank{background:linear-gradient(135deg,#ffe27a,#f5a623);box-shadow:0 0 14px -2px #f5a623aa}
.ex-row.t2 .ex-rank{background:linear-gradient(135deg,#f1f3f8,#a7b0c0)}
.ex-row.t3 .ex-rank{background:linear-gradient(135deg,#f3c29a,#c27a43)}
.ex-row.t1{background:linear-gradient(90deg,#f5a62320,transparent 70%);border-color:#f5a62340}
.ex-av{width:48px;height:48px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:700;font-size:16px;color:var(--bg-2);
  background:linear-gradient(135deg,var(--c1,var(--accent)),var(--c2,var(--accent-2)));box-shadow:0 0 0 2px color-mix(in srgb,var(--c1,var(--accent)) 50%,transparent)}
.ex-av img{width:100%;height:100%;object-fit:cover}
.ex-who{display:flex;flex-direction:column;min-width:0}
.ex-who b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-who small{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.ex-you{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);vertical-align:2px;font-weight:500}
.ex-stat{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;color:var(--accent-2)}
.ex-stat i{font-size:12px;color:var(--accent)}
.ex-skel{height:68px;border-radius:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 2.4%,transparent),color-mix(in srgb,var(--ink) 6.3%,transparent),color-mix(in srgb,var(--ink) 2.4%,transparent));background-size:200% 100%;animation:sk 1.2s infinite}
.ex-empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:14px;line-height:1.6}
.ex-empty b{color:var(--text)}
.ex-empty .btn{margin-top:12px}
.ex-more{width:100%;margin-top:10px}
@media (max-width:420px){.ex-row{grid-template-columns:26px 42px minmax(0,1fr) auto;gap:9px}.ex-av{width:42px;height:42px;font-size:14px}}