/* /playground — the programs page, inside the main app layout. A little
   holodeck: amber on black, a perspective grid behind the hero. */
.pgx-hero { position: relative; overflow: hidden; border-radius: 18px; background: #050507; color: #f2efe8; padding: 64px 32px 40px; margin-bottom: 18px; isolation: isolate; }
.pgx-grid { position: absolute; inset: -40% -20% -10%; z-index: -1; transform: perspective(520px) rotateX(62deg) translateY(30%);
  background-image: linear-gradient(rgba(245,197,24,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(245,197,24,.55) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: linear-gradient(to top, #000 10%, transparent 75%); animation: pgx-drift 9s linear infinite; }
@keyframes pgx-drift { to { background-position: 0 54px; } }
@media (prefers-reduced-motion: reduce) { .pgx-grid { animation: none; } }
.pgx-hero-body { max-width: 760px; margin: 0 auto; text-align: center; }
.pgx-kicker { font-family: Antonio, "Arial Narrow", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #ff9c1a; font-size: 14px; }
.pgx-title { font-family: Antonio, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(38px, 6vw, 68px); line-height: 1; margin: 10px 0 14px; color: #ffc785; text-shadow: 0 0 28px rgba(255,156,26,.25); }
.pgx-lead { color: #c9c6be; font-size: 18px; max-width: 620px; margin: 0 auto 26px; }
.pgx-ask { display: flex; gap: 6px; background: rgba(20,22,30,.9); border: 1px solid #3a2f12; border-radius: 30px; padding: 6px; max-width: 640px; margin: 0 auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.pgx-ask:focus-within { border-color: #ff9c1a; }
.pgx-ask-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #f2efe8; font-size: 17px; padding: 8px 14px; }
.pgx-ask-input::placeholder { color: #8b8f9c; }
.pgx-ask-go { border: 0; border-radius: 6px 24px 24px 6px; background: #ff9c1a; color: #000; padding: 0 22px; font-family: Antonio, "Arial Narrow", sans-serif; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 17px; }
.pgx-ask-go:hover { filter: brightness(1.1); }
.pgx-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pgx-chip { border: 1px solid #3a2f12; background: rgba(20,16,6,.75); color: #ffc785; border-radius: 16px; padding: 4px 12px; font-size: 14px; }
.pgx-chip:hover { border-color: #ff9c1a; color: #fff; }
.pgx-hero-foot { margin-top: 18px; font-size: 14px; color: #8b8f9c; }
.pgx-link { background: none; border: 0; padding: 0; color: #8fc4ff; text-decoration: none; }
.pgx-link:hover { text-decoration: underline; }

.pgx-guest { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: #1d2230; color: #e4e6ee; border-radius: 12px; padding: 12px 18px; margin-bottom: 22px; font-size: 15px; }
@media (max-width: 720px) { .pgx-guest { flex-direction: column; align-items: flex-start; } }

.pgx-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 34px; }
.pgx-feature { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--bs-border-color); border-radius: 12px; background: var(--bs-body-bg); }
.pgx-feature p { margin: 2px 0 0; color: var(--bs-secondary-color); font-size: 14px; }
.pgx-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #ff9c1a; color: #000; font-size: 17px; }

.pgx-h2 { font-family: Antonio, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 24px; }
.pgx-empty { text-align: center; color: var(--bs-secondary-color); padding: 42px 16px; border: 1px dashed var(--bs-border-color); border-radius: 12px; }
.pgx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 40px; }
.pgx-card { position: relative; border: 1px solid var(--bs-border-color); border-radius: 12px; overflow: hidden; background: var(--bs-body-bg); transition: transform .12s, box-shadow .12s; }
.pgx-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.pgx-card-link { display: block; color: inherit; text-decoration: none; }
.pgx-thumb { position: relative; height: 130px; overflow: hidden; }
.pgx-sky-holodeck { background: #050507; }
.pgx-sky-day { background: linear-gradient(#3f86d6, #cfe5f4 70%, #6f9a48 70%); }
.pgx-sky-sunset { background: linear-gradient(#24305e, #ff8c4a 68%, #5a4030 68%); }
.pgx-sky-night { background: linear-gradient(#02040c, #111a33 68%, #1a2418 68%); }
.pgx-sky-overcast { background: linear-gradient(#7e8792, #c4c9cf 68%, #6d7a60 68%); }
.pgx-sky-space { background: radial-gradient(circle at 70% 30%, #2a2f55, #000 60%); }
.pgx-thumb-grid { position: absolute; inset: 30% -20% -40%; transform: perspective(160px) rotateX(60deg);
  background-image: linear-gradient(rgba(245,197,24,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(245,197,24,.6) 1px, transparent 1px); background-size: 18px 18px; }
.pgx-hills { position: absolute; left: -10%; right: -10%; bottom: -30px; height: 90px; border-radius: 50% 50% 0 0;
  background: radial-gradient(60% 90% at 30% 100%, #4b7a2e 60%, transparent 61%), radial-gradient(70% 100% at 75% 100%, #5c8a3a 60%, transparent 61%); }
.pgx-badge { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 8px; letter-spacing: .04em; }
.pgx-card-body { padding: 10px 12px 12px; }
.pgx-card-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgx-card-meta { font-size: 13px; color: var(--bs-secondary-color); }
.pgx-card-del { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; line-height: 1; opacity: 0; transition: opacity .12s; }
.pgx-card:hover .pgx-card-del, .pgx-card-del:focus { opacity: 1; }