.apr{position:relative;width:100%;box-sizing:border-box;--apr-star:#fbbc04;--apr-avatar-bg:#e9ecef;--apr-avatar-text:#1f2937;--apr-verified:#1a73e8;}

/* Track: native scrolling (no scrollbar), scroll-snap per card */
.apr-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:6px 4px;
  width:100%;
  box-sizing:border-box;
  scrollbar-width:none;         /* Firefox */
}
.apr-track::-webkit-scrollbar{display:none;} /* WebKit */

/* Cards */
.apr-card{
  scroll-snap-align:start;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  padding:14px 14px 12px;
  width:290px;
  min-width:290px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  outline:none;
}
.apr-card:focus{box-shadow:0 0 0 3px rgba(26,115,232,.25),0 2px 12px rgba(0,0,0,.10);}

.apr-head{display:flex;gap:12px;align-items:center;}
.apr-avatar{width:42px;height:42px;border-radius:999px;background:var(--apr-avatar-bg);flex:0 0 42px;display:flex;align-items:center;justify-content:center;color:var(--apr-avatar-text);font-weight:800;letter-spacing:.2px;user-select:none;}
.apr-avatar--img{background-size:cover;background-position:center;color:transparent;font-size:0;}
.apr-meta{flex:1;min-width:0;}
.apr-name{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.apr-company{font-size:13px;opacity:.85;font-weight:600;margin-top:2px;}
.apr-subline{font-size:13px;opacity:.75;}
.apr-verified{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:var(--apr-verified);color:#fff;font-size:12px;line-height:1;flex:0 0 18px;}

/* Bigger stars */
.apr-stars{display:flex;gap:2px;font-size:22px;}
.apr-star{opacity:.25;color:var(--apr-star);}
.apr-star.is-on{opacity:1;}

.apr-snippet{font-size:14px;line-height:1.35;}
.apr-more{font-weight:600;font-size:13px;text-decoration:underline;width:max-content;opacity:.9;}

/* Arrows (like example) */
.apr-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:all .2s ease;
}
.apr-arrow:hover{
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transform:translateY(-50%) scale(1.05);
}
.apr-arrow.left{left:-18px;}
.apr-arrow.right{right:-18px;}
.apr-arrow:after{
  content:'›';
  font-size:18px;
  font-weight:600;
  line-height:1;
  color:#111;
}
.apr-arrow.left:after{content:'‹';}
.apr-arrow.is-hidden{display:none;}

/* Modal (body-portal) */
.apr-modal{position:fixed;inset:0;z-index:2147483647;--apr-star:#fbbc04;--apr-avatar-bg:#e9ecef;--apr-avatar-text:#1f2937;--apr-verified:#1a73e8;}
.apr-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);}
.apr-modal-dialog{position:relative;max-width:720px;width:calc(100% - 28px);margin:60px auto;background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:18px;}
.apr-modal-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;opacity:.8;}
.apr-modal-head{display:flex;gap:12px;align-items:center;margin-bottom:8px;}
.apr-modal-avatar{width:44px;height:44px;border-radius:999px;background:var(--apr-avatar-bg);background-size:cover;background-position:center;flex:0 0 44px;display:flex;align-items:center;justify-content:center;color:var(--apr-avatar-text);font-weight:800;}
.apr-modal-name{font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px;}
.apr-modal-subline{font-size:13px;opacity:.75;margin-top:2px;}
.apr-modal-stars{display:flex;gap:2px;font-size:24px;margin:10px 0 12px;}
.apr-modal-stars .apr-star{color:var(--apr-star);}
.apr-modal-body{font-size:15px;line-height:1.5;}
.apr-modal-body p{margin:0 0 10px;}
.apr-modal-body p:last-child{margin-bottom:0;}

@media (max-width:520px){
  .apr-card{width:260px;min-width:260px;}
  .apr-arrow{display:none;}
  .apr-modal-dialog{margin:40px auto;}
}