html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; font-family: "Vazirmatn", system-ui, sans-serif; }
#welcome {
  position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% 0%, #10243a 0%, transparent 60%), radial-gradient(900px 600px at 100% 100%, #1d1b3a 0%, transparent 60%), #07090d;
}
#welcome[hidden] { display: none; }
#welcome.dragging .card { border-color: #38bdf8; transform: scale(1.01); }
.card {
  width: min(560px, 100%); text-align: center; padding: 36px 32px; border-radius: 22px; border: 2px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03); transition: border-color .15s, transform .15s;
}
.card h1 { margin: 10px 0 4px; font-size: 28px; letter-spacing: .3px; }
.card p { margin: 6px 0 18px; opacity: .78; }
.card .hint { font-size: 12.5px; opacity: .55; margin: 16px 0 0; }
.actions { display: flex; justify-content: center; gap: 10px; }
button {
  font: inherit; border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer; color: #fff; background: rgba(255,255,255,.1);
}
button.primary { background: linear-gradient(135deg, #38bdf8, #818cf8); color: #04121d; font-weight: 700; }
.url { display: flex; gap: 8px; margin-top: 18px; }
.url input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 10px 12px; outline: none;
}
.url input:focus { border-color: #38bdf8; }
/*
 * While the welcome screen shows, the page itself scrolls (not a box inside it): TV browsers scroll the page
 * with the remote's arrows and pointer, and often can't scroll an inner box at all.
 */
html.pp-welcome, html.pp-welcome body { overflow: auto; height: auto; min-height: 100%; }
html.pp-welcome #welcome { position: absolute; top: 0; left: 0; right: 0; bottom: auto; min-height: 100%; box-sizing: border-box; }
/* Lite (TVs, low-end devices): flat colours, no animations. */
html.pp-lite #welcome { background: #07090d; }
html.pp-lite .card, html.pp-lite button { transition: none; }
html.pp-lite button.primary { background: #38bdf8; }
html.pp-tv #welcome :focus { outline: 3px solid #fff; outline-offset: 2px; }
html.pp-tv .card { width: min(720px, 100%); }