/* ==========================================
 1. iOS 四列网格与唯一间距系统
 ========================================== */
 :root {
 --pad-x: 24px;
 --app-inline-inset: clamp(14px, 4.6vw, 24px);
 /* 桌面安全内容矩形内只保留一套紧凑边缘间距；安全区本身已经完成避让，
    此处仅留 4px 光学缓冲，避免再次制造大块空白。 */
 --desktop-edge-gap: 4px;
 --dock-height: calc(var(--icon-size) + 32px);
 /* Dock、分页点与搜索之间采用紧凑的 4px 几何间距。 */
 --dock-stack-gap: 4px;
 --pagination-dot-size: 7px;
 --search-pill-height: 26px;
 --dock-bottom-inset: var(--desktop-edge-gap);
 --pagination-bottom-inset: calc(
 var(--dock-bottom-inset) + var(--dock-height) + var(--dock-stack-gap)
 );
 --search-bottom-inset: calc(
 var(--pagination-bottom-inset) + var(--pagination-dot-size) + var(--dock-stack-gap)
 );
 /* 应用页导航保留原有 18px 内容间距，避免桌面校准牵动内部页面。 */
 --app-page-top-inset: 18px;
 --row-gap: 15px; /* 所有纵向行距唯一值 */
 --icon-size: 60px;
 --icon-label-gap: 10px;
 --icon-label-height: 14px;
 --component-bottom-reserve: 20px;
 /* 第一页图标排版是唯一正确基准：60px 图标 + 10px 名称间隔 + 14px 名称行。 */
 --profile-card-height: clamp(300px, calc((100vw - (var(--pad-x) * 2)) * 0.86), 330px);
 --app-cell-height: calc(
 var(--icon-size) +
 var(--icon-label-gap) +
 var(--icon-label-height)
 );
 --first-page-grid-height: calc(
 (var(--app-cell-height) * 2) +
 var(--row-gap)
 );
 --desktop-grid-height: calc(
 var(--profile-card-height) +
 var(--component-bottom-reserve) +
 var(--row-gap) +
 var(--first-page-grid-height)
 );
 /* 第二页应用区域不得再被三等分高度压缩；直接复用第一页 2×2 应用网格真实高度。 */
 --page-two-app-grid-height: var(--first-page-grid-height);
 /*
 第二页总高度必须直接回算自第一页的唯一桌面总高度：
 顶部 4×2 = 第一页总高度 - 两个 2×2 应用区 - 两道 15px 行距。
 禁止再把第二页三段平均分配后，又额外塞入两个完整应用区。
 */
 --page-two-top-block-height: calc(
 var(--desktop-grid-height)
 - var(--page-two-app-grid-height)
 - var(--page-two-app-grid-height)
 - var(--row-gap)
 - var(--row-gap)
 );
 --logo-color: #cbcbcb;
 --badge-divider-color: rgba(85, 85, 85, 0.42);
 --theme-gray: var(--logo-color);
 --sidra-nav-icon-color: #8f8f95;
 --sidra-page-background-color: #f6f6f3;
 --sidra-page-wallpaper-image: none;
 --sidra-page-wallpaper-position: center;
 --sidra-page-wallpaper-size: cover;
 --sidra-page-wallpaper-repeat: no-repeat;
 --sidra-page-surface: rgba(255,255,255,.84);
 --sidra-page-surface-strong: rgba(255,255,255,.92);
 --sidra-page-soft-surface: rgba(238,238,241,.80);
 --sidra-page-divider: rgba(203,203,203,.52);
 --sidra-page-divider-soft: rgba(203,203,203,.28);
 --sidra-page-divider-strong: rgba(203,203,203,.38);
 --sidra-page-icon-color: var(--sidra-nav-icon-color);
 --app-icon-shadow: 0 5px 14px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.05);
 /* 所有提示、确认与输入弹窗只读取这一套外遮罩参数。
    适度压暗并轻柔虚化，避免厚重油腻，也不退化成近乎透明。 */
 --modal-backdrop-color: rgba(24, 24, 26, 0.17);
 --modal-backdrop-filter: blur(4px) saturate(106%);
 --modal-surface-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);

 /* 高级质感变量 */
 --soft-glass-blur: blur(10px) saturate(130%);
 --glass-border: 0.5px solid rgba(255, 255, 255, 0.7);
 
 --radius-icon: 25%; 
 --radius-widget: 32px;
 }

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
 }
 button, a, input, textarea, select, label, [role="button"] {
 -webkit-tap-highlight-color: transparent;
 }

 html,
 body {
 width: 100%;
 height: 100%;
 min-width: 0;
 min-height: 0;
 margin: 0;
 overflow: hidden;
 overscroll-behavior: none;
 background: #f6f6f3;
 color-scheme: light;
 }
 body {
 position: relative;
 touch-action: pan-x pan-y;
 -webkit-text-size-adjust: 100%;
 text-size-adjust: 100%;
 font-family: -apple-system, BlinkMacSystemFont,"SF Pro Text","Helvetica Neue", sans-serif;
 color: #111;
 }

 /*
 唯一根链：iPhone 当前页面视口 → html/body 100% → absolute inset:0。
 根尺寸不读取任何 JavaScript 视口测量值，也不写入像素高度，
 不按机型、方向、状态栏或键盘状态切换另一套尺寸算法。
 */
 .sidra-viewport {
 position: absolute;
 inset: 0;
 width: auto;
 height: auto;
 min-width: 0;
 min-height: 0;
 overflow: hidden;
 overscroll-behavior: none;
 isolation: isolate;
 background: #f6f6f3;
 }

 /*
 iPhone 安全区只在这一层收口一次。桌面、Dock、分页和设置页均使用
 同一个安全内容矩形，安全区不参与根高度，也不会被多个子层重复相加。
 */
 .sidra-stage {
 position: absolute;
 top: env(safe-area-inset-top, 0px);
 right: env(safe-area-inset-right, 0px);
 bottom: env(safe-area-inset-bottom, 0px);
 left: env(safe-area-inset-left, 0px);
 min-width: 0;
 min-height: 0;
 overflow: hidden;
 isolation: isolate;
 }

 /* 唯一星星装饰层 */
 .star-field {
 position: absolute; inset: 0; overflow: hidden;
 pointer-events: none; z-index: 0;
 }
 .star {
 position: absolute;
 left: var(--star-x); top: var(--star-y);
 width: var(--star-w); height: var(--star-h);
 background: var(--logo-color);
 -webkit-clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 38.2%, 69.1% 59%, 79.4% 100%, 50% 76%, 20.6% 100%, 30.9% 59%, 0% 38.2%, 38.2% 35.4%);
 clip-path: polygon(50% 0%, 61.8% 35.4%, 100% 38.2%, 69.1% 59%, 79.4% 100%, 50% 76%, 20.6% 100%, 30.9% 59%, 0% 38.2%, 38.2% 35.4%);
 transform: rotate(var(--star-rotate));
 transform-origin: center;
 }

 .sym { font-family:"Apple Symbols","Segoe UI Symbol", sans-serif; font-weight: normal; }

 /* ==========================================
 2. 顶栏、底栏与全局控件
 ========================================== */

 .screen { width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative; overflow: hidden; z-index: 1; }
 .slider { display: flex; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1); will-change: transform; }
 .page {
 width: 100%; min-width: 100%; flex: 0 0 100%; height: 100%;
 padding: var(--desktop-edge-gap) var(--pad-x) 0 var(--pad-x);
 display: flex; flex-direction: column; gap: var(--row-gap);
 }
 .page-two > .top-widget-wrap-p2 {
 flex: 0 0 var(--page-two-top-block-height);
 height: var(--page-two-top-block-height);
 min-height: 0;
 }
 .page-two > .grid-row {
 flex: 0 0 var(--page-two-app-grid-height);
 height: var(--page-two-app-grid-height);
 min-height: 0;
 }

 .search-pill {
 position: absolute; bottom: var(--search-bottom-inset); left: 50%; transform: translateX(-50%);
 width: 70px; height: var(--search-pill-height); border-radius: calc(var(--search-pill-height) / 2);
 background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.48));
 border: var(--glass-border); box-shadow: 0 2px 10px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.55);
 display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 11px; color: #555; z-index: 10;
 }
 .pagination { position: absolute; bottom: var(--pagination-bottom-inset); width: 100%; display: flex; justify-content: center; gap: 8px; z-index: 10; }
 .dot { width: var(--pagination-dot-size); height: var(--pagination-dot-size); border-radius: 50%; background: rgba(255,255,255,0.4); transition: 0.3s; }
 .dot.active { background: #fff; transform: scale(1.1); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

 .dock {
 position: absolute; bottom: var(--dock-bottom-inset); left: 50%; transform: translateX(-50%);
 width: calc(100% - 24px); height: var(--dock-height); border-radius: 36px;
 background: rgba(255, 255, 255, 0.35); backdrop-filter: var(--soft-glass-blur); -webkit-backdrop-filter: var(--soft-glass-blur);
 border: var(--glass-border); box-shadow: var(--app-icon-shadow);
 display: flex; justify-content: space-evenly; align-items: center; z-index: 10;
 }

 /* ==========================================
 3. 图标与网格系统
 ========================================== */
 /* 四列共用同一条水平轨道：图标内间隔与两个 2×2 模块之间的间隔完全一致 */
 .grid-row {
 display: grid;
 grid-template-columns: repeat(4, var(--icon-size));
 justify-content: space-between;
 align-items: start;
 width: 100%;
 }
 .grid-row > .grid-2x2,
 .grid-row > .widget-2x2-wrap {
 grid-column: span 2;
 width: 100%;
 min-width: 0;
 }
 .page:not(.page-two) .grid-row {
 min-height: var(--first-page-grid-height);
 align-items: stretch;
 }
 .page:not(.page-two) .grid-row > .grid-2x2,
 .page:not(.page-two) .grid-row > .widget-2x2-wrap {
 height: var(--first-page-grid-height);
 }
 .page:not(.page-two) .grid-row > .widget-2x2-wrap {
 justify-content: center;
 padding-bottom: var(--component-bottom-reserve);
 }
 .grid-2x2 {
 display: grid;
 grid-template-columns: repeat(2, var(--icon-size));
 justify-content: space-between;
 align-content: start;
 row-gap: var(--row-gap);
 width: 100%;
 height: auto;
 }

 /* 第二页应用区域直接复用第一页的应用单元高度与 15px 行距。 */
 .page-two .grid-row {
 align-items: stretch;
 }
 .page-two .grid-row > .grid-2x2,
 .page-two .grid-row > .widget-2x2-wrap {
 height: 100%;
 min-height: 0;
 }
 .page-two .grid-2x2 {
 min-height: 0;
 grid-template-rows: repeat(2, var(--app-cell-height));
 align-content: start;
 }
 .page-two .grid-2x2 .app-wrap {
 height: var(--app-cell-height);
 min-height: var(--app-cell-height);
 justify-content: flex-start;
 }
 .page-two .grid-2x2 .app-label {
 flex: 0 0 var(--icon-label-height);
 max-width: var(--icon-size);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }

 .app-wrap {
 display: flex; flex-direction: column; align-items: center;
 gap: var(--icon-label-gap); width: var(--icon-size);
 }
 .app-icon {
 --accent: var(--logo-color);
 --app-glyph-scale: 1;
 width: var(--icon-size); height: var(--icon-size); border-radius: var(--radius-icon);
 background: #fff;
 border: none;
 box-shadow: var(--app-icon-shadow);
 display: flex; justify-content: center; align-items: center;
 position: relative; overflow: hidden; isolation: isolate;
 color: var(--accent);
 }
 /* 桌面与 Dock 共用 27.5px 图形安全区；只按 SVG 实际留白做轻量光学校准。
  外壳、中心点与路径保持唯一，不通过改 viewBox、额外图层或末尾覆盖伪造一致。 */
 .fa-icon {
 position: relative;
 z-index: 2;
 width: 27.5px;
 height: 27.5px;
 display: block;
 fill: currentColor;
 overflow: visible;
 flex: 0 0 27.5px;
 transform: scale(var(--app-glyph-scale));
 transform-origin: center;
 }
 .app-icon[data-icon="archive"] { --app-glyph-scale: 1.03; }
 .app-icon[data-icon="wechat"] { --app-glyph-scale: 1.14; }
 .app-icon[data-icon="worldbook"] { --app-glyph-scale: .98; }
 .app-icon[data-icon="memory"] { --app-glyph-scale: .94; }
 .app-icon[data-icon="music"] { --app-glyph-scale: 1; }
 .app-icon[data-icon="vocabulary"] { --app-glyph-scale: .97; }
 .app-icon[data-icon="shopping"] { --app-glyph-scale: .97; }
 .app-icon[data-icon="encounter"] { --app-glyph-scale: .96; }
 .app-icon[data-icon="reading"] { --app-glyph-scale: .98; }
 .app-icon[data-icon="game"] { --app-glyph-scale: 1.08; }
 .app-icon[data-icon="forum"] { --app-glyph-scale: 1.02; }
 .app-icon[data-icon="heartbeat"] { --app-glyph-scale: 1; }
 .app-icon[data-icon="dock-duty"] { --app-glyph-scale: 1.04; }
 .app-icon[data-icon="dock-message"] { --app-glyph-scale: .97; }
 .app-icon[data-icon="dock-theme"] { --app-glyph-scale: .95; }
 .app-icon[data-icon="dock-settings"] { --app-glyph-scale: .95; }
 .app-label { font-size: 11px; color: #222; height: var(--icon-label-height); line-height: var(--icon-label-height); display: flex; align-items: center; }
 .dock-app-icon { flex: 0 0 var(--icon-size); }
 #settings-trigger,
 #worldbook-trigger,
 #archive-trigger,
 #wechat-trigger {
 -webkit-appearance: none;
 appearance: none;
 margin: 0;
 padding: 0;
 font: inherit;
 cursor: pointer;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
 }
 #settings-trigger:focus,
 #worldbook-trigger:focus,
 #archive-trigger:focus,
 #wechat-trigger:focus { outline: none; }
 #worldbook-trigger,
 #archive-trigger,
 #wechat-trigger { background: transparent; border: 0; color: inherit; }


 /* 所有初始头像：纯白外壳 + Logo 色 Font Awesome Classic Solid 人像与密集小星星 */
 .default-avatar {
 position: relative;
 overflow: hidden;
 isolation: isolate;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #fff;
 color: var(--logo-color);
 }
 .default-avatar .avatar-user-icon {
 position: relative;
 z-index: 2;
 width: 47%;
 height: 47%;
 display: block;
 fill: var(--logo-color);
 }
 .default-avatar .avatar-star {
 position: absolute;
 z-index: 1;
 display: block;
 fill: var(--logo-color);
 opacity: 0.94;
 transform-origin: center;
 }
 .default-avatar .star-a { width: 8%; height: 8%; left: 8%; top: 10%; transform: rotate(-18deg); }
 .default-avatar .star-b { width: 5.5%; height: 5.5%; left: 24%; top: 7%; transform: rotate(19deg); }
 .default-avatar .star-c { width: 9.5%; height: 9.5%; right: 8%; top: 12%; transform: rotate(-11deg); }
 .default-avatar .star-d { width: 6.5%; height: 6.5%; right: 9%; top: 38%; transform: rotate(26deg); }
 .default-avatar .star-e { width: 7.5%; height: 7.5%; right: 11%; bottom: 10%; transform: rotate(-23deg); }
 .default-avatar .star-f { width: 5%; height: 5%; left: 23%; bottom: 8%; transform: rotate(13deg); }
 .default-avatar .star-g { width: 9%; height: 9%; left: 7%; bottom: 19%; transform: rotate(-8deg); }
 .default-avatar .star-h { width: 5.8%; height: 5.8%; left: 9%; top: 43%; transform: rotate(31deg); }

 .default-avatar.avatar-variant-2 .star-a { width: 5.5%; height: 5.5%; left: 13%; top: 9%; transform: rotate(21deg); }
 .default-avatar.avatar-variant-2 .star-b { width: 9%; height: 9%; left: 31%; top: 6%; transform: rotate(-16deg); }
 .default-avatar.avatar-variant-2 .star-c { width: 6%; height: 6%; right: 13%; top: 9%; transform: rotate(28deg); }
 .default-avatar.avatar-variant-2 .star-d { width: 8%; height: 8%; right: 7%; top: 36%; transform: rotate(-24deg); }
 .default-avatar.avatar-variant-2 .star-e { width: 5%; height: 5%; right: 20%; bottom: 8%; transform: rotate(10deg); }
 .default-avatar.avatar-variant-2 .star-f { width: 9.5%; height: 9.5%; left: 28%; bottom: 6%; transform: rotate(-14deg); }
 .default-avatar.avatar-variant-2 .star-g { width: 6.5%; height: 6.5%; left: 8%; bottom: 21%; transform: rotate(24deg); }
 .default-avatar.avatar-variant-2 .star-h { width: 5.5%; height: 5.5%; left: 7%; top: 38%; transform: rotate(-29deg); }

 .default-avatar.avatar-variant-3 .star-a { width: 7%; height: 7%; left: 8%; top: 8%; transform: rotate(-25deg); }
 .default-avatar.avatar-variant-3 .star-b { width: 5%; height: 5%; left: 29%; top: 7%; transform: rotate(12deg); }
 .default-avatar.avatar-variant-3 .star-c { width: 8.5%; height: 8.5%; right: 9%; top: 8%; transform: rotate(24deg); }
 .default-avatar.avatar-variant-3 .star-d { width: 5.5%; height: 5.5%; right: 7%; top: 41%; transform: rotate(-18deg); }
 .default-avatar.avatar-variant-3 .star-e { width: 9%; height: 9%; right: 10%; bottom: 12%; transform: rotate(16deg); }
 .default-avatar.avatar-variant-3 .star-f { width: 6%; height: 6%; left: 30%; bottom: 7%; transform: rotate(-28deg); }
 .default-avatar.avatar-variant-3 .star-g { width: 5%; height: 5%; left: 8%; bottom: 23%; transform: rotate(20deg); }
 .default-avatar.avatar-variant-3 .star-h { width: 8%; height: 8%; left: 6%; top: 39%; transform: rotate(-9deg); }

 .id-photo.default-avatar .avatar-user-icon { width: 52%; height: 52%; }
 .id-photo.default-avatar .avatar-star { opacity: 0.9; }

 /* ==========================================
 4. 第一页：精准主卡片 & ID工牌
 ========================================== */
 .profile-wrap { display: flex; flex-direction: column; width: 100%; padding-bottom: var(--component-bottom-reserve); }
 
 .profile-card {
 --profile-media-height: 54%;
 --profile-arch-rise: 26px;
 --profile-avatar-size: 96px;
 --profile-avatar-radius: 48px;
 --profile-info-gap: 5px;
 width: 100%; height: var(--profile-card-height); position: relative;
 background: rgba(255, 255, 255, 0.45); backdrop-filter: var(--soft-glass-blur); -webkit-backdrop-filter: var(--soft-glass-blur);
 border: var(--glass-border); border-radius: var(--radius-widget);
 overflow: hidden; box-shadow: var(--app-icon-shadow); display: flex; flex-direction: column;
 }
 .profile-img { 
 height: var(--profile-media-height); width: 100%;
 background: #fff;
 filter: none; z-index: 1;
 box-shadow: none;
 }
 .profile-img.default-avatar .avatar-user-icon { width: 82px; height: 92px; }
 .profile-img.default-avatar .avatar-star { opacity: 0.82; }
 .profile-avatar {
 width: var(--profile-avatar-size); height: var(--profile-avatar-size); border-radius: 50%;
 border: 1.5px solid rgba(255,255,255,0.94);
 position: absolute;
 top: calc(var(--profile-media-height) - var(--profile-arch-rise));
 left: 50%; transform: translate(-50%, -50%);
 box-shadow: 0 6px 18px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.18);
 z-index: 3;
 }
 .profile-text { 
 text-align: center; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
 /* 仅个人信息区启用高消耗强化磨砂；高白度表层阻断背景色直透。 */
 background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88));
 backdrop-filter: blur(64px) saturate(118%) brightness(1.14);
 -webkit-backdrop-filter: blur(64px) saturate(118%) brightness(1.14);
 will-change: backdrop-filter;
 border-top-left-radius: 26px;
 border-top-right-radius: 26px;
 position: relative; z-index: 2;
 margin-top: calc(var(--profile-arch-rise) * -1);
 /* 头像中心仍与上拱交界重合；信息行改为居中紧凑组，避免在剩余区域内被过度摊开。 */
 padding-top: var(--profile-avatar-radius);
 padding-bottom: 10px;
 gap: var(--profile-info-gap);
 }
 .profile-text h2,
 .profile-text .handle,
 .profile-text .quote,
 .profile-text .loc {
 max-width: calc(100% - 40px);
 min-width: 0;
 }
 .profile-text h2,
 .profile-text .handle,
 .profile-text .quote,
 .profile-text .loc span {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 .profile-text h2 { font-size: 19px; font-weight: 700; line-height: 1.16; letter-spacing: 0.5px; color: #111; }
 .profile-text .handle { font-size: 12px; line-height: 1.18; color: #888; font-style: italic; margin-top: 0;}
 .profile-text .quote { font-size: 12px; line-height: 1.18; font-weight: 600; margin-top: 0; color: #444; }
 .profile-text .loc { font-size: 11px; line-height: 1.18; color: #888; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 0; }
 .profile-text .loc span { min-width: 0; }
 .component-fa-icon { width: 9px; height: 11px; display: block; fill: var(--theme-gray); flex: 0 0 auto; }

 /* ID工作牌组件 */
 .widget-2x2-wrap { width: 100%; display: flex; flex-direction: column; }
 .id-widget { width: 100%; aspect-ratio: 1 / 0.846; position: relative; display: flex; flex-direction: column; align-items: center; }
 .metal-clip {
 position: absolute; top: -4.5px; left: 50%; transform: translateX(-50%);
 width: 21.6px; height: 32.4px; 
 display: flex; flex-direction: column; align-items: center;
 z-index: 5;
 }
 .metal-clip::before {
 content: ''; width: 12.6px; height: 7.2px; border-radius: 3.6px 3.6px 0 0;
 border: 1.8px solid #ccc; border-bottom: none;
 background: transparent;
 box-shadow: inset 0 2px 2px rgba(255,255,255,0.8), 0 -1px 2px rgba(0,0,0,0.2);
 margin-bottom: -0.9px;
 }
 .metal-clip::after {
 content: ''; width: 19.8px; height: 23.4px; border-radius: 3.6px;
 background: linear-gradient(180deg, #e6e6e6 0%, #b3b3b3 30%, #cccccc 60%, #999999 100%);
 box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 1px 0 2px rgba(255,255,255,0.5), inset -1px 0 2px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
 border: 0.45px solid #888;
 }
 .metal-clip-rivet {
 position: absolute; top: 14.4px; left: 50%; transform: translateX(-50%);
 width: 7.2px; height: 7.2px; border-radius: 50%;
 background: radial-gradient(circle at 30% 30%, #fff, #999 60%, #555);
 box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.9);
 z-index: 6; border: 0.45px solid #666;
 }
 .plastic-strap {
 position: absolute; top: 20.7px; left: 50%; transform: translateX(-50%); 
 width: 23.4px; height: 27px; border-radius: 5.4px;
 background: linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,255,255,0.32));
 border: 0.45px solid rgba(255,255,255,0.9); border-bottom: 0.9px solid rgba(150,150,150,0.5);
 z-index: 4; box-shadow: none; 
 display: flex; justify-content: center; align-items: flex-end; padding-bottom: 4.5px;
 }
 .plastic-strap::after { 
 content: ''; width: 6.3px; height: 6.3px; border-radius: 50%; 
 background: radial-gradient(circle at 35% 35%, #fff, #aaa 50%, #666); 
 box-shadow: 0 2px 3px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(0,0,0,0.3); 
 border: 0.45px solid #777; 
 }
 .pvc-sleeve {
 margin-top: 31.5px; width: 100%; height: calc(100% - 31.5px);
 background: linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18));
 border-radius: 12px; position: relative; z-index: 3; box-shadow: var(--app-icon-shadow);
 padding: 8px; display: flex; justify-content: center; align-items: center;
 }
 .pvc-sleeve::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; border: 1px dashed rgba(255,255,255,0.9); border-radius: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(200,200,200,0.2); }
 .inner-paper-card { background: #fff; width: 100%; height: 100%; border-radius: 5px; display: flex; align-items: center; padding: 6px; gap: 8px; position: relative; z-index: 1; box-shadow: none; }
 .id-photo { width: 38px; height: 52px; border-radius: 6px; flex-shrink: 0; box-shadow: 0 3px 8px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(255,255,255,0.16); }
 .id-text-group {
 --id-icon-size: 8px;
 --id-icon-text-gap: 4px;
 display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; overflow: hidden;
 }
 .id-row {
 position: relative;
 display: flex; align-items: center; gap: var(--id-icon-text-gap);
 width: 100%; min-height: 15px; padding: 0 0 3px;
 border-bottom: none;
 font-size: 7.5px; color: #555; white-space: nowrap;
 transform: scale(0.95); transform-origin: left center;
 }
 .id-row::after {
 content: '';
 position: absolute;
 left: calc(var(--id-icon-size) + var(--id-icon-text-gap));
 right: 0;
 bottom: 0;
 border-bottom: 1px dashed var(--badge-divider-color);
 pointer-events: none;
 }
 .id-row svg {
 width: var(--id-icon-size); height: var(--id-icon-size);
 fill: var(--badge-divider-color);
 flex: 0 0 var(--id-icon-size);
 }
 .id-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

 /* ==========================================
 5. 第二页：独立莫比乌斯环拍立得与统一网格
 ========================================== */
 .top-widget-wrap-p2 { display: flex; flex-direction: column; width: 100%; }
 .polaroid-group {
 position: relative;
 width: 100%;
 height: calc(100% - var(--component-bottom-reserve));
 min-height: 0;
 }
 /* 三张倾斜拍立得按旋转后的可见外接上沿校正，统一贴齐第一页桌面内容起始线。 */
 .p-wrapper { position: absolute; top: 0; width: 96px; height: 116px; }

 /* 相纸实体 (z-index: 2) */
 .p-photo {
 position: absolute; bottom: 4px; left: 4px; right: 4px; height: 92px;
 background: #fff; padding: 4px 4px 14px 4px;
 box-shadow: var(--app-icon-shadow); border-radius: 1px; z-index: 2;
 }
 .p-img { width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(100%); }
 .p-img.default-avatar { filter: none; }

 /* 透明塑料套 (z-index: 3) */
 .p-sleeve-cover {
 position: absolute; top: 0; left: 0; right: 0; bottom: 0;
 background: linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
 border: 0.5px solid rgba(255,255,255,0.7); border-radius: 3px;
 box-shadow: inset 0 0 6px rgba(255,255,255,0.5);
 overflow: hidden; z-index: 3; pointer-events: none;
 }
 .p-sleeve-cover::after {
 content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
 background: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0) 50%);
 transform: rotate(15deg);
 }
 .p-sleeve-cover::before {
 content: ''; position: absolute; top: 16px; left: 2px; right: 2px; border-top: 1px dotted rgba(255,255,255,0.9);
 }

 /* 顶部印花 (z-index: 4) */
 .p-deco { position: absolute; top: 5px; width: 100%; text-align: center; font-size: 6.5px; color: #777; letter-spacing: 1px; z-index: 4; }

 /* 打孔 (z-index: 5) */
 .p-hole {
 position: absolute; top: 4px; left: 5px; width: 6px; height: 6px; border-radius: 50%;
 background: rgba(0,0,0,0.025);
 border: 0.7px solid rgba(0,0,0,0.16);
 box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.12);
 z-index: 5;
 }

 /* 三个独立莫比乌斯链环：保留原金属珠链样式，孔位为最高点并向下自然垂落 */
 .mobius-chain {
 position: absolute;
 top: 0;
 left: -21px;
 width: 48px;
 height: 72px;
 transform-origin: 24px 5px;
 pointer-events: none;
 overflow: visible;
 }
 .mobius-chain svg {
 display: block;
 width: 100%;
 height: 100%;
 overflow: visible;
 }
 .mobius-chain-back { z-index: 1; }
 .mobius-chain-track-dots .mobius-chain-bead {
 fill: url(#metal-grad);
 }

 /* 保留三张拍立得原排版，仅给予向下垂落的链环轻微自然偏摆 */
 
 /* 1. 左侧照片 */
 .pw-1 { top: 18px; left: 0; transform: rotate(-10deg) scale(1.046); transform-origin: top left; z-index: 1; }
 .pw-1 .mobius-chain { transform: rotate(4deg) scaleX(0.92) scaleY(1.06); } 
 
 /* 2. 中间照片 */
 .pw-2 { top: 2px; left: 50%; margin-left: -54px; width: 108px; height: 130px; transform: rotate(2deg) scale(1.046); transform-origin: top center; z-index: 3; }
 .pw-2 .p-photo { bottom: 5px; left: 5px; right: 5px; height: 104px; box-shadow: var(--app-icon-shadow); }
 .pw-2 .p-hole { top: 5px; left: 6px; width: 7px; height: 7px; }
 .pw-2 .mobius-chain { top: 1px; left: -20px; transform: rotate(-1deg) scaleX(0.94) scaleY(1.05); }
 .pw-2 .p-sleeve-cover::before { top: 18px; }
 .pw-2 .p-deco { top: 6px; font-size: 7px; }

 /* 3. 右侧照片 */
 .pw-3 { top: 21px; right: 0; transform: rotate(12deg) scale(1.046); transform-origin: top right; z-index: 2; }
 .pw-3 .mobius-chain { transform: rotate(-5deg) scaleX(0.92) scaleY(1.06); }


 /* ==========================================
 6. 第二页其余精美组件
 ========================================== */
 .text-widget {
 width: 100%;
 height: calc(100% - var(--component-bottom-reserve));
 aspect-ratio: auto;
 flex: 0 0 calc(100% - var(--component-bottom-reserve));
 min-height: 0;
 background: transparent; border: none; border-radius: 0; box-shadow: none;
 padding: 4px; display: flex; flex-direction: column; position: relative;
 }
 .tw-header { display: flex; justify-content: space-between; align-items: flex-start; min-height: 40px; }
 .tw-avatar {
 width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.78);
 box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.14);
 flex-shrink: 0;
 }
 .tw-date-group { display: flex; flex-direction: column; align-items: flex-end; padding-top: 1px; }
 .tw-day { font-family: -apple-system, BlinkMacSystemFont,"SF Pro Text","Helvetica Neue", Arial, sans-serif; font-size: 30px; font-weight: 400; line-height: 0.92; color: #333; letter-spacing: -0.5px; }
 .tw-month { font-family: -apple-system, BlinkMacSystemFont,"SF Pro Text","Helvetica Neue", Arial, sans-serif; margin-top: 3px; font-size: 9px; line-height: 1; color: #777; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
 .tw-content {
 flex: 1; min-height: 0; margin-top: 9px; display: flex; flex-direction: column; justify-content: center; width: 100%; gap: 6px;
 }
 .tw-item {
 width: 100%; min-width: 0; min-height: 18px;
 font-size: 12px; color: #333; line-height: 1.2;
 display: flex; align-items: center; padding: 0 2px;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .tw-divider {
 height: 1px; flex: 0 0 1px; background: rgba(0, 0, 0, 0.15); width: 100%; border-radius: 1px;
 }
 /* 右下双人头像组件：每组“气泡＋头像”视为一个不可拆分的整体。
 两个整体分别占用右侧两条图标列，并在旁边 2×2 网格的完整高度内统一垂直居中。 */
 .bubble-widget-wrap {
 position: relative;
 width: 100%;
 height: 100%;
 min-height: 0;
 aspect-ratio: auto;
 }
 .bubble-widget { 
 width: 100%;
 height: calc(100% - var(--component-bottom-reserve));
 flex: 0 0 calc(100% - var(--component-bottom-reserve));
 min-height: 0;
 aspect-ratio: auto;
 position: relative;
 display: grid;
 grid-template-columns: repeat(2, var(--icon-size));
 justify-content: space-between;
 align-items: stretch;
 padding: 0;
 background: transparent; border: none; border-radius: 0; box-shadow: none;
 }
 .b-avatar-wrap {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 18px;
 width: var(--icon-size);
 height: 100%;
 }
 .b-avatar {
 position: relative;
 flex: 0 0 var(--icon-size);
 width: var(--icon-size); height: var(--icon-size);
 border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.78);
 box-shadow: 0 8px 20px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.14);
 }
 .b-msg { 
 position: relative;
 flex: 0 0 auto;
 width: 75px;
 box-sizing: border-box;
 min-height: 40px;
 background: #fff;
 padding: 6px 10px;
 border-radius: 12px;
 font-size: 11px; font-weight: 400; color: #333;
 line-height: 1.28;
 text-align: center;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: visible;
 z-index: 2;
 }
 .b-msg-text {
 display: -webkit-box;
 width: 55px;
 max-width: 55px;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: normal;
 word-break: break-all;
 overflow-wrap: anywhere;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 }
 /* 双人头像气泡唯一尾巴层：单一向下三角形；旧半圆、圆点与第二级伪元素已彻底移除。 */
 .b-msg::after {
 content: '';
 position: absolute;
 left: 50%;
 bottom: -8px;
 width: 0;
 height: 0;
 transform: translateX(-50%);
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 border-top: 9px solid #fff;
 filter: drop-shadow(0 2px 1px rgba(0,0,0,.07));
 }


 

 /* ==========================================
 8. 组件图片更换面板
 ========================================== */
 .image-edit-target,
 .p-photo {
 cursor: pointer;
 touch-action: manipulation;
 }
 .image-edit-target.has-custom-image {
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 }
 .p-img.has-custom-image { filter: none; }

 .image-picker-overlay {
 position: absolute;
 inset: 0;
 z-index: 1000;
 display: none;
 background: transparent;
 }
 .image-picker-overlay.is-open { display: block; }
 .image-picker-panel {
 position: absolute;
 left: 12px;
 top: 12px;
 width: min(112px, calc(100% - 20px));
 padding: 6px 7px;
 border: none;
 border-radius: 12px;
 background: #fff;
 box-shadow: 0 5px 14px rgba(0, 0, 0, 0.13);
 transform-origin: top center;
 }
 .image-picker-options {
 display: flex;
 flex-direction: column;
 gap: 0;
 }
 .image-picker-option {
 width: 100%;
 min-height: 31px;
 padding: 0 4px;
 border: none;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 display: flex;
 align-items: center;
 gap: 8px;
 color: #777;
 font: inherit;
 font-size: 11.5px;
 font-weight: 400;
 line-height: 1;
 text-align: left;
 white-space: nowrap;
 cursor: pointer;
 }
 .image-picker-option::before,
 .image-picker-option svg {
 width: 16px;
 height: 16px;
 flex: 0 0 16px;
 fill: #777;
 }
 .image-picker-error {
 min-height: 0;
 margin-top: 2px;
 color: #b34d4d;
 font-size: 8.5px;
 font-weight: 400;
 line-height: 1.25;
 }
 .image-picker-error:empty { display: none; }
 .image-file-input { display: none; }

 /* ==========================================
 9. 组件文本全局编辑弹窗
 ========================================== */
 .text-edit-target {
 cursor: pointer;
 touch-action: manipulation;
 }
 .global-modal-overlay {
 position: absolute;
 inset: 0;
 z-index: 2000;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 24px;
 background: var(--modal-backdrop-color);
 backdrop-filter: var(--modal-backdrop-filter);
 -webkit-backdrop-filter: var(--modal-backdrop-filter);
 }
 .global-modal-overlay.is-open { display: flex; }
 .global-modal {
 width: min(270px, calc(100% - 32px));
 min-height: 0;
 height: auto;
 padding: 25px 18px 20px;
 border: 0;
 border-radius: 24px;
 background: #fff;
 box-shadow: var(--modal-surface-shadow);
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 .global-modal [hidden] { display: none; }
 .global-modal-logo {
 display: block;
 width: 29px;
 height: 29px;
 margin-bottom: 12px;
 color: var(--theme-gray);
 fill: currentColor;
 flex: 0 0 auto;
 }
 .global-modal-title {
 width: 100%;
 margin: 0 0 18px;
 color: #202024;
 font-size: 16px;
 font-weight: 600;
 line-height: 1.3;
 text-align: center;
 }
 /* 唯一全局输入栏：弹窗与设置子页共用同一结构和样式。 */
 .global-input-row {
 width: 100%;
 min-width: 0;
 display: grid;
 grid-template-columns: 18px minmax(0, 1fr);
 align-items: center;
 column-gap: 10px;
 padding-right: 28px;
 }
 .global-input-icon {
 width: 14px;
 height: 14px;
 justify-self: center;
 color: var(--theme-gray);
 fill: currentColor;
 flex: 0 0 auto;
 }
 .global-input-field {
 width: 100%;
 min-width: 0;
 height: 32px;
 min-height: 32px;
 box-sizing: border-box;
 padding: 0 0 2px;
 border: 0;
 border-bottom: 1px dashed rgba(143, 143, 149, 0.58);
 border-radius: 0;
 outline: 0;
 transition: border-color 0.18s ease;
 background: transparent;
 color: #202024;
 font: inherit;
 font-size: 13px;
 line-height: 29px;
 text-align: left;
 user-select: text;
 -webkit-user-select: text;
 box-shadow: none;
 }
 .global-input-field:focus {
 border-bottom-color: var(--theme-gray);
 box-shadow: none;
 }
 .global-input-field::placeholder { color: #b4b4b9; }
 .global-modal-helper {
 width: calc(100% - 56px);
 min-height: 0;
 margin: 7px 28px 0;
 color: #b34d4d;
 font-size: 10.5px;
 line-height: 1.35;
 text-align: left;
 }
 .global-modal-helper:empty { display: none; }
 .global-modal-actions {
 width: 100%;
 margin-top: 22px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 }
 .global-modal-button {
 height: 38px;
 padding: 0 14px;
 border: 0;
 border-radius: 999px;
 font: inherit;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 }
 .global-modal-cancel {
 background: #f0f0f2;
 color: #64646a;
 }
 .global-modal-confirm {
 background: var(--theme-gray);
 color: #fff;
 }
 .global-modal-message {
 width: 100%;
 margin: -6px 0 0;
 color: #85858b;
 font-size: 12px;
 line-height: 1.55;
 text-align: center;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 }
 .global-modal.is-message-modal {
 padding-top: 22px;
 padding-bottom: 20px;
 }
 .global-modal.is-message-modal .global-modal-logo { margin-bottom: 10px; }
 .global-modal.is-message-modal .global-modal-title { margin-bottom: 10px; }
 .global-modal.is-message-modal .global-modal-actions { margin-top: 20px; }
 .global-modal-actions.single { grid-template-columns: 1fr; }
 .global-modal-confirm.is-destructive { background: #d85d59; }

 /* ==========================================
 9. 全局应用页面主层
 ========================================== */
 .sidra-global-app {
 position: absolute;
 inset: 0;
 width: auto;
 height: auto;
 min-width: 0;
 min-height: 0;
 max-width: none;
 max-height: none;
 z-index: 60;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 isolation: isolate;
 color: #202024;
 background-color: var(--sidra-page-background-color);
 background-image: var(--sidra-page-wallpaper-image);
 background-position: var(--sidra-page-wallpaper-position);
 background-size: var(--sidra-page-wallpaper-size);
 background-repeat: var(--sidra-page-wallpaper-repeat);
 visibility: hidden;
 pointer-events: none;
 transform: translate3d(100%, 0, 0);
 transition: transform 0.42s cubic-bezier(0.22, 0.82, 0.26, 1), visibility 0s linear 0.42s;
 }
 .sidra-global-app.is-open {
 visibility: visible;
 pointer-events: auto;
 transform: translate3d(0, 0, 0);
 transition-delay: 0s;
 }
 .screen,
 .search-pill,
 .pagination,
 .dock {
 transition: opacity .22s ease, visibility 0s linear 0s;
 }
 .sidra-viewport.global-page-open .sidra-stage > .screen,
 .sidra-viewport.global-page-open .sidra-stage > .search-pill,
 .sidra-viewport.global-page-open .sidra-stage > .pagination,
 .sidra-viewport.global-page-open .sidra-stage > .dock {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .22s ease, visibility 0s linear .22s;
 }
 .sidra-app-navbar {
 position: relative;
 z-index: 2;
 min-height: 52px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin: 0 0 14px;
 padding-top: var(--app-page-top-inset);
 }
 .sidra-app-nav-leading {
 min-width: 0;
 min-height: 38px;
 display: inline-flex;
 align-items: center;
 gap: 9px;
 padding: 0 2px;
 border: 0;
 outline: 0;
 color: #202024;
 background: transparent;
 appearance: none;
 -webkit-appearance: none;
 font: inherit;
 font-size: 18px;
 line-height: 1.2;
 font-weight: 600;
 font-synthesis: none;
 letter-spacing: -.2px;
 text-align: left;
 cursor: pointer;
 touch-action: manipulation;
 }
 .sidra-app-nav-leading svg {
 width: 17px;
 height: 17px;
 flex: 0 0 auto;
 color: var(--sidra-nav-icon-color);
 fill: currentColor;
 }
 .sidra-app-nav-leading span {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 .sidra-app-nav-leading:focus-visible,
 .sidra-app-nav-icon:focus-visible,
 .sidra-app-nav-text:focus-visible {
 outline: 0;
 border-radius: 10px;
 box-shadow: 0 0 0 3px rgba(203,203,203,.30);
 }
 .sidra-app-nav-actions {
 min-width: 0;
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 0;
 }
 .sidra-app-nav-icon {
 width: 35px;
 height: 38px;
 display: grid;
 place-items: center;
 flex: 0 0 auto;
 padding: 0;
 border: 0;
 color: var(--sidra-nav-icon-color);
 background: transparent;
 cursor: pointer;
 touch-action: manipulation;
 }
 .sidra-app-nav-icon svg {
 width: 16px;
 height: 16px;
 display: block;
 fill: currentColor;
 }
 .sidra-app-nav-text {
 min-height: 38px;
 padding: 0 4px 0 10px;
 border: 0;
 color: var(--sidra-nav-icon-color);
 background: transparent;
 font: inherit;
 font-size: 14px;
 line-height: 1;
 font-weight: 600;
 cursor: pointer;
 touch-action: manipulation;
 }
 .sidra-global-page-group {
 overflow: hidden;
 margin: 0 0 16px;
 border: .5px solid var(--sidra-page-divider-soft);
 border-radius: 14px;
 background: var(--sidra-page-surface-strong);
 box-shadow: 0 7px 20px rgba(0,0,0,.055), 0 2px 5px rgba(0,0,0,.035);
 -webkit-backdrop-filter: blur(10px) saturate(120%);
 backdrop-filter: blur(10px) saturate(120%);
 }

 /* ==========================================
 10. 设置 APP 内容
 设置页只保留内容样式；全屏定位、显隐和转场统一由 .sidra-global-app 管理。
 ========================================== */
 .settings-page-heading { margin-bottom: 14px; }
 .settings-main-title { max-width: 100%; }
 .settings-scroll {
 position: relative;
 z-index: 1;
 flex: 1 1 auto;
 width: 100%;
 min-width: 0;
 min-height: 0;
 overflow-y: auto;
 overflow-x: hidden;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
 padding: 0 var(--app-inline-inset) 30px;
 }
 .settings-view[hidden] { display: none; }
 .settings-group,
 .settings-form-group,
 .settings-action-group {
 border: .5px solid rgba(203,203,203,.28);
 background: rgba(255,255,255,.92);
 box-shadow: 0 7px 20px rgba(0,0,0,.055), 0 2px 5px rgba(0,0,0,.035);
 -webkit-backdrop-filter: blur(10px) saturate(120%);
 backdrop-filter: blur(10px) saturate(120%);
 }
 .settings-group {
 overflow: hidden;
 margin: 0 0 16px;
 border-radius: 14px;
 }
 .settings-row,
 .sidra-global-list-row {
 position: relative;
 width: 100%;
 min-height: 61px;
 border: 0;
 background: transparent;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 9px 14px;
 color: #202024;
 font: inherit;
 text-align: left;
 cursor: pointer;
 touch-action: manipulation;
 }
 .settings-row:not(:last-child)::after,
 .sidra-global-list-row:not(:last-child)::after {
 content:"";
 position: absolute;
 left: 58px;
 right: 14px;
 bottom: 0;
 height: .5px;
 background: rgba(203,203,203,.55);
 }
 .settings-item-icon,
 .sidra-global-list-icon {
 --settings-glyph-scale: 1;
 flex: 0 0 auto;
 width: 34px;
 height: 34px;
 display: grid;
 place-items: center;
 overflow: hidden;
 border-radius: 8px;
 background: var(--logo-color);
 color: #fff;
 box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 6px rgba(0,0,0,.055);
 }
 .settings-item-icon svg,
 .sidra-global-list-icon svg {
 display: block;
 width: 18px;
 height: 18px;
 fill: #fff;
 color: #fff;
 transform: scale(var(--settings-glyph-scale));
 transform-origin: center;
 }
 /* 沿用聊天框图标的统一方式：固定 18×18 安全区，只做小幅光学补偿。
  极端缩放链已移除，避免同一设置列表中图标忽大忽小。 */
 .settings-item-icon[data-icon="account"] { --settings-glyph-scale: 1; }
 .settings-item-icon[data-icon="notifications"] { --settings-glyph-scale: .98; }
 .settings-item-icon[data-icon="cloudPush"] { --settings-glyph-scale: .98; }
 .settings-item-icon[data-icon="keepAlive"] { --settings-glyph-scale: .98; }
 .settings-item-icon[data-icon="api"] { --settings-glyph-scale: 1.04; }
 .settings-item-icon[data-icon="imageGen"] { --settings-glyph-scale: 1; }
 .settings-item-icon[data-icon="minimax"] { --settings-glyph-scale: 1.06; }
 .settings-item-icon[data-icon="cloudBackup"] { --settings-glyph-scale: .96; }
 .settings-item-icon[data-icon="data"] { --settings-glyph-scale: .98; }
 .settings-item-icon[data-icon="about"] { --settings-glyph-scale: .96; }
 .settings-row-copy {
 min-width: 0;
 flex: 1 1 auto;
 display: flex;
 align-items: center;
 }
 .sidra-global-list-copy {
 min-width: 0;
 flex: 1 1 auto;
 display: block;
 }
 .settings-row-title,
 .sidra-global-list-title { font-size: 15px; line-height: 20px; font-weight: 400; font-synthesis: none; letter-spacing: -.08px; }
 .sidra-global-list-detail { display:block; margin-top:2px; color:#97979d; font-size:11px; line-height:15px; font-weight:400; }
 .settings-chevron,
 .sidra-global-chevron {
 flex: 0 0 auto;
 width: 8px;
 height: 8px;
 margin-right: 3px;
 border-top: 1.5px solid #b6b6bb;
 border-right: 1.5px solid #b6b6bb;
 transform: rotate(45deg);
 }
 .settings-section-label,
 .sidra-global-section-label {
 margin: 0 13px 7px;
 color: #929298;
 font-size: 12px;
 line-height: 17px;
 }
 .settings-form-group {
 overflow: hidden;
 margin-bottom: 17px;
 border-radius: 14px;
 }
 .settings-control-row {
 position: relative;
 min-height: 55px;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 14px;
 }
 .settings-control-row:not(:last-child)::after {
 content:"";
 position: absolute;
 left: 14px;
 right: 14px;
 bottom: 0;
 height: .5px;
 background: rgba(203,203,203,.52);
 }
 .settings-control-label { min-width: 0; flex: 1 1 auto; font-size: 14px; line-height: 20px; font-weight: 500; }
 .settings-control-label small { display: block; margin-top: 2px; color: #97979d; font-size: 11px; line-height: 15px; font-weight: 400; }
 .settings-value-text { max-width: 55%; color: #8f8f95; font-size: 13px; line-height: 19px; text-align: right; word-break: break-all; }
 .settings-control-row.has-global-input {
 min-height: 55px;
 padding-top: 5px;
 padding-bottom: 5px;
 }
 .settings-global-input-row {
 flex: 0 1 240px;
 width: min(62%, 240px);
 }
 .settings-global-input-row .global-input-field {
 height: 32px;
 min-height: 32px;
 }
 .settings-global-select-row {
 position: relative;
 }
 .settings-select {
 appearance: none;
 -webkit-appearance: none;
 cursor: pointer;
 padding-right: 18px;
 }
 .settings-select:focus { box-shadow: none; }
 .settings-select-chevron {
 position: absolute;
 right: 30px;
 top: 50%;
 width: 8px;
 height: 8px;
 color: #a4a4aa;
 fill: currentColor;
 pointer-events: none;
 transform: translateY(-50%);
 }
 .settings-switch {
 position: relative;
 flex: 0 0 auto;
 width: 49px;
 height: 29px;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 cursor: pointer;
 }
 .settings-switch::before {
 content:"";
 position: absolute;
 left: 5px;
 right: 5px;
 top: 50%;
 height: 2px;
 border-radius: 999px;
 background: #d7d7dc;
 transform: translateY(-50%);
 transition: background .2s ease;
 }
 .settings-switch::after {
 content:"";
 position: absolute;
 top: 5px;
 left: 2px;
 width: 20px;
 height: 18px;
 background: #b9b9bf;
 -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20576%20512%27%3E%3Cpath%20d%3D%27M316.9%2018C311.6%207.1%20300.5%200%20288.3%200s-23.4%207.1-28.7%2018L195%20150.3%2051.4%20171.5c-12%201.8-22%2010.2-25.7%2021.7s-.7%2024.2%207.9%2032.7L137.8%20328.7%20113.2%20474c-2%2012%203%2024.2%2012.9%2031.3s23%208%2033.8%202.3l128.4-68.5%20128.4%2068.5c10.8%205.7%2023.9%204.9%2033.8-2.3s14.9-19.3%2012.9-31.3L438.8%20328.7%20543%20225.9c8.6-8.5%2011.7-21.2%207.9-32.7s-13.7-19.9-25.7-21.7L381.6%20150.3%20316.9%2018z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
 mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20576%20512%27%3E%3Cpath%20d%3D%27M316.9%2018C311.6%207.1%20300.5%200%20288.3%200s-23.4%207.1-28.7%2018L195%20150.3%2051.4%20171.5c-12%201.8-22%2010.2-25.7%2021.7s-.7%2024.2%207.9%2032.7L137.8%20328.7%20113.2%20474c-2%2012%203%2024.2%2012.9%2031.3s23%208%2033.8%202.3l128.4-68.5%20128.4%2068.5c10.8%205.7%2023.9%204.9%2033.8-2.3s14.9-19.3%2012.9-31.3L438.8%20328.7%20543%20225.9c8.6-8.5%2011.7-21.2%207.9-32.7s-13.7-19.9-25.7-21.7L381.6%20150.3%20316.9%2018z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
 filter: drop-shadow(0 1px 1px rgba(0,0,0,.10));
 transition: transform .2s cubic-bezier(.25,.8,.25,1), background .2s ease;
 }
 .settings-switch[aria-checked="true"]::before { background: rgba(203,203,203,.78); }
 .settings-switch[aria-checked="true"]::after { background: var(--logo-color); transform: translateX(25px); }
 .settings-switch:focus-visible { outline: 0; }
 .settings-switch:focus-visible::before { box-shadow: 0 0 0 3px rgba(203,203,203,.28); }
 .settings-range-wrap { padding: 13px 14px 15px; }
 .settings-range-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
 .settings-range-value { color: #8f8f95; }
 .settings-range {
 --range-progress: 0%;
 width: 100%;
 height: 22px;
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 appearance: none;
 -webkit-appearance: none;
 background: transparent;
 cursor: pointer;
 }
 .settings-range::-webkit-slider-runnable-track { width: 100%; height: 2px; border: 0; border-radius: 999px; background: linear-gradient(to right, var(--logo-color) 0 var(--range-progress), #d9d9de var(--range-progress) 100%); }
 .settings-range::-webkit-slider-thumb {
 width: 19px; height: 18px; margin-top: -8px; border: 0; border-radius: 0;
 appearance: none; -webkit-appearance: none; background: var(--logo-color);
 -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M47.6%20300.4L228.3%20469.1c7.5%207%2017.4%2010.9%2027.7%2010.9s20.2-3.9%2027.7-10.9L464.4%20300.4c30.4-28.3%2047.6-68%2047.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347%2036.5%20300.6%2051.4%20268%2084L256%2096%20244%2084c-32.6-32.6-79-47.5-124.6-39.9C50.5%2055.6%200%20115.2%200%20185.1v5.8c0%2041.5%2017.2%2081.2%2047.6%20109.5z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M47.6%20300.4L228.3%20469.1c7.5%207%2017.4%2010.9%2027.7%2010.9s20.2-3.9%2027.7-10.9L464.4%20300.4c30.4-28.3%2047.6-68%2047.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347%2036.5%20300.6%2051.4%20268%2084L256%2096%20244%2084c-32.6-32.6-79-47.5-124.6-39.9C50.5%2055.6%200%20115.2%200%20185.1v5.8c0%2041.5%2017.2%2081.2%2047.6%20109.5z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
 filter: drop-shadow(0 1px 1px rgba(0,0,0,.10));
 }
 .settings-range::-moz-range-track { width: 100%; height: 2px; border: 0; border-radius: 999px; background: #d9d9de; }
 .settings-range::-moz-range-progress { height: 2px; border-radius: 999px; background: var(--logo-color); }
 .settings-range::-moz-range-thumb {
 width: 19px; height: 18px; border: 0; border-radius: 0; background: var(--logo-color);
 mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M47.6%20300.4L228.3%20469.1c7.5%207%2017.4%2010.9%2027.7%2010.9s20.2-3.9%2027.7-10.9L464.4%20300.4c30.4-28.3%2047.6-68%2047.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347%2036.5%20300.6%2051.4%20268%2084L256%2096%20244%2084c-32.6-32.6-79-47.5-124.6-39.9C50.5%2055.6%200%20115.2%200%20185.1v5.8c0%2041.5%2017.2%2081.2%2047.6%20109.5z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.10));
 }
 .settings-range:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3px rgba(203,203,203,.28); }
 .settings-range:focus-visible::-moz-range-track { box-shadow: 0 0 0 3px rgba(203,203,203,.28); }
 .settings-segmented,
 .sidra-global-segmented {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 gap: 3px;
 margin: 0 0 17px;
 padding: 3px;
 border-radius: 10px;
 background: #eeeeF1;
 box-shadow: inset 0 0 0 .5px rgba(203,203,203,.38);
 }
 .sidra-global-segmented {
 background: var(--sidra-page-soft-surface);
 box-shadow: inset 0 0 0 .5px var(--sidra-page-divider-strong);
 -webkit-backdrop-filter: blur(10px) saturate(118%);
 backdrop-filter: blur(10px) saturate(118%);
 }
 .settings-segment,
 .sidra-global-segment { min-height: 33px; border: 0; border-radius: 8px; background: transparent; color: #56565c; font: inherit; font-size: 12px; cursor: pointer; }
 .settings-segment.is-active,
 .sidra-global-segment.is-active { background: #fff; color: #202024; box-shadow: 0 3px 8px rgba(0,0,0,.075); font-weight: 600; }
 .sidra-global-segment.is-active { background: var(--sidra-page-surface-strong); }
 .settings-action-group { overflow: hidden; margin-bottom: 17px; border-radius: 14px; }
 .settings-action-button {
 position: relative;
 width: 100%;
 min-height: 52px;
 border: 0;
 background: transparent;
 color: #717177;
 font: inherit;
 font-size: 14px;
 font-weight: 550;
 text-align: center;
 cursor: pointer;
 }
 .settings-action-button:not(:last-child)::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:.5px; background:rgba(203,203,203,.52); }
 .settings-action-button.is-destructive { color: #d85d59; }
 .settings-section-heading {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 min-height: 25px;
 margin: 0 3px 7px 13px;
 }
 .settings-section-heading .settings-section-label { margin: 0; }
 .settings-section-heading .settings-model-fetch-button { margin-right: 2px; }
 .settings-model-fetch-button {
 flex: 0 0 auto;
 min-width: 0;
 min-height: 24px;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 color: #8e8e94;
 box-shadow: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 font: inherit;
 font-size: 11px;
 line-height: 1;
 font-weight: 550;
 white-space: nowrap;
 cursor: pointer;
 touch-action: manipulation;
 }
 .settings-model-fetch-icon {
 width: 11px;
 height: 11px;
 flex: 0 0 11px;
 fill: currentColor;
 }
 .settings-model-fetch-button:disabled { opacity: .42; pointer-events: none; }
 .settings-model-fetch-button:disabled .settings-model-fetch-icon { animation: sidra-spin .75s linear infinite; }
 @keyframes sidra-spin { to { transform: rotate(360deg); } }
 .settings-generation-group > .settings-range-wrap {
 margin: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 }
 .settings-primary-button {
 width: 100%;
 min-height: 48px;
 margin-bottom: 17px;
 border: 0;
 border-radius: 12px;
 background: var(--logo-color);
 color: #fff;
 box-shadow: 0 5px 13px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.28);
 font: inherit;
 font-size: 14px;
 font-weight: 650;
 cursor: pointer;
 }
 .settings-primary-button:disabled,
 .settings-action-button:disabled {
 cursor: default;
 opacity: .48;
 pointer-events: none;
 }
 .settings-storage-bar { height: 8px; margin: 0 14px 14px; overflow: hidden; border-radius: 6px; background: #ededf0; }
 .settings-storage-bar > span { display:block; width:0; height:100%; border-radius:inherit; background:var(--logo-color); transition: width .25s ease; }
 .settings-hidden-file { display: none; }
 .settings-dual-actions {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
 margin-bottom: 17px;
 }
 .settings-dual-actions .settings-primary-button,
 .settings-dual-actions .settings-secondary-button { margin: 0; }
 .settings-secondary-button {
 width: 100%;
 min-height: 48px;
 border: .5px solid rgba(203,203,203,.5);
 border-radius: 12px;
 background: rgba(255,255,255,.92);
 color: #55555b;
 box-shadow: 0 5px 13px rgba(0,0,0,.055);
 font: inherit;
 font-size: 14px;
 font-weight: 620;
 cursor: pointer;
 }
 .settings-status-card,
 .settings-legal-card {
 margin-bottom: 17px;
 padding: 13px 14px;
 border: .5px solid rgba(203,203,203,.28);
 border-radius: 14px;
 background: rgba(255,255,255,.92);
 box-shadow: 0 7px 20px rgba(0,0,0,.045);
 }
 .settings-status-line {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 font-size: 12px;
 line-height: 18px;
 }
 .settings-status-line + .settings-status-line { margin-top: 7px; }
 .settings-status-label { color: #8d8d93; }
 .settings-status-value { color: #4f4f55; text-align: right; overflow-wrap: anywhere; }
 .settings-legal-title { margin: 0 0 7px; font-size: 14px; line-height: 20px; font-weight: 650; }
 .settings-legal-text { margin: 0; color: #66666c; font-size: 12px; line-height: 1.62; white-space: pre-line; }
 .settings-inline-note { margin: -8px 13px 16px; color: #929298; font-size: 11px; line-height: 1.55; }
 .settings-image-preview { display: block; width: 100%; max-height: 280px; margin: 0 0 17px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
 .settings-image-preview[hidden] { display: none; }
 .settings-audio-preview { display: block; width: 100%; margin: 0 0 17px; }
 .settings-audio-preview[hidden] { display: none; }
 .settings-global-input-row textarea.global-input-field { min-height: 72px; padding-top: 12px; padding-bottom: 12px; resize: vertical; }



.sidra-icon-sprite { position: absolute; width: 0; height: 0; }
.desktop-search-icon { width: 10px; height: 10px; fill: #555; }
.settings-action-spaced { margin-bottom: 17px; }