.onx-er{
  /* tokens */
  --onx-font:16px; --onx-text:#111; --onx-bg:#fff; --onx-radius:16px; --onx-pad:18px; --onx-gap:16px;
  --onx-star:16px; --onx-star-fill:#f5a623; --onx-border:#e5e7eb; --onx-shadow:0 12px 32px rgba(0,0,0,.14);
  --onx-author-weight:600; --onx-max-lines:6; --onx-avatar:40px;
  --onx-card-width:360px; --onx-max-width:100%;
  --onx-glass-alpha:0;
}
.onx-er{font-size:var(--onx-font);color:var(--onx-text);line-height:1.55;max-width:var(--onx-max-width);margin-inline:auto}

/* Slider */
.onx-er .onx-er-slider{position:relative;overflow:hidden;padding-bottom:18px;z-index:0}
.onx-er .onx-er-slider::after{
  content:""; position:absolute; left:10%; right:10%; bottom:0; height:26px; pointer-events:none;
  opacity:var(--onx-glass-alpha);
  background: radial-gradient(120% 60% at 50% 100%, rgba(0,0,0,.35), transparent 58%);
  filter: blur(10px);
}

/* Track & items */
.onx-er .onx-track{display:flex;gap:var(--onx-gap);will-change:transform;align-items:stretch}
.onx-er .onx-item{
  flex: 0 0 var(--onx-card-width);
  min-width: var(--onx-card-width);
  width: var(--onx-card-width); /* % and vw will work now */
}


/* Cards */
.onx-er .onx-er-card{
  background:var(--onx-bg); border:1px solid var(--onx-border); border-radius:var(--onx-radius);
  padding:var(--onx-pad); height:100%; box-shadow:var(--onx-shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; position:relative; z-index:2;
}
.onx-er .onx-er-card:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,0,.18); }

/* Head */
.onx-er .onx-er-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.onx-er .onx-er-avatar img{width:var(--onx-avatar);height:var(--onx-avatar);border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.onx-er .onx-er-author{font-weight:var(--onx-author-weight)}
.onx-er .onx-er-time{margin-left:auto;opacity:.65;font-size:.86em}

/* Stars */
.onx-er .onx-er-rating{margin:.25rem 0}
.onx-er .onx-er-rating .onx-er-star{
  font-size: var(--onx-star);
  line-height: 1;
  color: var(--onx-star-fill) !important; /* ensure override */
}
.onx-er .onx-er-star.off{opacity:.22}

/* Text clamp + more link */
.onx-er .onx-er-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--onx-max-lines);overflow:hidden}
.onx-er .onx-er-more{margin-top:.5rem;font-size:.88em}
.onx-er .onx-er-more a{cursor:pointer;text-decoration:underline}

/* Empty state */
.onx-er .onx-er-empty{margin:0;opacity:.7}

/* Classic (single) */
.onx-er .onx-er-review{display:block}
.onx-er .onx-er-review.js-hidden{display:none}
.onx-er .onx-er-review.js-active{display:block}

/* GRID + MOSAIC */
.onx-er .onx-grid{display:grid; gap:var(--onx-gap)}
@media (min-width: 480px){ .onx-er .onx-grid{ grid-template-columns: repeat(auto-fill, minmax(min(var(--onx-card-width), 100%), 1fr)); } }
@media (min-width: 900px){ .onx-er .onx-grid{ grid-template-columns: repeat(auto-fill, minmax(var(--onx-card-width), 1fr)); } }
.onx-er .onx-mosaic .onx-er-review:nth-child(7n){ grid-column: span 2; }
.onx-er .onx-mosaic .onx-er-review:nth-child(7n) .onx-er-card{ height:100% }

/* Pagination */
.onx-er .onx-pages{position:relative}
.onx-er .onx-page{display:none}
.onx-er .onx-page.active{display:block}
.onx-er .onx-pager{display:flex;justify-content:center;gap:.5rem;margin-top:12px;align-items:center}
.onx-er .onx-dot{width:8px;height:8px;border-radius:9999px;background:#cbd5e1;cursor:pointer}
.onx-er .onx-dot.active{background:#0ea5e9}
.onx-er .onx-nav{display:flex;gap:8px;margin-top:10px;justify-content:center}
.onx-er .onx-btn{padding:6px 10px;border:1px solid var(--onx-border);background:#fff;border-radius:10px;cursor:pointer}

/* Modal / Lightbox */
.onx-er-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:999999}
.onx-er-modal.open{display:flex}
.onx-er-modal .onx-dlg{
  background:#fff; color:#111; max-width:720px; width:calc(100% - 40px);
  border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.22);
  padding:28px; position:relative;
}
.onx-er-modal .onx-close{
  position:absolute; right:12px; top:12px;
  border:none; background:transparent; cursor:pointer;
  width:36px; height:36px; line-height:36px; text-align:center;
  font-size:22px; border-radius:8px; z-index:2;
}
.onx-er-modal .onx-close:hover{ background:rgba(0,0,0,.06); }
.onx-er-modal .onx-fulltext{margin-top:8px;white-space:pre-wrap;line-height:1.55}

/* Presets */
.onx-er[data-theme="clean"]{ }
.onx-er[data-theme="shadow"]{ --onx-shadow:0 16px 40px rgba(0,0,0,.18) }
.onx-er[data-theme="dark"]{
  --onx-bg:#0d0f12; --onx-text:#e8eaed; --onx-border:#1f232a;
  --onx-star-fill:#ffcc48; --onx-shadow:0 18px 44px rgba(0,0,0,.4)
}