html.share-open { overflow: hidden; }
.share-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid; border-radius: 5px; font-size: .875rem; font-weight: 700; transition: background .18s, border-color .18s; }
.share-trigger[hidden], .share-native[hidden] { display: none; }
.share-trigger svg { width: 19px; height: 19px; }
.header-share { color: #fff; background: #ffffff0a; border-color: #ffffff42; padding: 10px 15px; }
.header-share:hover { background: #ffffff16; border-color: #ffd32d; }
.reader-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.reader-share { width: 44px; padding: 0; background: #fff; border-color: var(--line); color: var(--ink); }
.reader-share:hover { background: #f0f3f8; border-color: #aab4c5; }
.reader-toolbar .view-tabs { min-width: 0; }
.share-dialog { padding: 0; border: 1px solid #e4e8ef; border-radius: 18px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: #fff; box-shadow: 0 24px 100px #03071570; }
.share-dialog::backdrop { background: #030817b8; backdrop-filter: blur(7px); }
.share-dialog[open] { animation: share-enter .24s var(--ease); }
.share-dialog-inner { padding: 25px 26px 12px; }
.share-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.share-heading h2 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.035em; }
.share-heading p { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.share-close { border: 0; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #526079; background: #f0f3f8; margin: -5px -7px 0 0; }
.share-close:hover { background: #e4e9f2; }
.share-close svg { width: 19px; height: 19px; }
.share-preview { border-radius: 9px; border: 1px solid var(--line); overflow: hidden; background: #f8f9fc; margin-bottom: 21px; }
.share-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: contain; background: var(--navy); }
.share-preview-caption { padding: 12px 15px 13px; display: flex; flex-direction: column; gap: 5px; }
.share-preview-caption span { font-size: .75rem; color: var(--muted); }
.share-preview-caption strong { font-size: .9375rem; font-weight: 700; }
.share-native { width: 100%; min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px; color: var(--navy); font-weight: 700; font-size: .875rem; background: var(--gold); border: 0; border-radius: 6px; margin-bottom: 20px; }
.share-native:hover { background: #ffdf66; }
.share-native svg { width: 19px; height: 19px; }
.share-destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 -4px 24px; }
.share-destination { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 9px; padding: 3px 0; text-decoration: none; font-size: .75rem; color: #526079; }
.share-app-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 50%; transition: transform .16s, background .16s; }
.share-destination:hover .share-app-icon { transform: translateY(-3px); }
.share-destination:hover { color: var(--ink); }
.share-app-icon svg { width: 25px; height: 25px; }
.facebook-icon { background: #eaf1ff; color: #1768df; }
.facebook-icon svg { fill: currentColor; stroke: none; width: 23px; height: 23px; }
.whatsapp-icon { background: #e6f6ec; color: #187d40; }
.viber-icon { background: #f0ebfa; color: #7450ae; }
.email-icon { background: #eef1f6; color: #526079; }
.share-link-label { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: 9px; }
.share-link-field { display: flex; align-items: stretch; border: 1px solid #d6ddeb; border-radius: 6px; overflow: hidden; min-height: 48px; background: #f8f9fc; }
.share-link-field:focus-within { outline: 2px solid #b99100; outline-offset: 2px; }
.share-link-field input { min-width: 0; width: 100%; padding: 12px; border: 0; font: inherit; font-size: .8125rem; background: transparent; color: #5a6580; text-overflow: ellipsis; outline: none; }
.share-link-field button { flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px; min-width: 108px; background: var(--navy); color: #fff; border: 0; font-size: .8125rem; font-weight: 700; }
.share-link-field button:hover { background: #1b2b54; }
.share-link-field button:focus-visible { outline-offset: -4px; outline-color: var(--gold); }
.share-link-field button svg { width: 17px; height: 17px; }
.copied-symbol, .is-copied .copy-symbol { display: none; }
.is-copied .copied-symbol { display: block; }
.share-link-field button.is-copied { background: #215c40; }
.share-status { min-height: 18px; margin: 9px 0 0; color: #38604d; font-size: .75rem; line-height: 1.45; }
@keyframes share-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media(max-width:760px) {
  .site-header nav { gap: 14px; }
  .header-share { min-width: 44px; padding: 10px; }
  .header-share span { display: none; }
  .reader-toolbar { gap: 8px; }
  .reader-toolbar .view-tabs { flex: 1; width: auto; }
  .reader-toolbar .view-tabs button { padding-left: 5px; padding-right: 5px; }
  .reader-actions { gap: 0; }
  .share-dialog { margin: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 16px); border-radius: 20px 20px 0 0; border-bottom: 0; }
  .share-dialog-inner { max-width: 480px; margin: auto; padding: 24px 23px max(14px, env(safe-area-inset-bottom)); }
  .share-heading { margin-bottom: 20px; }
  .share-preview { margin-bottom: 18px; }
  .share-preview-caption { padding: 10px 13px 12px; }
  .share-link-field input { font-size: 16px; padding: 10px; }
  .share-link-field button { min-width: 103px; padding: 10px; }
  .share-destinations { gap: 6px; margin-bottom: 21px; }
  .share-dialog[open] { animation-name: share-enter-mobile; }
  @keyframes share-enter-mobile { from { opacity: .5; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
}
@media(max-width:360px) {
  .site-header { padding-left: 16px; padding-right: 16px; }
  .site-header .brand { width: 112px; }
  .site-header nav { gap: 10px; }
  .share-dialog-inner { padding-left: 18px; padding-right: 18px; }
}
@media(prefers-reduced-motion:reduce) { .share-dialog[open] { animation: none; } .share-destination:hover .share-app-icon { transform: none; } }