.view-badge{
  --bg: rgba(255,255,255,0.4);
  --br: rgba(255,255,255,0.6);
  --txt:#142033;
  --glow: rgba(80,120,255,0.35);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.35rem .6rem;border-radius:999px;
  background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,0.65), var(--bg)),
              linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
  border:1px solid var(--br);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.6);
  color:var(--txt); user-select:none; cursor:default; position:relative; overflow:visible;
  font:500 11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
@media (prefers-color-scheme: dark){
  .view-badge{ --bg: rgba(20,26,38,0.45); --br: rgba(255,255,255,0.12); --txt:#e8eefc; --glow: rgba(80,120,255,0.25); }
}
.view-badge .lbl{opacity:.65; font-weight:600; font-size:.82rem}
.view-badge .num{font-variant-numeric: tabular-nums; font-weight:700; letter-spacing:.2px}

/* Shimmer */
.view-badge::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 12%, transparent 24%);
  transform: translateX(-140%); border-radius: inherit; pointer-events:none;
  animation: shimmer 3.6s ease-in-out infinite; opacity:.55;
}
@keyframes shimmer{
  0%{ transform: translateX(-140%); } 48%{ transform: translateX(140%); } 100%{ transform: translateX(140%); }
}

/* Eye */
.eye{ display:inline-flex; align-items:center; justify-content:center; }
.eye-svg{ display:block; transition: transform .25s ease; }
.view-badge:hover .eye-svg{ transform: scale(1.05); }

/* Eyelid blink */
.eye-svg .eyelid{
  transform-origin: 60px 0px;
  transform: translateY(-30px);
  transition: transform .08s ease-in;
}
.eye-blink .eyelid{ transform: translateY(0px); transition: transform .08s ease-in; }

/* Micro-move pupil */
@keyframes microMove{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(.3px,-.4px); }
}
.eye-svg #pupil{ animation: microMove 5s ease-in-out infinite; }

/* Tooltip */
.view-tooltip{
  position:absolute; left:50%; transform:translateX(-50%) translateY(8px);
  bottom:-100%; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  background: rgba(20,26,38,.92); color:#dfe7ff; padding:.55rem .7rem; border-radius:.75rem; font-size:.78rem;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); white-space:nowrap; border:1px solid rgba(255,255,255,.08);
}
.view-badge:hover .view-tooltip{ opacity:1; transform:translateX(-50%) translateY(4px); }

/* Modal */
#viewModal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999;
  background: rgba(10,14,22,.48); backdrop-filter: blur(3px);
}
#viewModal .card{
  width:min(92vw, 560px);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  border:1px solid rgba(255,255,255,.5); border-radius:20px; padding:18px 18px 14px;
  box-shadow:0 24px 70px -28px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  #viewModal .card{ background:linear-gradient(180deg, rgba(24,28,40,.96), rgba(24,28,40,.88)); border-color: rgba(255,255,255,.08); }
}
#viewModal .hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#viewModal .ttl{font-weight:800; letter-spacing:.2px}
#viewModal .x{border:none;background:transparent;font-size:20px;cursor:pointer;opacity:.8}
#viewModal .meta{display:flex;gap:12px;font-size:.85rem;opacity:.8;margin:.2rem 0 .6rem}
#viewModal canvas{width:100%;height:220px;border-radius:14px;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.05)}
@media (prefers-color-scheme: dark){
  #viewModal canvas{background:rgba(255,255,255,.06);border-color: rgba(255,255,255,.08)}
}