/* panel.hvd.gg: the desktop pages in a browser. No window buttons, none of what only the PC itself may do, and the
   web's own toast and pairing box. */
html.web button.cap { display: none !important; }
html.web [data-web="hide"] { display: none !important; }
html.web nav a[href="#scripts"],
html.web nav a[href="#captcha"],
html.web nav a[href="#launch"] { display: none !important; }

.web-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; max-width: 420px; box-sizing: border-box; padding: 12px 16px;
  border-radius: 8px; background: #26262c; border: 1px solid #3a3a42; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); color: #f0f0f4;
  font: 12.5px/18px Montserrat, "Segoe UI", system-ui, sans-serif; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.web-toast.on { opacity: 1; transform: none; }
.web-toast.err { color: #F43120; }

.web-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(9, 9, 11, .55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.web-pop {
  width: 440px; max-width: 100%; box-sizing: border-box; padding: 22px; border-radius: 12px; background: #232328; border: 1px solid #3a3a42;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6); color: #f0f0f4; font: 13px/1.45 Montserrat, "Segoe UI", system-ui, sans-serif;
}
.web-pop h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.web-pop p { margin: 0 0 12px; color: #a8a8b4; }
.web-code {
  padding: 16px; border-radius: 10px; background: #1c1c21; border: 1px solid #3a3a42; text-align: center;
  font: 600 28px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em;
}
.web-left { margin-top: 6px; text-align: center; color: #9898a2; font-size: 12px; }
.web-pop ol { margin: 14px 0 0; padding-left: 18px; color: #c4c4ce; }
.web-pop li { margin: 4px 0; }
.web-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.web-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid #3a3a42; background: #2c2c32; color: #f0f0f4;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.web-btn.pri { border: 0; background: #D50000; color: #000; font-weight: 500; }

/* no machine paired yet: the pages show as they will, greyed out and still; the box says how to add one */
html.web-none main, html.web-none header { filter: grayscale(1); opacity: .38; pointer-events: none; user-select: none; }
.web-none-box {
  position: fixed; z-index: 60; top: 50%; left: calc(50% + 120px); transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 32px);
  box-sizing: border-box; padding: 22px; border-radius: 12px; background: #232328; border: 1px solid #3a3a42; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  color: #f0f0f4; font: 13px/1.45 Montserrat, "Segoe UI", system-ui, sans-serif;
}
.web-none-box h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.web-none-box p { margin: 0; color: #a8a8b4; }
@media (max-width: 760px) { .web-none-box { left: 50%; } }