/* ============================================================
   全站分享组件 share.css v1.0.0
   依赖 style.css 的 :root 设计变量（蓝白配色）
   ============================================================ */

.share-mask {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: share-fade .18s ease;
}
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }

.share-dialog {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    width: min(92vw, 380px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    position: relative;
    animation: share-pop .22s var(--ease, ease);
}
@keyframes share-pop {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.share-close {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--blue-bg); color: var(--text-2);
    font-size: 17px; line-height: 1; cursor: pointer;
    transition: background .15s;
}
.share-close:hover { background: var(--blue-light); color: var(--text); }

.share-title {
    font-size: 17px; color: var(--text); text-align: center;
}
.share-sub {
    margin-top: 7px; margin-bottom: 0;
    color: var(--text-2); font-size: 13px; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
}

/* 渠道按钮 */
.share-grid {
    margin-top: 16px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 6px;
}
.share-item {
    width: 62px; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0;
}
.si-icon {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; color: var(--on-accent);
    transition: transform .16s var(--ease, ease), box-shadow .16s;
}
.share-item:hover .si-icon { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(15, 23, 42, .16); }
.si-link   { background: var(--blue); }
.si-weixin { background: #07c160; }
.si-weibo  { background: #e6162d; }
.si-qq     { background: #12b7f5; }
.si-qzone  { background: #fbbd08; }
.si-native { background: var(--text-2); }
.si-name {
    font-size: 12px; color: var(--text-2);
    max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-item.copied .si-name { color: var(--teal); font-weight: 600; }
.share-item.copied .si-link { background: var(--teal); }

/* 二维码区 */
.share-qr {
    margin-top: 18px; padding: 14px 0 12px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    border-radius: 10px;
    transition: background .3s;
}
.share-qr.flash { animation: share-flash .9s ease; }
@keyframes share-flash {
    0%, 100% { background: transparent; }
    30% { background: rgba(7, 193, 96, .12); }
}
#share-qr-box img,
#share-qr-box canvas { display: block; width: 148px; height: 148px; }
.share-qr-err { color: var(--text-3); font-size: 13px; padding: 60px 0; }
.share-qr-tip { margin-top: 8px; color: var(--text-3); font-size: 12px; }

.share-url {
    margin-top: 10px; margin-bottom: 0;
    text-align: center; color: var(--text-3); font-size: 11.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 420px) {
    .share-dialog { padding: 18px 14px 14px; }
    .share-item { width: 56px; }
    .si-icon { width: 38px; height: 38px; font-size: 17px; }
}