/* 分享面板 (js/share-panel.js): the panel, the card in a chat, the big card. Everything is under .sp-root (and .sp-bubble for the bubble), so no other App's styles are touched. */
.sp-root{font-family:var(--font-body);color:var(--ink)}
.sp-ov{position:fixed;inset:0;z-index:530;display:flex;align-items:center;justify-content:center;padding:max(16px,var(--sat)) 16px max(16px,var(--sab)) 16px;background:rgba(40,55,80,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:spFade .16s ease-out}
.sp-ov.sp-closing{opacity:0;transition:opacity .15s}
@keyframes spFade{from{opacity:0}to{opacity:1}}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-ov{background:rgba(0,0,0,.5)}}
:root[data-theme="dark"] .sp-ov{background:rgba(0,0,0,.5)}
.sp-viewbox{position:relative;width:100%;max-width:340px;text-align:center}
.sp-dlg,.sp-view .sp-viewbox{position:relative;width:100%;max-width:360px;max-height:calc(100dvh - 32px);overflow-y:auto;scrollbar-width:none;border-radius:28px;padding:20px 18px 14px;background:rgba(255,255,255,.9);border:1px solid var(--border);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);box-shadow:0 30px 60px -20px rgba(40,60,95,.5)}
.sp-dlg::-webkit-scrollbar,.sp-view .sp-viewbox::-webkit-scrollbar{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-dlg,:root:not([data-theme="light"]) .sp-view .sp-viewbox{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.1)}}
:root[data-theme="dark"] .sp-dlg,:root[data-theme="dark"] .sp-view .sp-viewbox{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:rgba(255,255,255,.1)}
.sp-dlg h3{margin:0;font:600 17px var(--font-display);text-align:center}
.sp-sub{margin:4px 0 0;text-align:center;font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-stage{display:flex;align-items:center;justify-content:center;gap:2px;margin:14px -6px 4px}
.sp-prev{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;min-height:120px;touch-action:pan-y}
.sp-canvas{display:block;max-width:100%;height:auto!important;border-radius:18px;box-shadow:0 18px 36px -20px rgba(0,0,0,.5)}
.sp-nav{flex:0 0 28px;height:44px;border:0;background:none;color:var(--ink2);display:grid;place-items:center;cursor:pointer;padding:0;border-radius:10px}
.sp-nav svg{width:18px;height:18px}
.sp-nav:active{opacity:.5}
.sp-ck{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--ink2)}
.sp-ck input{accent-color:var(--pri-deep,#5F7893)}
.sp-seg{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0 0}
.sp-seg button{border:.5px solid var(--border);font:inherit;font-size:12px;padding:5px 12px;border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink2);cursor:pointer}
.sp-seg button.sp-on{background:color-mix(in srgb,var(--pri) 18%,transparent);color:var(--ink);border-color:color-mix(in srgb,var(--pri) 40%,transparent)}
.sp-dest{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.sp-dest button{border:0;background:none;font:inherit;font-size:12px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0;cursor:pointer}
.sp-dest button span{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 80%,transparent);border:.5px solid var(--border)}
.sp-dest svg{width:22px;height:22px;color:var(--ink)}
.sp-btns{display:flex;gap:10px;justify-content:center;margin-top:12px}
.sp-btn{flex:1;max-width:160px;border:.5px solid var(--border);font:inherit;font-size:14px;padding:10px 14px;border-radius:16px;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink);cursor:pointer}
.sp-btn.sp-pri{background:var(--ink);color:var(--surface);border-color:transparent}
.sp-list{display:flex;flex-direction:column;gap:2px;max-height:min(320px,48dvh);overflow-y:auto;scrollbar-width:none;margin:12px -4px 0}
.sp-list::-webkit-scrollbar{display:none}
.sp-pick{display:flex;align-items:center;gap:12px;border:0;background:none;font:inherit;color:var(--ink);padding:8px 6px;border-radius:14px;cursor:pointer;text-align:left}
.sp-pick:active{background:color-mix(in srgb,var(--pri) 12%,transparent)}
.sp-pick b{font-weight:500;font-size:14px}
.sp-av{width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex-shrink:0;background:var(--pri-pale)}
.sp-av img{width:100%;height:100%;object-fit:cover}
.sp-hint{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--ink2)}
.sp-toast{position:absolute;left:50%;bottom:64px;transform:translate(-50%,6px);opacity:0;padding:8px 14px;border-radius:14px;font-size:12.5px;background:var(--ink);color:var(--surface);pointer-events:none;white-space:nowrap;transition:opacity .2s,transform .2s}
.sp-toast.sp-show{opacity:.92;transform:translate(-50%,0)}
.sp-flash{position:fixed;left:50%;bottom:calc(var(--sab) + 88px);transform:translate(-50%,6px);opacity:0;z-index:540;padding:9px 16px;border-radius:16px;font-size:13px;background:var(--ink);color:var(--surface);pointer-events:none;transition:opacity .25s,transform .25s}
.sp-flash.sp-show{opacity:.92;transform:translate(-50%,0)}
.sp-viewimg{display:block;width:100%;height:auto;border-radius:14px;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.sp-big .sp-btns{flex-wrap:wrap;margin-top:16px}
.sp-big .sp-btn{max-width:none;flex:0 1 auto}
.sp-bubble{display:inline-block;max-width:220px;cursor:pointer;line-height:0}
.sp-bubble .sp-canvas.sp-thumb{box-shadow:0 8px 20px -12px rgba(0,0,0,.5);border-radius:14px}
.sp-ph{display:block;width:220px;height:130px;border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.sp-plain{font-size:13px;line-height:1.6;white-space:pre-line}

/* 阅读 9b: more places to send the card to (信息 · 朋友圈 · Z · 论坛 · 保存图片), and the card inside a post */
.sp-dest{grid-template-columns:repeat(3,1fr);row-gap:12px}
.sp-d{display:flex;flex-direction:column;align-items:center;min-width:0}
.sp-d>small{font-size:10.5px;line-height:1.35;color:var(--ink2);text-align:center;margin-top:-2px;padding:0 2px}
.sp-postcard{margin:8px 0}