.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; }
.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); }

.share-copy-toast { position: fixed; top: max(18px,env(safe-area-inset-top,0px)); left: 50%; z-index: 210; max-width: calc(100vw - 32px); padding: 9px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #fff; background: rgba(21,128,89,.96); box-shadow: 0 10px 28px rgba(5,38,28,.3); opacity: 0; pointer-events: none; transform: translate(-50%,-12px); transition: opacity .18s ease,transform .18s ease; }
.share-copy-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.share-copy-toast.is-error { background: rgba(190,44,44,.96); }

body.site-share-open { overflow: hidden; overscroll-behavior: none; }
.site-share-backdrop { position: fixed; inset: 0; z-index: 145; display: grid; 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%) !important; max-height: min(88dvh,760px) !important; 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; 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; 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:560px) {
  .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(10px,env(safe-area-inset-top,0px)) 0 0; }
  html[data-ui-theme] .site-share-panel { width: 100% !important; max-height: calc(100vh - max(10px,env(safe-area-inset-top,0px))) !important; max-height: calc(100dvh - max(10px,env(safe-area-inset-top,0px))) !important; border-radius: 22px 22px 0 0; }
  .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,.share-copy-toast { transition: none; }
}