.phx-reference { position: relative; }
.phx-reference-replaced { display: none !important; }
body.phx-reference-active .phx-ip-strip,
body.phx-reference-active .phx-nav,
body.phx-reference-active .phx-mobile-drawer { display: none !important; }
body.phx-reference-active .footer-payments img { display: none !important; }
body.phx-reference-active .footer-payments .phx-payment-badge { display: inline-block; padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; color: #c9bead; font: 700 12px 'Space Grotesk',sans-serif; }
.phx-reference-nav .phx-reference-menu-toggle,
.phx-reference-nav .phx-reference-menu { display: none; }
.phx-reference .phx-term-tab { padding: 9px 17px; border-radius: 999px; border: 0; cursor: pointer; font-family: 'Space Grotesk',sans-serif; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: all .25s; background: transparent; color: #9e9384; }
.phx-reference[data-billing="2yr"] [data-phx-action="setTerm2y"],
.phx-reference[data-billing="1yr"] [data-phx-action="setTerm1y"],
.phx-reference[data-billing="1mo"] [data-phx-action="setTerm1m"] { color: #fff; background: linear-gradient(105deg,#ff8a1f,#d8401a); box-shadow: 0 0 18px rgba(255,122,47,.5); }
.phx-reference .phx-unavailable { display: block; margin-top: auto; padding: 12px; border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; color: #9e9384; font-family: 'Space Grotesk',sans-serif; font-size: 14px; font-weight: 600; text-align: center; }
.phx-reference [data-phx-download="windows"] { display: block; text-align: center; text-decoration: none; }
.phx-reference .phx-build-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; color: #9e9384; font-size: 12px; line-height: 1.6; }
.phx-reference .phx-build-note button { border: 0; background: transparent; color: #ffb066; font: inherit; cursor: pointer; }
.phx-reference .phx-faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.phx-reference .phx-faq > summary::-webkit-details-marker { display: none; }
.phx-reference .phx-faq .phx-faq-x { transition: transform .25s; }
.phx-reference .phx-faq[open] .phx-faq-x { transform: rotate(45deg); }
.phx-reference .phx-faq[open] { border-color: rgba(255,122,47,.45) !important; }
.phx-reference .phx-extra-faq { margin-top: 34px; }
.phx-reference .phx-extra-faq h3 { margin: 0 0 16px; color: #ffb066; font-family: 'Space Grotesk',sans-serif; font-size: 18px; }
.phx-reference .phx-extra-faq details { background: rgba(23,17,12,.7); border: 1px solid rgba(255,122,47,.16); border-radius: 12px; padding: 20px 24px; margin-bottom: 12px; }
.phx-reference .phx-extra-faq summary span:first-child { color: #f3ece2; font: 600 16px 'Space Grotesk',sans-serif; }
.phx-reference .phx-extra-faq summary span:last-child { color: #ffb066; font-size: 20px; }
.phx-reference .phx-extra-faq p { color: #a89e8d; font-size: 14.5px; line-height: 1.7; margin: 12px 0 0; }
@keyframes phxFlow { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes phxCipher { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes phxFloatS { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.phx-reference [hidden] { display: none !important; }
.phx-reference [data-protocol] { display: none; }
.phx-reference[data-active-protocol="vless"] [data-protocol="vless"],
.phx-reference[data-active-protocol="hy"] [data-protocol="hy"],
.phx-reference[data-active-protocol="ss"] [data-protocol="ss"],
.phx-reference[data-active-protocol="wg"] [data-protocol="wg"] { display: block !important; }
.phx-reference .phx-protocol-tab {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px; border: 1px solid rgba(255, 150, 70, .2);
  border-radius: 10px; color: #b8aa99; background: rgba(20, 13, 10, .8);
  cursor: pointer; text-align: left;
}
.phx-reference[data-active-protocol="vless"] [data-phx-action="setVless"],
.phx-reference[data-active-protocol="hy"] [data-phx-action="setHy"],
.phx-reference[data-active-protocol="ss"] [data-phx-action="setSs"],
.phx-reference[data-active-protocol="wg"] [data-phx-action="setWg"] {
  color: #fff; border-color: #ff9836; background: rgba(255, 122, 47, .14);
}
.phx-reference [data-phx-action] { cursor: pointer; }
.phx-reference .phx-shot { transition: transform .35s, box-shadow .35s; }
.phx-reference .phx-shot:hover { transform: translateY(-4px); box-shadow: 0 30px 80px -20px rgba(255, 122, 47, .45); }
.phx-reference-preview { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 5vw; background: rgba(4, 3, 3, .94); }
.phx-reference-preview img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255, 122, 47, .35); }
.phx-reference-preview-close { position: absolute; top: 20px; right: 25px; border: 0; background: transparent; color: white; font-size: 36px; cursor: pointer; }
@media (max-width: 767px) {
  .phx-reference-nav { padding: 12px 5vw !important; }
  .phx-reference-nav img { height: 25px !important; }
  .phx-reference-nav > div:first-of-type { display: none !important; }
  .phx-reference-menu-toggle { display: block !important; margin-left: auto; border: 1px solid rgba(255,122,47,.3); border-radius: 8px; padding: 7px 12px; background: rgba(23,17,12,.8); color: #ffb066; font-size: 22px; cursor: pointer; }
  .phx-reference-header.phx-menu-open .phx-reference-menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: 12px 5vw 20px; background: rgba(11,8,7,.97); border-bottom: 1px solid rgba(255,122,47,.3); }
  .phx-reference-menu button { border: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 12px 0; background: transparent; color: #ccc1b0; font: 600 16px 'Space Grotesk',sans-serif; text-align: left; cursor: pointer; }
  .phx-reference section:not([data-screen-label="Hero"]) { padding: 64px 5vw 30px !important; }
  .phx-reference section[data-screen-label="Hero"] { padding: 120px 5vw 45px !important; }
  .phx-reference section[data-screen-label="Hero"] > div { grid-template-columns: 1fr !important; gap: 28px !important; }
  .phx-reference section[data-screen-label="Hero"] h1 { font-size: clamp(38px, 9vw, 56px) !important; }
  .phx-reference #why > div:last-child,
  .phx-reference #technology > div:last-child,
  .phx-reference #infrastructure > div:last-child,
  .phx-reference #privacy > div:last-child,
  .phx-reference #proof > div:last-child { grid-template-columns: 1fr !important; }
  .phx-reference #protocols [data-protocol] > div { grid-template-columns: 1fr !important; }
  .phx-reference .phx-protocol-tab { min-width: calc(50% - 8px); }
  .phx-reference .phx-shot img { max-width: 100%; }
  .phx-reference #faq > div > div:nth-child(2) { grid-column: 1 / -1 !important; }
}