@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --ph-primary: #06bfff;
  --ph-secondary: #2d73ff;
  --ph-accent: #8e44ad;
  --ph-dark: #1b2838;
  --ph-darker: #171c24;
  --ph-darkest: #0a0f1a;
  --ph-text: #f7fafc;
  --ph-muted: #a0aec0;
  --ph-line: rgba(255,255,255,.08);
  --ph-display: 'Outfit', sans-serif;
  --ph-body: 'Inter', sans-serif;
}
html { scroll-behavior: smooth; }
body.ph-site { min-height: 100vh; overflow-x: clip; background: var(--bg-void); color: var(--ph-text); font: 15px var(--ph-body) !important; }
.ph-site *, .ph-site *::before, .ph-site *::after { box-sizing: border-box; }
.ph-site #main { font-family: var(--ph-body) !important; }
.ph-site h1, .ph-site h2, .ph-site h3, .ph-site h4 { font-family: var(--ph-display) !important; }
body.ph-site #main :is(h1,h2,h3,h4){font-family:var(--ph-display)!important}
body.ph-site #main :is(p,li,label,input,textarea,select,button,small,time){font-family:var(--ph-body)!important}
.ph-site a { color: inherit; }
.ph-site :focus-visible { outline: 2px solid var(--ph-primary); outline-offset: 3px; }
.ph-site #main { width: 100%; min-height: 65vh; }
.ph-site .wrap { max-width: 1280px; width: min(100% - 40px, 1280px); margin-inline: auto; }

.ph-nav-wrap { position: sticky; top: 0; z-index: 1090; padding: 10px 20px 0; }
.ph-navbar { height: 72px; border: 1px solid var(--ph-line); border-radius: 14px; background: rgba(20,25,35,.88); box-shadow: 0 4px 24px rgba(0,0,0,.15); backdrop-filter: blur(20px); }
.ph-nav-inner { width: min(100%,1330px); height: 100%; margin: auto; display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.ph-nav-brand { flex: 1 1 260px; min-width: 0; }
.ph-nav-brand .logo { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; white-space: nowrap; font: 800 clamp(19px,2vw,29px)/1 var(--ph-display); letter-spacing: -.05em; }
.ph-nav-brand .logo .gm-mark { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(140deg,#f7fafc,#b8d6e5); color: #121a26; font-size: 14px; letter-spacing: -.04em; }
.ph-nav-brand .wordmark, .ph-nav-brand .wordmark > span { color: #fff; }
.ph-nav-brand .wordmark small { display: none; }
.ph-language { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.06); font-size: 14px; }
.ph-flag-tr { display:grid;place-items:center;width:22px;height:15px;border-radius:2px;background:#e30a17;color:#fff;font-size:10px;letter-spacing:-2px;line-height:1; }
.ph-primary-nav { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--ph-line); border-radius: 11px; background: rgba(255,255,255,.04); }
.ph-primary-nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 8px; color: #e4e9ef; text-decoration: none; white-space: nowrap; font: 600 13px var(--ph-display); transition: background .2s,color .2s; }
.ph-primary-nav a:hover, .ph-primary-nav a[aria-current="page"] { background: rgba(6,191,255,.14); color: #fff; }
.ph-primary-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(6,191,255,.35),0 0 15px rgba(6,191,255,.12); }
.ph-primary-nav .icon, .ph-nav-actions .icon { width: 17px; height: 17px; }
.ph-primary-nav a small { padding: 2px 6px; border-radius: 12px; background: #168e57; color: #fff; font-size: 10px; line-height: 1; }
.ph-nav-actions { display: flex; align-items: center; gap: 9px; flex: none; }
.ph-nav-icon, .ph-account-menu > summary, .ph-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 40px; min-height: 40px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.06); color: #f7fafc; text-decoration: none; cursor: pointer; font: 600 13px var(--ph-body); }
.ph-nav-icon:hover, .ph-account-menu > summary:hover, .ph-mobile-toggle:hover { border-color: rgba(6,191,255,.45); background: rgba(6,191,255,.14); }
.ph-nav-icon { position: relative; }
.ph-sfx-toggle{font-size:19px;line-height:1}
.ph-notification-count { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 999px; background: #e3445e; color: #fff; font-size: 10px; }
.ph-account-menu { position: relative; }
.ph-account-menu > summary { list-style: none; }
.ph-account-menu > summary::-webkit-details-marker { display: none; }
.ph-account-links { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; padding: 7px; border: 1px solid var(--ph-line); border-radius: 12px; background: #1a2331; box-shadow: 0 18px 42px rgba(0,0,0,.4); }
.ph-account-links a, .ph-account-links button { display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ph-text); text-align: left; text-decoration: none; font: 500 13px var(--ph-body); cursor: pointer; }
.ph-account-links a:hover, .ph-account-links button:hover { background: rgba(6,191,255,.13); }
.ph-mobile-toggle, .ph-mobile-menu, .ph-bottom-nav { display: none; }
.ph-mobile-sfx-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--ph-text);text-align:left;font:600 13px var(--ph-body);cursor:pointer}
.ph-mobile-sfx-toggle:hover{background:rgba(6,191,255,.12)}

.ph-footer { border-top: 2px solid var(--ph-primary); background: #202232; color: #fff; }
.ph-footer-grid { width: min(100% - 40px,1140px); margin: auto; padding: 42px 0 48px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.ph-footer-grid > nav, .ph-footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ph-footer-grid h2 { margin: 0 0 8px; color: #fff; font-size: 17px; font-weight: 700; }
.ph-footer-grid h2::after { content: ''; display: block; width: 40px; height: 2px; margin-top: 10px; background: var(--ph-primary); }
.ph-footer-grid a { color: #f7fafc; font-size: 14px; text-decoration: none; }
.ph-footer-grid nav a::before { content: '›'; margin-right: 9px; color: var(--ph-muted); }
.ph-footer-grid a:hover, .ph-footer-bottom a:hover { color: var(--ph-primary); }
.ph-footer-grid p { max-width: 220px; margin: 0; color: #b2bdd1; font-size: 14px; line-height: 1.6; }
.ph-footer-bottom { width: min(100% - 40px,1140px); margin: auto; padding: 18px 0 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid rgba(255,255,255,.07); color: #b4c9ef; text-align: center; font-size: 13px; }
.ph-footer-bottom div { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.ph-footer-bottom a { color: #fff; text-decoration: none; }

@media (max-width: 1060px) {
  .ph-primary-nav a { padding-inline: 8px; }
  .ph-primary-nav a span, .ph-primary-nav a small { display: none; }
  .ph-nav-brand { flex-basis: 200px; }
}
@media (max-width: 700px) {
  .ph-nav-wrap { padding: 0; }
  .ph-navbar { height: 55px; border-radius: 0; border-inline: 0; }
  .ph-nav-inner { padding: 0 12px; }
  .ph-nav-brand .logo { gap: 5px; font-size: 16px; }
  .ph-nav-brand .logo .gm-mark { width: 30px; height: 30px; font-size: 10px; }
  .ph-language, .ph-primary-nav, .ph-account-menu { display: none; }
  .ph-nav-icon { display:inline-flex;min-width:38px;min-height:38px;padding:0; }
  .ph-sfx-toggle{display:none}
  .ph-notification-count { top:-4px;right:-4px; }
  .ph-mobile-toggle { display: inline-flex; width: 38px; height: 38px; padding: 0; }
  .ph-mobile-menu:not([hidden]) { display: grid; position: absolute; top: 55px; left: 0; right: 0; padding: 12px; border-bottom: 1px solid var(--ph-line); background: #192130; box-shadow: 0 14px 30px rgba(0,0,0,.36); }
  .ph-mobile-menu a { padding: 11px 10px; border-radius: 8px; color: #f7fafc; text-decoration: none; font-weight: 600; }
  .ph-mobile-menu a:hover { background: rgba(6,191,255,.12); }
  .ph-bottom-nav { display: grid; position: fixed; z-index: 1080; bottom: 0; left: 0; right: 0; grid-template-columns: repeat(5,1fr); min-height: 58px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--ph-line); background: rgba(17,23,34,.96); backdrop-filter: blur(16px); }
  .ph-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; color: var(--ph-muted); text-decoration: none; font-size: 9px; }
  .ph-bottom-nav a .icon { width: 17px; height: 17px; }
  .ph-bottom-nav a[aria-current="page"] { color: var(--ph-primary); }
  .ph-bottom-nav .ph-bottom-primary { color: #fff; }
  .ph-bottom-nav .ph-bottom-primary .icon { width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(6,191,255,.7)); }
  .ph-site .wrap { width: min(100% - 24px,1280px); }
  .ph-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .ph-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; padding-top: 35px; }
  .ph-footer-grid h2 { font-size: 14px; }
  .ph-footer-grid a, .ph-footer-grid p { font-size: 12px; }
  .ph-footer-bottom { font-size: 11px; }
}
@media (max-width: 380px) { .ph-footer-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ph-site *, .ph-site *::before, .ph-site *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}