/* ─── SITE FRAME & CHROME BORDER ─────────────────── */

.site-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;

  /* Four silver/teal gradient border lines */
  background:
    linear-gradient(90deg, transparent 0%, rgba(192,200,210,0.5) 20%, rgba(14,198,224,0.9) 50%, rgba(192,200,210,0.5) 80%, transparent 100%)
      top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(192,200,210,0.5) 20%, rgba(14,198,224,0.9) 50%, rgba(192,200,210,0.5) 80%, transparent 100%)
      bottom / 100% 2px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(192,200,210,0.5) 20%, rgba(14,198,224,0.9) 50%, rgba(192,200,210,0.5) 80%, transparent 100%)
      left / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(192,200,210,0.5) 20%, rgba(14,198,224,0.9) 50%, rgba(192,200,210,0.5) 80%, transparent 100%)
      right / 2px 100% no-repeat;
}

/* Corner bracket accents */
.site-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Top-left corner */
    linear-gradient(90deg, rgba(210,220,228,0.9), transparent) top left / 60px 1.5px no-repeat,
    linear-gradient(180deg, rgba(210,220,228,0.9), transparent) top left / 1.5px 60px no-repeat,
    /* Top-right corner */
    linear-gradient(270deg, rgba(210,220,228,0.9), transparent) top right / 60px 1.5px no-repeat,
    linear-gradient(180deg, rgba(210,220,228,0.9), transparent) top right / 1.5px 60px no-repeat,
    /* Bottom-left corner */
    linear-gradient(90deg, rgba(210,220,228,0.9), transparent) bottom left / 60px 1.5px no-repeat,
    linear-gradient(0deg, rgba(210,220,228,0.9), transparent) bottom left / 1.5px 60px no-repeat,
    /* Bottom-right corner */
    linear-gradient(270deg, rgba(210,220,228,0.9), transparent) bottom right / 60px 1.5px no-repeat,
    linear-gradient(0deg, rgba(210,220,228,0.9), transparent) bottom right / 1.5px 60px no-repeat;
}