*{ box-sizing: border-box; }
*::before,*::after{ box-sizing: inherit; }

body{ margin:0; }
.input1{
    font-family:"Display Light", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' ;
}
.profile{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:24px clamp(12px,4vw,40px) 80px;

}

.profile-header{
  --pending-notice-top: clamp(0px, 0.8vw, 8px);
  --pending-notice-right: clamp(2px, 1.2vw, 12px);
  width:min(100%,1400px);
  margin:28px auto 18px;
  padding:10px 4px;
  display:flex;
  gap:18px;
  align-items:center;
  position:relative;
}
.profile-header .info{
  flex:1;
  min-width:0;
  padding-right:clamp(52px, 4vw, 72px);
}
.avatar-shell{ flex:0 0 auto; }
.avatar{
  width:clamp(130px,13vw,190px);
  height:clamp(130px,13vw,190px);
  border-radius:50%;
  border:none;
  background:#fff;
  position:relative;
  overflow:hidden;
}
.avatar-img,.avatar-initial{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.avatar-initial{
  display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:900;
  color:var(--color-primary-strong);
}
.profile-pending-notice{
  position:absolute;
  top:var(--pending-notice-top);
  right:var(--pending-notice-right);
  z-index:20;
}
.profile-pending-notice__button{
  width:clamp(36px, 3vw, 40px);
  height:clamp(36px, 3vw, 40px);
  padding:0;
  appearance:none;
  border-radius:12px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.profile-pending-notice__button img{
  display:block;
  width:21px;
  height:21px;
  color: var(--color-text);
}
.profile-pending-notice__button:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.profile-pending-notice__card{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(360px, calc(100vw - 24px));
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--color-border-soft) 70%, transparent);
  background:var(--color-secondary);
  box-shadow:var(--shadow-md);
  padding:14px;
  display:grid;
  gap:10px;
  opacity:0;
  transform:translateY(-8px) scale(0.98);
  transform-origin:top right;
  pointer-events:none;
  will-change:opacity, transform;
  transition:opacity .18s ease, transform .18s ease;
}
.profile-pending-notice__card.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.profile-pending-notice__title{
  margin:0;
  font-size:14px;
  font-family:"Display Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";
  color:var(--color-text);
}
.profile-pending-notice__message{
  margin:0;
  color:var(--color-muted);
  font-size:13px;
  line-height:1.45;
}
.profile-pending-notice__share{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.profile-pending-notice__input{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--color-border-soft) 70%, transparent);
  background:#fff;
  color:var(--color-text);
  font-size:12px;
}
.profile-pending-notice__hint{
  margin:0;
  font-size:12px;
  color:var(--color-muted);
}
.info-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.display{
  margin:0;
  font-weight:900;
  font-size:clamp(32px,4.5vw,54px);
  letter-spacing:.2px;
  line-height:1.05;
  color:var(--color-text);
  font-family:"Intro Rust", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' ;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  color:var(--color-muted);
  font-size:clamp(15px,1.5vw,18px);
  margin-top:6px;
}
.meta .sep{ opacity:.55; }
.handle-rank{ display:inline-flex; align-items:center; gap:8px; }
.muted{ color:var(--color-muted); }
.xp-bar{
  margin:0;
  padding:6px 8px;
  background:transparent;
  max-width: 420px;
}
.xp-bar-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:800;
  color:var(--color-muted);
}
.xp-bar-track{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.signature-badge{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:transparent;
  border:none;
  color:var(--color-text);
  font-weight:950;
  font-size:16px;
  justify-content: center;
  letter-spacing:.01em;
  display: flex;
  text-align: center;
}
.signature-badge[hidden]{
  display:none;
}
.more-infos{
  color:var(--color-primary);
}
.more-infos:hover{
  text-decoration:underline;
  color:var(--color-primary);
}
.xp-bar-track .rank-icon{ flex:0 0 auto;margin:none; }
.xp-progress-rail{
  flex:1;
  height:8px;
  border-radius:999px;
  background:var(--color-border-soft);
  overflow:hidden;
  position:relative;
}
.xp-progress-fill{
  position:absolute;
  inset:0;
  width:0%;
  background:var(--color-btn);
  border-radius: 999px;
  transition:width .3s ease;
}
.bio{
  margin:.7rem 0 0 0;
  opacity:.95;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.5;
  max-width:80ch;
  white-space:pre-wrap;
}
.profile-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.profile-actions .btn{
  gap:8px;
}
.profile-actions .btn-icon{
  width:16px;
  height:16px;
  display:inline-block;
  background-color: currentColor;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
}
.profile-actions .btn-icon--edit{
  mask-image:url("/assets/icons/edit.svg");
  -webkit-mask-image:url("/assets/icons/edit.svg");
}
.profile-actions .btn-icon--analytics{
  mask-image:url("/assets/icons/analytics.svg");
  -webkit-mask-image:url("/assets/icons/analytics.svg");
}
.profile-modal--stats .stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1px;
  margin-top:0;
  background:color-mix(in srgb, var(--color-border-soft) 70%, transparent);
  border-radius:12px;
  overflow:hidden;
}
.profile-modal--stats .stat-card{
  background:var(--color-secondary);
  border:none;
  border-radius:0;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.profile-modal--stats .stat-value{
  display:block;
  font-size:20px;
  font-weight:900;
  color:var(--color-text);
  font-family:"Intro Rust", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";
}
.profile-modal--stats .stat-label{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--color-muted);
  font-family:"Display Bold";
  letter-spacing:.08em;
}
.profile-modal--stats .stat-card--rank{
  grid-column:span 3;
  padding:14px 16px;
}
.profile-modal--stats .stat-card--rank .rank-value{
  margin-top:2px;
}
.profile-modal--stats .stat-card--rank .xp-bar{
  margin-top:8px;
  max-width:none;
  width:100%;
  padding:0;
}
.profile-modal--stats .stat-card--rank .signature-badge{
  margin-top:8px;
}
@media (max-width:720px){
  .profile-modal--stats .stats-grid{
    grid-template-columns:1fr;
  }
  .profile-modal--stats .stat-card--rank{
    grid-column:auto;
  }
}
.stats{
  display:flex;
  gap:12px;
  padding:0;
  margin:18px 0 0;
  list-style:none;
  flex-wrap:wrap;

}
.stats li.xp-stat{ flex:1 1 240px; max-width:440px; }
.statnumber{
    font-family:"Intro Rust", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' ;
}
.stats li{
  background:transparent;
  box-shadow: var(--shadow-md);
  border-radius:16px;
  padding:12px 18px;
  min-width:120px;
}
.stats strong{
  display:block;
  font-size:24px;
  font-weight:900;
}
.stats span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--color-muted);
  font-family: "Display Bold";
  letter-spacing:.08em;
}
@media (max-width:720px){
  .profile-header{ flex-direction:column; align-items:flex-start; }
  .profile-header{
    --pending-notice-top: 0px;
    --pending-notice-right: 2px;
  }
  .profile-header .info{
    width:100%;
    padding-right:clamp(44px, 16vw, 56px);
  }
  .profile-pending-notice__card{
    width:min(340px, calc(100vw - 20px));
  }
  .info-head{ width:100%; justify-content:space-between; gap:10px; }
  .stats li{ flex:1; min-width:100px; }
}

@media (max-width:420px){
  .profile-header{
    --pending-notice-right: 0px;
  }
  .profile-pending-notice__button{
    width:34px;
    height:34px;
  }
  .profile-pending-notice__button img{
    width:19px;
    height:19px;
  }
  .profile-pending-notice__card{
    width:min(320px, calc(100vw - 16px));
  }
}

/* Optional card style for future post items (kept if needed) */
.card{ position:relative; overflow:hidden; min-height:120px; background: var(--color-card-bg); border:1px solid var(--color-secondary); border-radius:16px; padding:0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.card h3{ margin:0 0 6px; font-size:20px; color: var(--color-text); }
.card p{ margin:0 0 10px; font-size:14px; color: var(--color-muted); }
.card a{ color: var(--color-primary); font-weight:600; text-decoration:none; }
.card a:hover{ text-decoration: underline; }

/* Restore Edit Bio modal styling above the footer */
.modal-overlay{
  --modal-pad: clamp(12px, 2vh, 24px);
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: var(--modal-pad, 18px);
  z-index:9000;
  overflow-y:auto;
}
.modal{
  position:relative;
  width:clamp(340px, 94vw, 840px);
  max-height: calc(100vh - (var(--modal-pad, 18px) * 2));
  overflow:auto;
  background:var(--color-secondary);
  box-shadow: var(--shadow-md);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow-md);
}
.modal h3{  color:var(--color-text); }
.modal textarea{ width:100%; min-height:120px; border-radius:12px; border:1px solid var(--color-border-soft); background:#fff; color:var(--color-text); padding:10px; outline:none; }
.modal-actions{ margin-top:10px; display:flex; gap:10px; justify-content:flex-end; }
@media (max-width: 640px){
  .modal{ border-radius:12px; padding:14px; }
}

html.profile-modal-open{
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}

body.profile-modal-open{
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}

@media (max-width: 720px){
  .modal-overlay--profile{
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(0,0,0,0);
    transition: background .2s ease;
    pointer-events:none;
    overflow: hidden;
    height: 100dvh;
    overscroll-behavior: contain;
    touch-action: none;
  }
  .modal-overlay--profile.is-open{
    background:rgba(0,0,0,.35);
    pointer-events:auto;
  }
  .modal-overlay--profile .profile-modal{
    width:100%;
    max-width:none;
    height: min(86dvh, 720px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    border-radius:18px 18px 0 0;
    transform: translateY(110%);
    opacity:0;
    transition: transform .28s ease, opacity .2s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .modal-overlay--profile.is-open .profile-modal{
    transform: translateY(0);
    opacity:1;
    transition: transform .32s ease, opacity .2s ease;
  }
}

/* Profile modal layout */
.profile-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.profile-modal__head h3{ margin:0; }
.profile-modal__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  color:var(--color-text);
}
.profile-modal__close-icon{
  width:16px;
  height:16px;
  display:block;
  background:currentColor;
  -webkit-mask: url("/assets/icons/burgeropen.svg") center/contain no-repeat;
  mask: url("/assets/icons/burgeropen.svg") center/contain no-repeat;
}
.profile-modal--stats{
  box-shadow:none;
}
.profile-modal--stats .group{
  box-shadow:none;
}
.profile-modal--stats .stat-card{
  box-shadow:none;
}
.profile-modal h4{ margin: 0 0 6px; font-size: 14px; color: var(--color-muted); font-family: "Display Bold"; letter-spacing:.08em; }
.profile-modal .group{   background:var(--color-secondary);
  box-shadow: var(--shadow-md); border-radius:14px; padding:12px; margin-top:12px; }
.profile-modal.profile-modal--stats .group{
  box-shadow:none;
}
.profile-modal .group-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.profile-modal .row{ display:flex; gap:10px; align-items:center; }
.profile-modal .row.gap{ gap:10px; }
.profile-modal .row.wrap{ flex-wrap:wrap; }
.profile-modal .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; color:var(--color-primary,#2d7bff); background:color-mix(in srgb,var(--color-primary,#2d7bff) 10%, var(--color-card-bg,#fff)); border:1px solid color-mix(in srgb,var(--color-primary,#2d7bff) 40%, var(--color-border,#d4d4d4)); }
.profile-modal .pill[data-state="custom"]{ background:color-mix(in srgb,var(--color-primary,#2d7bff) 15%, var(--color-card-bg,#fff)); }
.profile-modal .microcopy{ margin:2px 0 0; color:var(--color-muted); font-size:12px; }
.profile-modal .input-row{ display:flex; align-items:stretch; gap:8px; }
.profile-modal .input-prefix{ display:inline-flex; align-items:center; justify-content:center; padding:0 10px; border:1px solid var(--color-border-soft); border-radius:10px; background:var(--color-card-bg); font-weight:800; color:var(--color-muted); }
.profile-modal .hint{ margin:6px 0 2px; color:var(--color-muted); font-size:13px; }

.profile-modal .signature-group .signature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:10px;
}
.profile-modal .signature-panel{
  background:var(--color-secondary);
  border:1px dashed color-mix(in srgb, var(--color-border) 50%, transparent);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:210px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.profile-modal .signature-panel.is-active{
  border-color:var(--color-btn);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-btn) 45%, transparent);
}
.profile-modal .panel-title{ margin:0; font-size:14px; font-weight:800; }
.profile-modal .panel-subtitle{ margin:0; font-size:12px; color:var(--color-muted); }
.profile-modal .signature-preview{
  border-radius:12px;
  background:#fff;
  padding:8px;
  border:1px solid color-mix(in srgb, var(--color-border-soft) 60%, transparent);
}
.profile-modal .signature-preview img{
  width:100%;
  max-height:110px;
  object-fit:contain;
  display:block;
}
.profile-modal .canvas-shell{
  border-radius:12px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--color-border-soft) 60%, transparent);
  padding:6px;
}
.profile-modal #mSignatureCanvas{
  width:100%;
  height:150px;
  display:block;
  cursor:crosshair;
  touch-action:none;
}
.profile-modal .draw-actions{ display:flex; justify-content:flex-end; }
.profile-modal .signature-footer{ margin-top:12px; display:grid; gap:8px; }
.profile-modal .signature-status{ margin:0; font-size:12px; color:var(--color-muted); }
.profile-modal .signature-group .form-error{
  margin:0;
  min-height:18px;
  font-size:13px;
  color:var(--color-accent);
}


/* Edit profile: danger zone input */
.profile-modal .label{ display:block; font-size:12px; color: var(--color-muted); margin: 6px 0 4px; }
.profile-modal .input{ width:100%; height:38px; padding:8px 10px; border:1px solid var(--color-border-soft); border-radius:10px; background:#fff; color:var(--color-text);font-family: "Display Light","Inter Local",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; flex:1; min-width:0; }
.profile-modal .input:focus{ outline:none; border-color: var(--color-border); box-shadow: var(--shadow-sm);
}
/*CSS post grid*/
.user-posts{
        width:min(100%,1400px);
        margin:24px auto 72px;
        padding:6px;
        display:flex;
        flex-direction:column;
        gap:24px;
      }
      .tab-header{
        position:relative;
        display:flex;
        gap:16px;
        padding-bottom:14px;
        border-bottom:2px solid color-mix(in srgb,var(--color-border,#d4d4d4) 85%,#f1f1f1);
      }
      .tab-btn{
        position:relative;
        flex:1;
        min-width:0;
        background:none;
        border:0;
        padding:12px 0;
        font-family:"Display Bold",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
        font-size:clamp(16px,2vw,20px);
        font-weight:400;
        color:color-mix(in srgb,var(--color-muted,#777) 78%,var(--color-bg,#fff));
        cursor:pointer;
        text-align:center;
        transition:color .25s ease;
      }
      .tab-btn.is-active{
        color:var(--color-primary);
      }
      .tab-slider{
        position:absolute;
        bottom:-2px;
        height:4px;
        border-radius:var(--radius-interactive);
        background:var(--color-primary);
        transform:translate3d(0,0,0);
        transition:transform .35s cubic-bezier(.6,.05,.25,1), width .35s cubic-bezier(.6,.05,.25,1);
        pointer-events:none;
        left:0;
        width:50%;
      }
      .tab-panels{ position:relative; }
      .tab-panel{ display:none; }
      .tab-panel.is-active{ display:block; }
      .user-grid{
        --post-grid-gap: var(--post-gap,10px);
        --post-grid-min: 280px;
        --post-grid-row: 12px;
      }
      @media (max-width:1100px){ .user-grid{ --post-grid-min: 240px; } }
      @media (max-width:800px){ .user-grid{ --post-grid-min: 210px; } }
      @media (max-width:560px){ .user-grid{ --post-grid-min: 100%; } }

      .user-grid .card{
        display:block;
        width:100%;
        max-width:520px;
        position:relative;
        border-radius:16px;
        overflow:hidden;
        background:#fff;
        border:1px solid var(--color-border,#333);
        box-shadow:0 10px 28px rgba(0,0,0,.16);
        text-decoration:none;
        color:inherit;
        transform:translateZ(0);
        min-width:0;
      }
      .user-grid .card a{ text-decoration:none; color:inherit; }

      .user-grid .thumb{
        display:block;
        width:100%;
        background:#fff;
        border:0;
        pointer-events:none;
        margin:0;
        overflow:hidden;
        position:relative;
      }
      .user-grid .thumb iframe{
        width:100%;
        display:block;
        border:0;
        background:#fff;
      }
      .user-grid .thumb-img{
        width:100%;
        height:auto;
        display:block;
        border:0;
        object-fit:cover;
        background:#000;
      }

      .user-grid .meta2{
        position:absolute;
        inset:0;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        padding:12px;
        background:rgba(0,0,0,.65);
        color:#fff;
        opacity:0;
        transition:opacity .18s ease;
      }
      .user-grid .card:hover .meta2{ opacity:1; }
      .user-grid .post-card.favorite-removing{
        animation:favCardExplode .5s ease forwards;
        pointer-events:none;
      }
      .user-grid .post-card.favorite-removing::after{
        content:"";
        position:absolute;
        inset:-10px;
        background:rgba(255,255,255,.25);
        animation:favParticleFlash .5s ease forwards;
        pointer-events:none;
      }
      .card .card-fav-btn{
        position:absolute;
        top:12px;
        right:12px;
        width:36px;
        height:36px;
        border-radius:var(--radius-interactive);
        border:1px solid color-mix(in srgb,var(--color-border,#d4d4d4) 80%,#000);
        background:var(--color-card-bg) center/18px 18px no-repeat url("/assets/icons/starborder.svg");
        cursor:pointer;
        z-index:5;
        transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      }
      .card .card-fav-btn.is-favorite{
        background-image:url("/assets/icons/star.svg");
        border-color:var(--color-accent,#A3232B);
        box-shadow:0 6px 16px rgba(0,0,0,.2);
      }
      .card .card-fav-btn:hover{ transform:translateY(-1px); }
      @keyframes favCardExplode{
        to{
          transform:scale(1.1);
          opacity:0;
          filter:blur(8px);
        }
      }
      @keyframes favParticleFlash{
        to{
          opacity:0;
          transform:scale(1.3);
        }
      }

      .user-grid .card>.name,
      .user-grid .card>.desc,
      .user-grid .card>.tags{ display:none !important; }
      .user-grid .name-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        min-width:0;
      }
      .user-grid .name{
        font-weight:900;
        margin:0 0 6px 0;
        font-size:1.05rem;
        flex:1;
        min-width:0;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        color:#fff;
      }
      .user-grid .view-pill{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius:999px;
        background:rgba(0,0,0,.35);
        border:1px solid rgba(255,255,255,.25);
        font-weight:800;
        font-size:12px;
        letter-spacing:.02em;
        color:#fff;
        backdrop-filter:blur(4px);
        box-shadow:0 6px 14px rgba(0,0,0,.25);
        flex:0 0 auto;
      }
      .user-grid .view-pill img{
        width:16px;
        height:16px;
        display:block;
        filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
      }
      .user-grid .view-pill .view-count{ line-height:1; }
      .user-grid .desc{
        margin:0 0 6px 0;
        color:rgba(255,255,255,.9);
        line-height:1.25;
        max-height:3.3em;
        overflow:hidden;
      }
      .user-grid .meta2 .tags{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
      }
      .user-grid .meta2 .tag{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding:6px 12px;
        border-radius:var(--radius-interactive);
        text-decoration:none;
        font-family:var(--font-tag);
        font-weight:800;
        font-size:14px;
        line-height:1.2;
        --tag-text:#fff;
        color:var(--tag-text);
        background:var(--tag-accent);
        border:2px solid color-mix(in srgb,var(--tag-accent) 55%,#000);
        box-shadow:0 4px 8px rgba(0,0,0,.14);
        transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
      }
      .user-grid .meta2 .tag:nth-child(3n+1){ --tag-accent: var(--color-accent); }
      .user-grid .meta2 .tag:nth-child(3n+2){ --tag-accent: var(--color-tertiary); --tag-text: var(--color-text); }
      .user-grid .meta2 .tag:nth-child(3n){ --tag-accent: var(--color-primary); }
      .user-grid .meta2 .tag:hover{
        transform:translateY(-1px);
        box-shadow:0 6px 12px rgba(0,0,0,.18);
        filter:saturate(1.05);
      }
.xpsystemtitle{
  font-size:14px;
  font-weight:900;
  display:block;
  margin:0 0 4px 0;
}

.info-btn,
.info-btn::after{
  position: relative;
  overflow: visible;
}

.info-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--color-text);
  font-family:"display light";
  cursor:pointer;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease;
}

.info-btn:hover{
  transform:translateY(-1px);
}

.info-btn .info-icon{
  width:22px;
  height:22px;
  display:block;
  background-color:currentColor;
  -webkit-mask:url("/assets/icons/info.svg") center / contain no-repeat;
  mask:url("/assets/icons/info.svg") center / contain no-repeat;
  transform:translateY(-1px);
}

.info-btn .info-tooltip{
  --tip-y: 6px;
  --tip-delay: .1s;

  position:absolute;
  left:50%;
  bottom:100%;

  transform: translateX(-50%) translateY(var(--tip-y));
  opacity:0;
  visibility:hidden;
  pointer-events:auto;

  background: var(--color-border-soft);
  color: var(--color-text);
  font-size:13px;
  font-weight:700;
  font-family:"display light";
  line-height:1.25;

  padding:10px 12px;
  border-radius:10px;

  white-space:normal;
  width:max-content;
  max-width:min(360px, calc(100vw - 16px));
  box-sizing:border-box;

  box-shadow:none;
  transition: opacity .15s ease var(--tip-delay), transform .15s ease var(--tip-delay), visibility 0s linear var(--tip-delay);
  z-index:10;
}

.info-btn .info-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border:7px solid transparent;
  border-top-color: var(--color-border-soft);
}

.info-btn:hover .info-tooltip,
.info-btn:focus-visible .info-tooltip{
  opacity:1;
  visibility:visible;
  --tip-y: 0px;
  --tip-delay: 0s;
}

@media (max-aspect-ratio: 16/9){
  .info-btn .info-tooltip{
    --edge-gap: 8px;
    left:auto;
    right:0;
    transform: translateY(var(--tip-y)) translateX(calc(-1 * var(--edge-gap)));
    max-width:calc(100vw - 16px);
  }
  .info-btn .info-tooltip::after{
    left:auto;
    right:calc(12px - var(--edge-gap));
    transform:none;
  }
}

@media (orientation: portrait){
  .info-btn .info-tooltip{
    --edge-gap: 8px;
    left:auto;
    right:0;
    transform: translateY(var(--tip-y)) translateX(calc(-1 * var(--edge-gap)));
    max-width:calc(100vw - 16px);
  }
  .info-btn .info-tooltip::after{
    left:auto;
    right:calc(12px - var(--edge-gap));
    transform:none;
  }
}

/* followers modal styling */
.profile-modal--followers .followers-list {
  display: block;
  margin: 0;
  padding: 0;
}
.profile-modal--followers .follower-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
  padding: 8px 6px;
  border-radius: 8px;
  transition: background .18s;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* downloads modal */
.profile-modal--downloads .downloads-list {
  display: block;
  margin: 0;
  padding: 0;
}
.profile-modal--downloads .download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.profile-modal--downloads .download-item .title {
  flex: 1 1 auto;
  margin-right: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-modal--downloads .download-item .count {
  flex: 0 0 auto;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.profile-modal--followers .follower-item:hover {
  background: color-mix(in srgb, var(--color-secondary) 80%, transparent);
}
.profile-modal--followers .follower-item .avatar.sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}