/* Vie 组件库：所有导入组件只消费 Vie 全局变量，不建立第二套主题/设置链。 */
:root {
  --vie-component-logo-color: var(--logo-color);
  --vie-component-shell-color: var(--vie-page-surface-strong);
  --vie-component-shell-scale: 1;
  --vie-component-shell-radius: 22px;
  --vie-component-shell-border: .5px solid color-mix(in srgb,var(--vie-component-shell-color) 74%,var(--vie-page-divider));
  --vie-component-shell-shadow: 0 8px 22px rgba(0,0,0,.075), inset 0 .5px 0 rgba(255,255,255,.62);
  --vie-component-shell-filter: blur(18px) saturate(118%);
  --vie-component-shell-surface: color-mix(in srgb,var(--vie-component-shell-color) 77%,transparent);
}
:root[data-vie-component-texture="flat"] { --vie-component-shell-filter:none; --vie-component-shell-surface:var(--vie-component-shell-color); --vie-component-shell-shadow:0 2px 8px rgba(0,0,0,.055); }
:root[data-vie-component-texture="translucent"] { --vie-component-shell-filter:blur(26px) saturate(124%); --vie-component-shell-surface:color-mix(in srgb,var(--vie-component-shell-color) 51%,transparent); --vie-component-shell-shadow:0 10px 26px rgba(0,0,0,.09),inset 0 .5px 0 rgba(255,255,255,.52); }
.desktop-component-appearance { margin:0 12px 8px; padding:10px; border:.5px solid var(--vie-page-divider); border-radius:16px; background:color-mix(in srgb,var(--vie-page-soft-surface) 80%,transparent); }
.desktop-component-appearance[hidden] { display:none; }
.desktop-component-appearance-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--vie-text-secondary); font-size:calc(10px * var(--vie-font-scale)); font-weight:650; }
.desktop-component-appearance-title button { width:27px; height:27px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:var(--vie-text-muted); background:var(--vie-page-surface); }
.desktop-component-appearance-title svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; }
.desktop-component-appearance-grid { display:grid; grid-template-columns:54px 54px minmax(92px,1fr) 92px; gap:8px; align-items:end; }
.desktop-component-appearance-grid label { min-width:0; display:flex; flex-direction:column; gap:5px; color:var(--vie-text-muted); font-size:calc(9px * var(--vie-font-scale)); }
.desktop-component-appearance-grid label > span { display:flex; justify-content:space-between; gap:4px; white-space:nowrap; }
.desktop-component-appearance-grid input[type="color"] { width:100%; height:31px; padding:3px; border:.5px solid var(--vie-page-divider); border-radius:10px; background:var(--vie-page-surface); appearance:none; -webkit-appearance:none; }
.desktop-component-appearance-grid input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.desktop-component-appearance-grid input[type="color"]::-webkit-color-swatch { border:0; border-radius:7px; }
.desktop-component-appearance-grid input[type="range"] { width:100%; height:31px; accent-color:var(--vie-component-logo-color); }
.desktop-component-appearance-grid select { width:100%; height:31px; padding:0 7px; border:.5px solid var(--vie-page-divider); border-radius:10px; color:var(--vie-text-primary); background:var(--vie-page-surface); font:inherit; font-size:calc(9px * var(--vie-font-scale)); }
@media (max-width:380px) { .desktop-component-appearance-grid { grid-template-columns:50px 50px minmax(80px,1fr); } .desktop-component-appearance-grid label:last-child { grid-column:1 / -1; } }

.desktop-layout-item[data-desktop-kind="component"] .vie-catalog-component { width:100%; height:100%; min-width:0; min-height:0; position:relative; color:var(--vie-text-primary); font-family:var(--vie-font-family); transform:scale(var(--vie-component-shell-scale)); transform-origin:center; }
.vie-catalog-shell { border:var(--vie-component-shell-border); background:var(--vie-component-shell-surface); box-shadow:var(--vie-component-shell-shadow); -webkit-backdrop-filter:var(--vie-component-shell-filter); backdrop-filter:var(--vie-component-shell-filter); }
.vie-catalog-component i { color:var(--vie-component-logo-color); }
.vie-catalog-muted { color:var(--vie-text-muted); }
.vie-catalog-component .default-avatar,.vie-catalog-component .default-image-placeholder { color:var(--vie-placeholder-glyph); overflow:hidden; }
.vie-catalog-component .default-avatar svg,.vie-catalog-component .default-image-placeholder svg { width:100%; height:100%; display:block; }
.vie-catalog-component .vie-image-placeholder-icon { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--vie-placeholder-glyph); }

.vie-catalog-profile-card { overflow:hidden; border-radius:30px; background:color-mix(in srgb,var(--vie-component-shell-color) 72%,transparent); border:var(--vie-component-shell-border); box-shadow:var(--vie-component-shell-shadow); -webkit-backdrop-filter:var(--vie-component-shell-filter); backdrop-filter:var(--vie-component-shell-filter); display:flex; flex-direction:column; align-items:center; padding:38% 12px 11px; text-align:center; }
.vie-catalog-profile-cover { position:absolute; inset:0 0 auto; height:43%; overflow:hidden; background:var(--vie-placeholder-bg); }
.vie-catalog-cover-image { width:100%; height:100%; position:relative; }
.vie-catalog-profile-avatar { position:absolute; top:27%; width:31%; aspect-ratio:1; border-radius:50%; border:2px solid color-mix(in srgb,var(--vie-component-shell-color) 82%,white); box-shadow:0 9px 22px rgba(0,0,0,.13); }
.vie-catalog-profile-card h3 { margin-top:14px; font-size:clamp(17px,5vw,22px); line-height:1.2; }
.vie-catalog-profile-card p { margin:3px 0; font-size:11px; }
.vie-catalog-profile-pill { margin-top:7px; padding:5px 10px; border-radius:999px; background:color-mix(in srgb,var(--vie-component-shell-color) 76%,transparent); font-size:10px; }
.vie-catalog-profile-sign { flex:1; display:flex; align-items:center; gap:4px; }
.vie-catalog-profile-actions { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.vie-catalog-profile-actions span { min-width:0; height:32px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:12px; background:color-mix(in srgb,var(--vie-component-shell-color) 66%,transparent); font-size:9px; }

.vie-catalog-weather-combo { display:grid; grid-template-rows:38% 1fr; gap:7px; }
.vie-catalog-weather-countdown { border-radius:999px; display:flex; align-items:center; gap:7px; padding:0 13px; font-size:11px; }
.vie-catalog-weather-countdown b { font-size:18px; margin-left:auto; }
.vie-catalog-weather-main { min-height:0; border-radius:22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 12px; }
.vie-catalog-weather-avatar { width:50px; height:50px; border-radius:50%; }
.vie-catalog-weather-main div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.vie-catalog-weather-main div strong { font-size:13px; white-space:nowrap; }
.vie-catalog-weather-main div small { overflow:hidden; color:var(--vie-text-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-weather-main > b { color:var(--vie-component-logo-color); font-size:28px; }

.vie-catalog-portrait { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.vie-catalog-portrait-avatar { width:78%; aspect-ratio:1; border-radius:50%; box-shadow:var(--vie-component-shell-shadow); }
.vie-catalog-quote { width:92%; min-height:26px; display:grid; place-items:center; padding:5px 7px; border-radius:999px; font-size:9px; text-align:center; }
.vie-catalog-clock { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.vie-catalog-clock > strong { font-size:clamp(18px,7vw,28px); letter-spacing:-.04em; }
.vie-catalog-calendar { width:100%; padding:8px 7px; border-radius:17px; text-align:center; }
.vie-catalog-calendar div { color:var(--vie-text-muted); font-size:7px; word-spacing:4px; }
.vie-catalog-calendar b { display:block; margin-top:7px; font-size:8px; word-spacing:4px; }
.vie-catalog-anniversary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.vie-catalog-couple { display:flex; justify-content:center; gap:6px; }
.vie-catalog-couple > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vie-catalog-couple > div > span { padding:3px 7px; border-radius:999px; font-size:8px; }
.vie-catalog-couple-avatar { width:48px; height:48px; border-radius:50%; }
.vie-catalog-days { padding:4px 13px; border-radius:999px; font-size:10px; }

.vie-catalog-photo-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-items:center; padding:3px; }
.vie-catalog-polaroid { height:94%; padding:6px 6px 17px; border-radius:3px; background:color-mix(in srgb,var(--vie-component-shell-color) 90%,white); box-shadow:0 5px 13px rgba(0,0,0,.12); transform:rotate(-2deg); }
.vie-catalog-polaroid:nth-child(2) { transform:rotate(2deg) translateY(2px); }
.vie-catalog-polaroid:nth-child(3) { transform:rotate(-1deg); }
.vie-catalog-polaroid > div { width:100%; height:100%; position:relative; }
.vie-catalog-mini-player { border-radius:24px; display:grid; grid-template-columns:42% 1fr; gap:8px; align-items:center; padding:10px; overflow:hidden; }
.vie-catalog-record,.vie-catalog-wide-record { aspect-ratio:1; border-radius:50%; padding:18%; background:radial-gradient(circle,var(--vie-text-primary) 0 12%,transparent 13% 28%,color-mix(in srgb,var(--vie-text-primary) 78%,transparent) 29% 100%); }
.vie-catalog-record-cover { width:100%; height:100%; position:relative; border-radius:50%; }
.vie-catalog-mini-copy { min-width:0; display:flex; flex-direction:column; gap:8px; }
.vie-catalog-mini-copy strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-mini-copy > div { display:flex; justify-content:space-between; color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-mini-controls { color:var(--vie-component-logo-color); font-size:12px; }

.vie-catalog-profile-editor { border-radius:24px; display:grid; grid-template-columns:30% 1fr; gap:12px; padding:12px; }
.vie-catalog-editor-left { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.vie-catalog-editor-avatar { width:64px; height:64px; border-radius:18px; }
.vie-catalog-editor-left span { padding:3px 7px; border-radius:999px; background:var(--vie-component-logo-color); color:#fff; font-size:7px; }
.vie-catalog-editor-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.vie-catalog-editor-copy h3 { font-size:12px; letter-spacing:.12em; }
.vie-catalog-editor-copy > div { min-width:0; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:6px; padding-bottom:5px; border-bottom:.5px dashed var(--vie-page-divider); }
.vie-catalog-editor-copy small { color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-editor-copy strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-social-profile { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 14px; }
.vie-catalog-social-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.vie-catalog-social-copy h3 { font-size:16px; }
.vie-catalog-social-copy p,.vie-catalog-social-copy > span { color:var(--vie-text-muted); font-size:9px; }
.vie-catalog-social-copy > div { display:flex; gap:6px; }
.vie-catalog-social-copy b { padding:5px 9px; border-radius:9px; font-size:8px; }
.vie-catalog-social-avatar { width:72px; height:72px; border-radius:50%; }
.vie-catalog-wide-player { border-radius:27px; display:grid; grid-template-columns:31% 1fr; gap:10px; align-items:center; padding:11px 15px; overflow:hidden; }
.vie-catalog-wide-record { width:76px; max-width:100%; }
.vie-catalog-wide-copy { min-width:0; display:flex; flex-direction:column; gap:7px; }
.vie-catalog-wide-copy > strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-progress { height:3px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--vie-text-muted) 28%,transparent); }
.vie-catalog-progress i { width:58%; height:100%; display:block; background:var(--vie-component-logo-color); }
.vie-catalog-wide-copy small,.vie-catalog-wide-copy > div:last-child { display:flex; justify-content:space-between; font-size:8px; }
.vie-catalog-wide-copy > div:last-child { color:var(--vie-component-logo-color); font-size:13px; }

.vie-catalog-note-card { border-radius:20px; padding:9px; display:flex; flex-direction:column; gap:7px; }
.vie-catalog-note-top { display:grid; grid-template-columns:38px 1fr 34px; align-items:center; gap:6px; }
.vie-catalog-note-avatar { width:38px; height:38px; border-radius:50%; }
.vie-catalog-note-photo { width:34px; height:34px; position:relative; border-radius:6px; }
.vie-catalog-note-top strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-note-meta { color:var(--vie-text-muted); font-size:8px; }
.vie-catalog-note-card p { margin-top:auto; padding-top:6px; border-top:.5px dashed var(--vie-page-divider); font-size:9px; line-height:1.4; }
.vie-catalog-deleted-profile { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; gap:8px; padding:10px 13px; }
.vie-catalog-deleted-user { display:flex; align-items:center; gap:8px; }
.vie-catalog-deleted-avatar { width:55px; height:55px; border-radius:18px; }
.vie-catalog-deleted-user > div { display:flex; flex-direction:column; gap:4px; }
.vie-catalog-deleted-user strong { font-size:13px; }
.vie-catalog-deleted-user small { color:var(--vie-text-muted); font-size:8px; }
.vie-catalog-deleted-date { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--vie-text-muted); font-size:8px; }
.vie-catalog-deleted-date b { color:var(--vie-text-primary); font-size:14px; }
.vie-catalog-deleted-profile > p { grid-column:1 / -1; align-self:end; font-size:10px; line-height:1.35; }

.vie-catalog-tool-browser { display:grid; grid-template-columns:34% 1fr; gap:8px; }
.vie-catalog-mini-app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.vie-catalog-mini-app-grid > span { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:15px; }
.vie-catalog-mini-app-grid i { font-size:16px; } /* page-five middle-left icons intentionally reduced */
.vie-catalog-mini-app-grid small { max-width:100%; overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-browser { min-width:0; border-radius:17px; overflow:hidden; display:grid; grid-template-rows:23px 28px 1fr; }
.vie-catalog-browser header { display:flex; align-items:center; gap:5px; padding:0 7px; border-bottom:.5px solid var(--vie-page-divider); font-size:7px; }
.vie-catalog-browser header i { margin-left:auto; color:var(--vie-text-muted); font-style:normal; }
.vie-catalog-browser-bar { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; padding:0 7px; border-bottom:.5px solid var(--vie-page-divider); font-size:7px; }
.vie-catalog-browser-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-browser-image { width:100%; height:100%; position:relative; }
.vie-catalog-feed { border-radius:20px; padding:8px; overflow:hidden; }
.vie-catalog-feed header { height:27px; display:flex; align-items:center; gap:6px; border-bottom:.5px solid var(--vie-page-divider); font-size:8px; }
.vie-catalog-feed header > span { margin-left:auto; color:var(--vie-text-muted); }
.vie-catalog-feed-avatar { width:21px; height:21px; border-radius:50%; }
.vie-catalog-feed-body { height:calc(100% - 27px); display:grid; grid-template-columns:48% 1fr; gap:8px; padding-top:7px; }
.vie-catalog-feed-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:3px; }
.vie-catalog-feed-thumb { width:100%; height:100%; position:relative; border-radius:3px; }
.vie-catalog-feed-body > div:last-child { display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.vie-catalog-feed-body p { font-size:8px; line-height:1.5; }
.vie-catalog-feed-body small { color:var(--vie-text-muted); font-size:7px; }

.vie-catalog-battery { display:grid; grid-template-columns:1fr 54px; gap:9px; align-items:center; padding:5px 11%; }
.vie-catalog-battery > div { height:55px; border-radius:999px; display:flex; flex-direction:column; justify-content:center; padding:0 18px; }
.vie-catalog-battery > div strong { font-size:16px; }
.vie-catalog-battery > div small { color:var(--vie-text-muted); font-size:8px; }
.vie-catalog-battery .vie-catalog-battery-heart { padding:0; display:grid; place-items:center; border-radius:50%; font-size:20px; }
.vie-catalog-stacked-weather > i { position:absolute; left:5%; right:5%; height:76%; top:3%; border-radius:999px; opacity:.34; transform:translateY(-8px) scale(.88); }
.vie-catalog-stacked-weather > i:nth-child(2) { opacity:.58; transform:translateY(-4px) scale(.94); }
.vie-catalog-stacked-weather > div { position:absolute; inset:8px 0 0; border-radius:999px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:1fr auto; align-items:center; gap:0 10px; padding:8px 15px; }
.vie-catalog-stacked-avatar { grid-row:1 / 3; width:55px; height:55px; border-radius:50%; }
.vie-catalog-stacked-weather > div > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.vie-catalog-stacked-weather > div strong { font-size:13px; }
.vie-catalog-stacked-weather > div small,.vie-catalog-stacked-weather > div span { color:var(--vie-text-muted); font-size:8px; }
.vie-catalog-stacked-weather > div > b { grid-row:1 / 2; color:var(--vie-component-logo-color); font-size:28px; }
.vie-catalog-stacked-weather > div > span { grid-column:3; white-space:nowrap; }
.vie-catalog-media-square { display:flex; flex-direction:column; gap:6px; }
.vie-catalog-media-image { flex:1; min-height:0; position:relative; border-radius:20px; border:var(--vie-component-shell-border); box-shadow:var(--vie-component-shell-shadow); }
.vie-catalog-media-square strong { font-size:9px; text-align:center; }
.vie-catalog-avatar-orbit { display:flex; flex-direction:column; align-items:center; gap:6px; }
.vie-catalog-avatar-orbit > strong { font-size:9px; }
.vie-catalog-avatar-orbit > div { position:relative; flex:1; width:100%; }
.vie-catalog-orbit-avatar { position:absolute; left:13%; top:4%; width:70%; aspect-ratio:1; border-radius:50%; padding:5px; border:var(--vie-component-shell-border); }
.vie-catalog-avatar-orbit > div > span { position:absolute; right:3%; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; font-size:12px; }
.vie-catalog-avatar-orbit > div > span:nth-of-type(1) { top:19%; }
.vie-catalog-avatar-orbit > div > span:nth-of-type(2) { bottom:9%; }
.vie-catalog-call-card { display:flex; flex-direction:column; gap:6px; }
.vie-catalog-call-image { flex:1; min-height:0; position:relative; border-radius:18px; border:var(--vie-component-shell-border); box-shadow:var(--vie-component-shell-shadow); }
.vie-catalog-call-card > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:9px; }
.vie-catalog-call-card > div:last-child > span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; }
.vie-catalog-four-tags { isolation:isolate; }
.vie-catalog-tags-avatar { position:absolute; left:50%; top:43%; width:74px; height:74px; transform:translate(-50%,-50%); border-radius:50%; z-index:2; }
.vie-catalog-four-tags > span { position:absolute; width:86px; height:34px; display:flex; align-items:center; gap:5px; padding:0 9px; border-radius:999px; overflow:hidden; font-size:8px; white-space:nowrap; }
.vie-catalog-four-tags .tag-a { right:calc(50% + 42px); top:10%; }
.vie-catalog-four-tags .tag-b { left:calc(50% + 42px); top:10%; }
.vie-catalog-four-tags .tag-c { right:calc(50% + 42px); bottom:20%; }
.vie-catalog-four-tags .tag-d { left:calc(50% + 42px); bottom:20%; }
.vie-catalog-four-tags > small { position:absolute; left:0; right:0; bottom:2px; text-align:center; font-size:8px; }

.vie-catalog-switcher { isolation:isolate; cursor:pointer; }
.vie-catalog-switch-card { position:absolute; inset:0; overflow:hidden; border-radius:24px; opacity:.55; transform:translateY(-6px) scale(.975); transition:transform .36s cubic-bezier(.2,.78,.2,1),opacity .28s ease,filter .28s ease; filter:brightness(.88); pointer-events:none; }
.vie-catalog-switch-card.is-active { z-index:3; opacity:1; transform:none; filter:none; pointer-events:auto; }
.vie-catalog-switch-memo { display:grid; grid-template-columns:34% 1fr; gap:8px; padding:10px; }
.vie-catalog-switch-couple { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; }
.vie-catalog-switch-avatar { width:38px; height:38px; border-radius:50%; }
.vie-catalog-switch-couple b { color:var(--vie-text-muted); font-size:9px; }
.vie-catalog-switch-memo-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.vie-catalog-switch-memo-copy header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:5px; padding:4px 6px; border-radius:999px; background:color-mix(in srgb,var(--vie-component-shell-color) 44%,transparent); font-size:7px; }
.vie-catalog-switch-memo-copy p { display:grid; grid-template-columns:1fr auto; gap:4px; padding:4px 0; border-bottom:.5px solid var(--vie-page-divider); }
.vie-catalog-switch-memo-copy strong { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-switch-memo-copy small { color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-switch-weather { padding:10px 13px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; }
.vie-catalog-switch-weather > div:first-child { display:flex; align-items:center; gap:7px; }
.vie-catalog-switch-weather > div:first-child strong { font-size:28px; }
.vie-catalog-switch-weather > p { color:var(--vie-text-muted); font-size:8px; text-align:right; line-height:1.6; }
.vie-catalog-forecast { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:4px; }
.vie-catalog-forecast span { text-align:center; color:var(--vie-text-muted); font-size:7px; line-height:1.5; }
.vie-catalog-forecast b { display:block; color:var(--vie-text-primary); }
.vie-catalog-switch-toggle { position:absolute; right:6px; bottom:6px; z-index:5; width:27px; height:27px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:var(--vie-component-logo-color); background:color-mix(in srgb,var(--vie-component-shell-color) 72%,transparent); box-shadow:0 3px 10px rgba(0,0,0,.09); }
.vie-catalog-switch-toggle i { font-size:11px; }


/* 整体组合组件：保留来源页面中的完整左右结构，不拆成内部碎片。 */
.vie-catalog-split-composite { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.vie-catalog-composite-app-grid { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:7px; }
.vie-catalog-composite-app-grid > span { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:19px; }
.vie-catalog-composite-app-grid i { font-size:16px; }
.vie-catalog-composite-app-grid small { max-width:100%; overflow:hidden; color:var(--vie-text-secondary); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-companion-panel { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.vie-catalog-companion-pair { display:flex; align-items:center; justify-content:center; gap:6px; }
.vie-catalog-companion-pair > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vie-catalog-companion-pair > div > span { padding:3px 7px; border-radius:999px; font-size:7px; }
.vie-catalog-composite-avatar { width:48px; height:48px; border-radius:50%; }
.vie-catalog-companion-panel > strong { padding:4px 12px; border-radius:999px; font-size:9px; }
.vie-catalog-diary-panel { min-width:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; border-radius:21px; }
.vie-catalog-diary-image { min-height:0; position:relative; }
.vie-catalog-diary-panel > div:last-child { min-width:0; padding:7px 9px; display:flex; flex-direction:column; gap:2px; }
.vie-catalog-diary-panel strong,.vie-catalog-diary-panel small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-diary-panel strong { font-size:9px; }
.vie-catalog-diary-panel small { color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-composite-player { min-width:0; display:grid; grid-template-columns:46% 1fr; align-items:center; gap:7px; padding:8px; overflow:hidden; border-radius:21px; }
.vie-catalog-composite-player > div:last-child { min-width:0; display:flex; flex-direction:column; gap:6px; }
.vie-catalog-composite-player strong,.vie-catalog-composite-player small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-composite-player strong { font-size:10px; }
.vie-catalog-composite-player small { color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-composite-player span { display:flex; justify-content:space-between; font-size:10px; }
.vie-catalog-profile-weather-card { min-width:0; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr auto; gap:6px 8px; align-items:center; padding:9px; overflow:hidden; border-radius:21px; }
.vie-catalog-profile-weather-avatar { width:44px; height:44px; border-radius:50%; }
.vie-catalog-profile-weather-card > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.vie-catalog-profile-weather-card strong { font-size:10px; }
.vie-catalog-profile-weather-card small { color:var(--vie-text-muted); font-size:7px; }
.vie-catalog-profile-weather-card p { margin-top:3px; overflow:hidden; font-size:7px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.vie-catalog-profile-weather-card aside { grid-column:1 / -1; display:flex; align-items:end; justify-content:space-between; }
.vie-catalog-profile-weather-card aside b { color:var(--vie-component-logo-color); font-size:19px; }
.vie-catalog-dual-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.vie-catalog-dual-media > article,.vie-catalog-composite-single-media { min-width:0; display:grid; grid-template-rows:minmax(0,1fr) 25px; overflow:hidden; border-radius:21px; }
.vie-catalog-composite-media-image { min-height:0; position:relative; }
.vie-catalog-dual-media > article > strong,.vie-catalog-composite-single-media > strong { min-width:0; align-self:center; padding:0 8px; overflow:hidden; font-size:8px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-composite-orbit { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.vie-catalog-composite-orbit > strong { font-size:9px; }
.vie-catalog-composite-orbit > div { position:relative; width:84px; height:84px; }
.vie-catalog-composite-orbit-avatar { width:72px; height:72px; border-radius:50%; }
.vie-catalog-composite-orbit > div > span { position:absolute; right:0; width:29px; height:29px; display:grid; place-items:center; border-radius:50%; font-size:11px; }
.vie-catalog-composite-orbit > div > span:nth-of-type(1) { top:5px; }
.vie-catalog-composite-orbit > div > span:nth-of-type(2) { bottom:3px; }
.vie-catalog-composite-notice { grid-template-rows:minmax(0,1fr) 29px; }
.vie-catalog-composite-notice > div:last-child { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:0 8px; }
.vie-catalog-composite-notice > div:last-child strong { overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.vie-catalog-composite-notice > div:last-child span { width:22px; height:22px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:color-mix(in srgb,var(--vie-component-shell-color) 70%,transparent); font-size:9px; }

/* Instagram 使用 Vie 固定全局页面与现有主题变量。 */
.vie-instagram-app { --vie-instagram-surface:var(--vie-page-background-color); background:var(--vie-instagram-surface); }
.vie-instagram-navbar { flex:0 0 auto; padding-inline:var(--app-inline-inset); border-bottom:.5px solid var(--vie-page-divider); background:color-mix(in srgb,var(--vie-page-surface-strong) 94%,transparent); }
.vie-instagram-navbar > div { display:flex; gap:5px; }
.vie-instagram-navbar > div button { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--vie-text-primary); background:transparent; font-size:19px; }
.vie-instagram-content { min-height:0; flex:1; position:relative; overflow:hidden; }
.vie-instagram-tab { position:absolute; inset:0; display:none; overflow-y:auto; padding-bottom:calc(64px + var(--vie-safe-bottom)); scrollbar-width:none; }
.vie-instagram-tab::-webkit-scrollbar { display:none; }
.vie-instagram-tab.is-active { display:block; }
.vie-instagram-stories { display:flex; gap:14px; padding:12px var(--app-inline-inset); overflow-x:auto; scrollbar-width:none; }
.vie-instagram-stories button { flex:0 0 62px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; border:0; color:var(--vie-text-primary); background:transparent; font:inherit; }
.vie-instagram-story { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--vie-placeholder-bg); border:2px solid var(--vie-component-logo-color); box-shadow:inset 0 0 0 3px var(--vie-instagram-surface); }
.vie-instagram-story.is-self { border-color:var(--vie-page-divider); }
.vie-instagram-story.is-self i { width:17px; height:17px; display:grid; place-items:center; align-self:end; justify-self:end; margin:0 -1px -1px 0; border-radius:50%; color:#fff; background:var(--logo-color); font-size:9px; }
.vie-instagram-stories small { max-width:62px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.vie-instagram-post { border-top:.5px solid var(--vie-page-divider); border-bottom:.5px solid var(--vie-page-divider); background:var(--vie-page-surface); }
.vie-instagram-post header { height:48px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:0 var(--app-inline-inset); font-size:11px; }
.vie-instagram-avatar { width:30px; height:30px; border-radius:50%; background:var(--vie-placeholder-bg); border:1px solid var(--vie-page-divider); }
.vie-instagram-post-image { position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; color:var(--vie-placeholder-glyph); background:var(--vie-placeholder-bg); }
.vie-instagram-post-image svg { width:100%; height:100%; }
.vie-instagram-post-image > i { position:absolute; font-size:26px; }
.vie-instagram-actions { display:flex; align-items:center; justify-content:space-between; padding:11px var(--app-inline-inset) 7px; font-size:21px; }
.vie-instagram-actions span { display:flex; gap:15px; }
.vie-instagram-post > p { padding:0 var(--app-inline-inset) 13px; font-size:11px; line-height:1.5; }
.vie-instagram-search { height:38px; margin:10px var(--app-inline-inset); padding:0 12px; display:flex; align-items:center; gap:8px; border-radius:11px; color:var(--vie-text-muted); background:var(--vie-page-soft-surface); }
.vie-instagram-search input { min-width:0; flex:1; border:0; color:var(--vie-text-primary); background:transparent; font:inherit; font-size:12px; user-select:text; }
.vie-instagram-explore,.vie-instagram-profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.vie-instagram-explore > div,.vie-instagram-profile-grid > div { aspect-ratio:1; overflow:hidden; background:var(--vie-placeholder-bg); }
.vie-instagram-explore svg,.vie-instagram-profile-grid svg { width:100%; height:100%; display:block; }
.vie-instagram-empty { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:28px; text-align:center; }
.vie-instagram-empty > i { font-size:54px; }
.vie-instagram-empty h2 { font-size:20px; }
.vie-instagram-empty p { color:var(--vie-text-muted); font-size:12px; }
.vie-instagram-empty button,.vie-instagram-profile-copy button { min-height:36px; padding:0 15px; border:0; border-radius:10px; color:#fff; background:var(--logo-color); font:inherit; font-size:11px; font-weight:650; }
.vie-instagram-reel { position:relative; height:100%; overflow:hidden; color:#fff; background:#171719; }
.vie-instagram-reel-placeholder { position:absolute; inset:0; opacity:.45; }
.vie-instagram-reel-placeholder svg { width:100%; height:100%; }
.vie-instagram-reel-copy { position:absolute; left:18px; right:70px; bottom:28px; }
.vie-instagram-reel-copy p { margin-top:5px; font-size:11px; }
.vie-instagram-reel aside { position:absolute; right:18px; bottom:27px; display:flex; flex-direction:column; gap:22px; font-size:23px; }
.vie-instagram-profile-head { display:grid; grid-template-columns:86px repeat(3,1fr); align-items:center; padding:18px var(--app-inline-inset) 10px; }
.vie-instagram-profile-avatar { width:76px; height:76px; overflow:hidden; border-radius:50%; color:var(--vie-placeholder-glyph); background:var(--vie-placeholder-bg); }
.vie-instagram-profile-avatar svg { width:100%; height:100%; }
.vie-instagram-profile-head > div { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; }
.vie-instagram-profile-head > div b { font-size:16px; }
.vie-instagram-profile-copy { padding:0 var(--app-inline-inset) 15px; font-size:11px; }
.vie-instagram-profile-copy p { margin:4px 0 10px; color:var(--vie-text-secondary); }
.vie-instagram-profile-copy button { width:100%; color:var(--vie-text-primary); background:var(--vie-page-soft-surface); }
.vie-instagram-bottom { position:absolute; left:0; right:0; bottom:0; height:calc(55px + var(--vie-safe-bottom)); display:flex; align-items:flex-start; justify-content:space-around; padding-top:10px; border-top:.5px solid var(--vie-page-divider); background:color-mix(in srgb,var(--vie-page-surface-strong) 94%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.vie-instagram-bottom button { width:44px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:12px; color:var(--vie-text-muted); background:transparent; font-size:21px; }
.vie-instagram-bottom button.is-active { color:var(--vie-text-primary); }
.app-icon[data-icon="instagram"] > i { position:relative; z-index:2; display:block; color:currentColor; font-size:27.5px; line-height:1; transform:scale(.96); transform-origin:center; }