.page-shell header .nav,
.page-shell .nav,
header .nav { display: flex; align-items: center; }

.site-share-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 46px;
  min-width: 46px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(221,235,255,.78);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg,#2f6bff 0%,#357cff 52%,#16aebd 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.32),0 10px 26px rgba(23,72,181,.3);
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.site-share-button::before { content: ""; position: absolute; inset: -40% auto -40% -46%; z-index: -1; width: 38%; pointer-events: none; background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform: skewX(-18deg); transition: left .42s ease; }
.site-share-button[hidden] { display: none !important; }
/* The generated asset is a complete transparent canvas, not a cropped tile.
   Keep the SVG available until load succeeds and when the image fails. */
html body .site-share-button > img.site-share-art {
  position: relative !important;
  z-index: 3;
  display: block !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none;
}
html body .site-share-button > img.site-share-art[hidden],
html body .site-share-button.has-ai-share > svg { display: none !important; }
.site-share-button:hover { filter: brightness(1.08); transform: translateY(-1px); border-color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.38),0 12px 30px rgba(23,72,181,.38); }
.site-share-button:hover::before { left: 118%; }
.site-share-button:active { transform: translateY(1px) scale(.985); }
.site-share-button:focus-visible { outline: 3px solid rgba(72,137,255,.34); outline-offset: 3px; }
.site-share-button svg { box-sizing: content-box; width: 20px; height: 20px; padding: 4px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; background: rgba(255,255,255,.12); }
.site-share-button span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
html.ng-skin-active .site-share-button { border-color: color-mix(in srgb,var(--ng-accent) 34%,#fff) !important; color: #fff !important; background-color: var(--ng-accent) !important; background-image: var(--ng-float-decoration),var(--ng-button) !important; background-position: center !important; background-size: 100% 100% !important; box-shadow: var(--ng-float-shadow) !important; }
html[data-theme="light"] .site-share-button { color: #fff; background: linear-gradient(135deg,#2f6bff,#2f7ee9 54%,#13a7b6); border-color: rgba(255,255,255,.92); box-shadow: inset 0 1px rgba(255,255,255,.42),0 9px 24px rgba(39,93,194,.25); }

body.site-share-open { overflow: hidden; overscroll-behavior: none; }
.site-share-backdrop { position: fixed; inset: 0; z-index: var(--ng-layer-modal, 220); display: grid; grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; place-items: center; box-sizing: border-box; overflow: hidden; padding: max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); background: rgba(3,11,25,.66); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.site-share-backdrop[hidden] { display: none !important; }
html[data-ui-theme] .site-share-panel { display: flex; width: min(520px,100%); max-height: min(88dvh,760px,100%); box-sizing: border-box; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(122,155,220,.4); border-radius: 24px; color: #18263e; background: #f8fbff; box-shadow: 0 28px 90px rgba(2,13,34,.38); }
.site-share-head { display: flex; width: 100%; margin: 0; border-radius: 0; min-width: 0; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg,#244fc3,#3475ff 58%,#19a8bd); }
.site-share-head > div { min-width: 0; }
.site-share-head strong,.site-share-head span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-share-head strong { font-size: 19px; }
.site-share-head span { margin-top: 5px; color: #dce8ff; font-size: 12px; }
.site-share-close { display: grid; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; color: #fff; background: rgba(5,22,64,.24); cursor: pointer; }
.site-share-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.site-share-body { display: grid; min-height: 0; flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; gap: 16px; overflow-x: hidden; overflow-y: auto; padding: 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; }
.site-share-image { display: block; width: 100%; max-height: 240px; object-fit: contain; border-radius: 16px; background: #edf3fb; }
.site-share-copy { display: grid; min-width: 0; gap: 8px; }
.site-share-copy > strong { font-size: 18px; overflow-wrap: anywhere; }
.site-share-copy p { margin: 0; color: #667691; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-share-copy label { display: grid; min-width: 0; gap: 7px; color: #52627d; font-size: 12px; font-weight: 800; }
.site-share-copy input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d6e0ef; border-radius: 11px; outline: 0; color: #18263e; background: #fff; font: inherit; font-size: 16px; text-overflow: ellipsis; }
.site-share-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.site-share-action { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #cddaf0; border-radius: 12px; color: #34516f; background: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.site-share-action.primary { border: 0; color: #fff; background: linear-gradient(135deg,#2f6bff,#18aab9); }
.site-share-feedback { min-height: 18px; color: #25805f; font-size: 12px; overflow-wrap: anywhere; }
html[data-theme="dark"] .site-share-panel { border-color: #294666; color: #e7efff; background: #0c1a2d; }
html[data-theme="dark"] .site-share-image { background: #12243b; }
html[data-theme="dark"] .site-share-copy p,html[data-theme="dark"] .site-share-copy label { color: #9fb0c9; }
html[data-theme="dark"] .site-share-copy input,html[data-theme="dark"] .site-share-action { border-color: #2b4666; color: #e7efff; background: #12243b; }

@media (max-width:768px) {
  .site-share-button { width: 44px; min-width: 44px; height: 44px; border-radius: 13px; }
  .site-share-button svg { width: 18px; height: 18px; padding: 3px; border-radius: 8px; }
  .site-share-backdrop { align-items: end; padding: max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); }
  html[data-ui-theme] .site-share-panel { width: 100%; max-height: 100%; border-radius: 22px; }
  .site-share-head { padding: 15px 14px 15px 17px; }
  .site-share-body { gap: 14px; padding: 16px 16px calc(18px + env(safe-area-inset-bottom,0px)); scroll-padding-bottom: calc(18px + env(safe-area-inset-bottom,0px)); }
  .site-share-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .site-share-button,.site-share-button::before { transition: none; }
}