:root {
      /* 全局页面几何：桌面、主题页及后续父级页统一从这里取值 */
      --global-page-start: 20px;
      --global-page-bottom: 18px;
      --global-page-inline: clamp(16px, 5vw, 24px);
      --global-page-content-gap: 16px;
      --global-page-max-width: 100%;
      --global-page-row-height: 60px;
      --global-page-row-inline: clamp(16px, 4.5vw, 20px);
      --global-page-icon-gap: 14px;
      --global-drawer-inline: clamp(16px, 4.8vw, 24px);
      --global-drawer-section-gap: 16px;
      --global-section-padding: 18px;
      --global-control-gap: 12px;
      --global-control-height: 44px;

      /* 全局 UI 母模板变量：底部抽屉 / 居中弹窗 / 滚动条 / 抽屉内部区块只从这里取值 */
      --global-overlay-bg: rgba(0, 0, 0, .42);
      --global-overlay-duration: .24s;
      --global-overlay-easing: cubic-bezier(.2, .8, .2, 1);

      /* 全局层级：禁止极端 z-index，所有浮层只从这里取值 */
      --layer-base: 0;
      --layer-content: 1;
      --layer-popover: 10;
      --layer-drawer-overlay: 20;
      --layer-modal-overlay: 30;
      --global-drawer-max-height: min(88dvh, 780px);
      --global-drawer-max-width: 760px;
      --global-drawer-transition-duration: .28s;
      --global-drawer-transition-easing: cubic-bezier(.2, .8, .2, 1);
      --global-drawer-close-threshold: 72px;
      --global-drawer-radius: 34px;
      --global-drawer-shadow: 0 -18px 48px rgba(0, 0, 0, .18);
      --global-drawer-header-height: 72px;
      --global-drawer-header-padding: 25px var(--global-drawer-inline) 13px;
      --global-drawer-handle-top: 8px;
      --global-drawer-handle-width: 38px;
      --global-drawer-handle-height: 4px;
      --global-drawer-handle-color: #C9C9CE;
      --global-drawer-title-size: 19px;
      --global-drawer-body-start: 12px;
      --global-drawer-body-bottom: max(24px, env(safe-area-inset-bottom));
      --global-section-radius: 28px;
      --global-section-title-gap: 13px;
      --global-section-shadow: 0 3px 14px rgba(0, 0, 0, .045);

      /* 全局内部排版 token：统一既有值，不改变视觉结果 */
      --global-inner-stack-gap: 12px;
      --global-inner-row-min-height: 54px;
      --global-inner-row-padding-y: 11px;
      --global-inner-row-gap: 12px;
      --global-inner-list-inline: 14px;
      --global-inner-form-min-height: 64px;
      --global-inner-form-padding-top: 11px;
      --global-inner-form-padding-bottom: 10px;
      --global-inner-form-gap: 6px;
      --global-inner-field-height: 34px;
      --global-inner-note-size: 10px;
      --global-inner-divider-size: 1px;

      --global-modal-width: 318px;
      --global-modal-width-small: 280px;
      --global-modal-width-large: min(92vw, 520px);
      --global-modal-max-height: min(82dvh, 640px);
      --global-modal-transition-duration: .2s;
      --global-modal-transition-easing: cubic-bezier(.2, .8, .2, 1);
      --global-modal-radius: 24px;
      --global-modal-shadow: 0 22px 58px rgba(0, 0, 0, .24);
      --global-modal-overlay-padding: 24px;
      --global-modal-content-padding: 22px 20px 16px;
      --global-modal-title-size: 18px;
      --global-modal-message-gap: 8px;
      --global-modal-message-width: 250px;
      --global-modal-message-size: 12px;
      --global-modal-input-gap: 15px;
      --global-modal-input-padding: 0 12px;
      --global-modal-actions-gap: 8px;
      --global-modal-actions-padding: 0 16px 16px;
      --global-modal-control-height: 43px;
      --global-modal-control-radius: 12px;
      --global-modal-action-padding: 9px 12px;
      --global-modal-action-size: 13px;
      /* Global scrollbar single source of truth. */
      --global-scrollbar-size: 4px;
      --global-scrollbar-thumb: #000000;
      --global-scrollbar-track: transparent;
      --global-scrollbar-radius: 999px;
      --global-scrollbar-inset: 4px;
      --global-scrollbar-min-thumb: 28px;
      --global-scrollbar-opacity: .82;
      --global-scrollbar-hide-delay: 720ms;
      --global-emphasis-shell-bg: #000000;
      --global-emphasis-shell-fg: #FFFFFF;
      --global-emphasis-shell-border: #000000;

      --column-gap: clamp(6px, 2.8vw, 18px);
      --row-gap: 15px;
      --label-gap: clamp(4px, 1vh, 7px);
      --label-size: clamp(10px, 3.5vw, 14px);
      --label-line: calc(var(--label-size) * 1.2);
      --dock-pad: clamp(7px, 2.8vw, 12px);
      --width-icon: calc((100vw - (var(--global-page-inline) * 2) - (var(--column-gap) * 3)) / 4);
      --height-icon: calc((100dvh - var(--global-page-start) - var(--global-page-bottom) - var(--row-gap) - (var(--label-gap) * 2) - (var(--label-line) * 2) - (var(--dock-pad) * 2)) / 3);
      --icon-size: max(0px, min(68px, var(--width-icon), var(--height-icon)));

      /* 全局父级页面 UI 变量：后续父级页统一复用 */
      --parent-bg: #F5F5F7;
      --parent-card-bg: #FFFFFF;
      --parent-text: #000000;
      --parent-muted: #D1D1D6;
      --parent-radius: 26px;
      /* 全局页面主标题唯一母变量：所有父级页与 App 大标题只读取这一组。 */
      --global-page-title-font: SimHei, "Heiti SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      --global-page-title-size: 32px;
      --global-page-title-weight: 700;
      --global-page-title-letter-spacing: -.04em;
      --global-page-title-line-height: 1.08;
      --global-page-title-gap: 24px;
      --parent-list-gap: var(--global-page-content-gap);
      --parent-row-height: var(--global-page-row-height);
      --parent-row-font: clamp(14px, 3.9vw, 16px);
      --parent-logo-size: clamp(14px, 4vw, 17px);
      --parent-logo-shell: 38px;
      --parent-logo-radius: 11px;
      --parent-chevron-size: clamp(12px, 3.5vw, 15px);

      /* 主题定制统一变量 */
      --home-wallpaper-color: #FFFFFF;
      --custom-icon-scale: 1;
      --custom-icon-radius: 35%;
      --user-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      --user-font-size-scale: 1;
      --user-font-weight: 400;

      /* 全局抽屉 / 弹窗 / 滚动条固定样式 */
      --ui-surface: #FFFFFF;
      --ui-panel: #F5F5F7;
      --ui-surface-secondary: #F0F0F2;
      --ui-text: #111112;
      --ui-muted: #75757C;
      --ui-line: #E3E3E7;
      --ui-danger: #FF3B30;
      --ui-control-radius: 20px;
      --theme-color: #000000;
      --theme-color-contrast: #FFFFFF;
      --display-scale: 1;
      --home-icon-bg: var(--theme-color);
      --home-icon-fg: var(--theme-color-contrast);
      --home-label: #000000;
      --dock-bg: rgba(255, 255, 255, .62);
      --dock-border: rgba(255, 255, 255, .66);
    }

    :root[data-theme-texture="dark"] {
      --parent-bg: #101012;
      --parent-card-bg: #1C1C1E;
      --parent-text: #F7F7F8;
      --parent-muted: #77777F;
      --ui-surface: #1C1C1E;
      --ui-panel: #111113;
      --ui-surface-secondary: #2A2A2D;
      --ui-text: #F7F7F8;
      --ui-muted: #9A9AA2;
      --ui-line: #333338;
      --home-label: #FFFFFF;
      --dock-bg: rgba(28, 28, 30, .72);
      --dock-border: rgba(255, 255, 255, .10);
      --home-wallpaper-color: #0D0D0F;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    *:focus,
    *:focus-visible {
      outline: none;
    }

    input:focus,
    input:focus-visible,
    textarea:focus,
    textarea:focus-visible,
    select:focus,
    select:focus-visible {
      outline: none;
      border-color: var(--ui-line, #E3E3E7);
      box-shadow: none;
    }

    ::selection {
      background: rgba(118, 118, 128, .18);
      color: inherit;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      margin: 0;
    }

    body {
      width: var(--qwq-viewport-width, 100vw);
      height: var(--qwq-viewport-height, 100dvh);
      min-height: var(--qwq-viewport-height, 100svh);
      overflow: hidden;
      background: var(--home-wallpaper-color);
      color: var(--home-label);
      font-family: var(--user-font-family);
      font-weight: var(--user-font-weight);
      -webkit-font-smoothing: antialiased;
    }

    button {
      font: inherit;
      -webkit-tap-highlight-color: transparent;
    }

    .route-page {
      display: none;
      width: 100%;
      height: var(--qwq-viewport-height, 100%);
      min-width: 0;
      min-height: 0;
      /* 页面进入 / 退出统一即时切换；不要在 route-page 上添加 transition / animation。 */
    }

    .route-page.is-active {
      display: grid;
    }

    /* 主屏幕 */
    .desktop {
      position: relative;
      isolation: isolate;
      padding: var(--global-page-start) var(--global-page-inline) var(--global-page-bottom);
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
      background-color: var(--home-wallpaper-color);
      background-image: none;
    }

    .desktop-wallpaper-image {
      position: absolute;
      inset: 0;
      z-index: var(--layer-base);
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .desktop-wallpaper-image[hidden] { display: none; }

    .desktop > .top-grid,
    .desktop > .dock {
      position: relative;
      z-index: var(--layer-content);
    }

    .top-grid,
    .dock-grid {
      width: 100%;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--column-gap);
      align-items: start;
      justify-items: center;
    }

    .top-grid {
      grid-row: 1;
      width: min(100%, var(--global-page-max-width));
      justify-self: center;
      row-gap: var(--row-gap);
    }

    .app {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--label-gap);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .app[data-launchable="true"] {
      cursor: pointer;
    }

    .memory-app {
      grid-column: 1;
      grid-row: 2;
    }

    .icon-shell {
      width: calc(var(--icon-size) * var(--custom-icon-scale));
      height: calc(var(--icon-size) * var(--custom-icon-scale));
      min-width: 0;
      min-height: 0;
      flex: 0 0 calc(var(--icon-size) * var(--custom-icon-scale));
      border: 0;
      outline: 0;
      border-radius: var(--custom-icon-radius);
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--home-icon-bg);
      color: var(--home-icon-fg);
      box-shadow: none;
    }

    .icon-shell svg {
      display: block;
      width: 1em;
      height: 1em;
      color: var(--home-icon-fg);
    }

    .music svg { width: calc(var(--icon-size) * .46); height: calc(var(--icon-size) * .46); }
    .theme svg { width: calc(var(--icon-size) * .47); height: calc(var(--icon-size) * .47); }
    .qq svg { width: calc(var(--icon-size) * .50); height: calc(var(--icon-size) * .50); }
    .weibo svg { width: calc(var(--icon-size) * .48); height: calc(var(--icon-size) * .48); }
    .memory svg { width: calc(var(--icon-size) * .46); height: calc(var(--icon-size) * .46); }
    .phone svg { width: calc(var(--icon-size) * .43); height: calc(var(--icon-size) * .43); }
    .sms svg { width: calc(var(--icon-size) * .44); height: calc(var(--icon-size) * .44); }
    .atlas svg { width: calc(var(--icon-size) * .44); height: calc(var(--icon-size) * .44); }
    .settings svg { width: calc(var(--icon-size) * .46); height: calc(var(--icon-size) * .46); }

    .app-name {
      width: 100%;
      min-width: 0;
      min-height: var(--label-line);
      color: var(--home-label);
      font-family: var(--user-font-family);
      font-size: calc(var(--label-size) * var(--user-font-size-scale));
      font-weight: var(--user-font-weight);
      font-variation-settings: "wght" var(--user-font-weight);
      font-synthesis: none;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: none;
    }

    .dock {
      grid-row: 3;
      width: min(100%, var(--global-page-max-width));
      justify-self: center;
      min-width: 0;
      align-self: end;
      padding: var(--dock-pad);
      border: 1px solid var(--dock-border);
      outline: 0;
      border-radius: clamp(22px, 7vw, 30px);
      background: var(--dock-bg);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
      backdrop-filter: blur(18px) saturate(115%);
      -webkit-backdrop-filter: blur(18px) saturate(115%);
    }

    .dock-grid {
      column-gap: var(--column-gap);
      align-items: center;
    }

    /* 全局父级页面 UI：所有父级页只需使用 .parent-page */
    .parent-page {
      grid-template-rows: auto minmax(0, 1fr);
      padding: var(--global-page-start) var(--global-page-inline) var(--global-page-bottom);
      background: var(--parent-bg);
      color: var(--parent-text);
      overflow: hidden;
    }

    .parent-page-header {
      width: min(100%, var(--global-page-max-width));
      justify-self: center;
      min-width: 0;
      margin: 0 0 var(--global-page-title-gap);
    }

    /* 全局父页面标题栏：唯一公共源。任何 App 不得私自重定义 parent-page-header/action。 */
    .parent-page-header.has-action {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .parent-page-header.has-action .parent-page-title {
      min-width: 0;
      flex: 1 1 0;
      max-width: calc(100% - 60px);
      padding-inline-end: .18em;
      margin-inline-end: -.18em;
      /* 全局标题使用正体无衬线；保留 overflow:visible，避免大字号字形与动作位发生裁切。 */
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }

    .parent-page-header-action {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--parent-text);
      cursor: pointer;
      transition: transform .16s ease, background-color .16s ease, opacity .16s ease;
    }

    .parent-page-header-action:active {
      transform: scale(.97);
    }

    .parent-page-header-action:hover {
      background: var(--ui-surface-secondary);
    }

    /* 全局父页面 UI 图标契约：页头动作与列表图标统一采用 currentColor，禁止各 App 私改几何。 */
    .parent-page-header-action svg,
    .parent-page-header-action i {
      width: 18px;
      height: 18px;
      display: block;
      flex: 0 0 18px;
      color: currentColor;
      font-size: 18px;
      line-height: 1;
    }

    /* parent-page 中所有 UI 图标只服从核心几何/currentColor；图标内容统一由
       createInlineFontAwesomeIcon(classic + solid) 提供，业务 CSS 不再决定 SVG 外观。 */
    .parent-page :where(.parent-page-header-action, .parent-row-logo, .parent-row-chevron) svg {
      display: block;
      color: currentColor;
      fill: currentColor;
      stroke: none;
      pointer-events: none;
    }

    /* 唯一的全局页面主标题排版源。
       Theme / Settings / World Books / Stickers / Mask Presets / Chat Details / Music / Phone
       全部只挂 .global-page-title；业务 CSS 禁止覆写字体、字号、字重、字距与行高。 */
    .global-page-title {
      font-family: var(--global-page-title-font);
      font-size: calc(var(--global-page-title-size) * var(--display-scale));
      font-style: normal;
      font-weight: var(--global-page-title-weight);
      font-variation-settings: normal;
      letter-spacing: var(--global-page-title-letter-spacing);
      line-height: var(--global-page-title-line-height);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .parent-page-title {
      display: inline-block;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      overflow: visible;
      background: transparent;
      color: var(--parent-text);
      text-align: left;
      cursor: pointer;
      user-select: none;
    }

    .parent-page-list {
      width: min(100%, var(--global-page-max-width));
      justify-self: center;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: var(--parent-list-gap);
      padding: 0 0 max(8px, env(safe-area-inset-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      scroll-padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .parent-menu-group {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: var(--parent-radius);
      background: var(--parent-card-bg);
      box-shadow: 0 3px 14px rgba(0, 0, 0, .045);
    }

    .parent-row {
      position: relative;
      width: 100%;
      min-width: 0;
      min-height: var(--parent-row-height);
      flex: 0 0 var(--parent-row-height);
      padding: 0 var(--global-page-row-inline);
      border: 0;
      outline: 0;
      border-radius: 0;
      background: transparent;
      color: var(--parent-text);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 12px;
      box-shadow: none;
      text-align: left;
      cursor: pointer;
    }

    .parent-row:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: calc(var(--global-page-row-inline) + var(--parent-logo-shell) + var(--global-page-icon-gap));
      height: 1px;
      background: var(--ui-line);
      pointer-events: none;
    }

    .parent-row-left {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: var(--global-page-icon-gap);
    }

    .parent-row-logo {
      width: var(--parent-logo-shell);
      height: var(--parent-logo-shell);
      min-width: var(--parent-logo-shell);
      flex: 0 0 var(--parent-logo-shell);
      display: grid;
      place-items: center;
      border-radius: var(--parent-logo-radius);
      background: var(--home-icon-bg);
      color: var(--home-icon-fg);
      box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .22);
    }

    .parent-row-logo svg {
      width: var(--parent-logo-size);
      height: var(--parent-logo-size);
      color: var(--home-icon-fg);
    }

    .parent-row-name {
      min-width: 0;
      overflow: hidden;
      color: var(--parent-text);
      font-family: var(--user-font-family);
      font-size: calc(var(--parent-row-font) * var(--user-font-size-scale) * var(--display-scale));
      font-weight: var(--user-font-weight);
      font-variation-settings: "wght" var(--user-font-weight);
      font-synthesis: none;
      line-height: 1.2;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .parent-row-chevron {
      display: grid;
      place-items: center;
      color: var(--parent-muted);
    }

    .parent-row-chevron svg {
      width: var(--parent-chevron-size);
      height: var(--parent-chevron-size);
    }

    /* 主题 App 全局 UI：Overlay / 抽屉 / 居中弹窗 / 滚动条只允许复用这一套 */
    .global-overlay {
      position: fixed;
      inset: 0;
      width: var(--qwq-viewport-width, 100vw);
      height: var(--qwq-viewport-height, 100dvh);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: var(--global-overlay-bg);
      transition: opacity var(--global-overlay-duration) var(--global-overlay-easing);
    }

    .global-overlay.is-mounted {
      visibility: visible;
      pointer-events: auto;
    }

    .global-overlay.is-open {
      opacity: 1;
    }

    .ui-overlay {
      z-index: var(--layer-drawer-overlay);
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .global-drawer {
      position: relative;
      width: min(100%, var(--global-drawer-max-width));
      max-height: var(--global-drawer-max-height);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      border-radius: var(--global-drawer-radius) var(--global-drawer-radius) 0 0;
      background: var(--ui-panel);
      color: var(--ui-text);
      box-shadow: var(--global-drawer-shadow);
      transform: translateY(100%);
      transition: transform var(--global-drawer-transition-duration) var(--global-drawer-transition-easing);
    }

    .ui-overlay.is-open .global-drawer {
      transform: translateY(0);
    }

    .global-drawer.is-dragging {
      transform: translateY(var(--global-drawer-drag-offset, 0px));
      transition: none;
    }

    .global-drawer-header {
      position: relative;
      min-height: var(--global-drawer-header-height);
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: end;
      padding: var(--global-drawer-header-padding);
      overflow: hidden;
      border-radius: var(--global-drawer-radius) var(--global-drawer-radius) 0 0;
      background: var(--ui-panel);
      background-clip: padding-box;
      touch-action: none;
    }

    .global-drawer-header::before {
      content: "";
      position: absolute;
      top: var(--global-drawer-handle-top);
      left: 50%;
      width: var(--global-drawer-handle-width);
      height: var(--global-drawer-handle-height);
      border-radius: 999px;
      background: var(--global-drawer-handle-color);
      transform: translateX(-50%);
    }

    .global-drawer-title {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      font-size: calc(var(--global-drawer-title-size) * var(--display-scale));
      font-weight: 600;
      letter-spacing: -.015em;
      line-height: 1.15;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ui-action-button:active,
    .font-local-button:active,
    .font-url-apply:active,
    .icon-custom-item:active {
      transform: scale(.97);
    }

    .ui-action-button svg,
    .font-local-button svg,
    .font-url-apply svg {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
    }

    .global-drawer-body {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      padding: var(--global-drawer-body-start) var(--global-drawer-inline) var(--global-drawer-body-bottom);
    }

    /* 全局居中弹窗：从主题 App 迁回系统核心，保持单一母模板。 */
    .global-modal-overlay {
      z-index: var(--layer-modal-overlay);
      display: grid;
      place-items: center;
      padding: max(var(--global-modal-overlay-padding), env(safe-area-inset-top))
               var(--global-modal-overlay-padding)
               max(var(--global-modal-overlay-padding), env(safe-area-inset-bottom));
    }

    .global-modal {
      width: min(100%, var(--global-modal-width));
      max-height: min(
        var(--global-modal-max-height),
        calc(100dvh - (var(--global-modal-overlay-padding) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom))
      );
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: var(--global-modal-radius);
      background: var(--ui-surface);
      color: var(--ui-text);
      box-shadow: var(--global-modal-shadow);
      opacity: 0;
      transform: scale(.96);
      transition:
        transform var(--global-modal-transition-duration) var(--global-modal-transition-easing),
        opacity var(--global-modal-transition-duration) var(--global-modal-transition-easing);
    }

    .global-modal-overlay.is-open .global-modal {
      opacity: 1;
      transform: scale(1);
    }

    .global-modal[data-size="small"] {
      width: min(100%, var(--global-modal-width-small));
    }

    .global-modal[data-size="default"] {
      width: min(100%, var(--global-modal-width));
    }

    .global-modal[data-size="large"] {
      width: min(100%, var(--global-modal-width-large));
    }

    .global-modal-content {
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      /* 可滚动 flex 子项必须允许收缩；min-content 会把长弹窗撑出外壳后被父级裁掉。 */
      min-height: 0;
      max-height: calc(var(--qwq-viewport-height, 100vh) - 150px);
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      padding: var(--global-modal-content-padding);
      color: var(--ui-text, #111111);
      -webkit-text-fill-color: currentColor;
    }

    .global-modal-title {
      margin: 0;
      font-size: var(--global-modal-title-size);
      font-weight: 600;
      letter-spacing: -.012em;
      line-height: 1.25;
      text-align: center;
    }

    .global-modal-message {
      display: block;
      margin: var(--global-modal-message-gap) auto 0;
      max-width: var(--global-modal-message-width);
      color: var(--ui-muted, #6E6E73);
      -webkit-text-fill-color: currentColor;
      font-size: var(--global-modal-message-size);
      font-weight: 500;
      line-height: 1.55;
      text-align: center;
    }

    .global-modal-input {
      width: 100%;
      height: var(--global-modal-control-height);
      margin-top: var(--global-modal-input-gap);
      padding: var(--global-modal-input-padding);
      border: 1px solid var(--ui-line);
      border-radius: var(--global-modal-control-radius);
      outline: 0;
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      font: inherit;
      font-size: var(--global-modal-action-size);
      font-weight: 500;
    }

    .global-modal-input:focus {
      border-color: #B8B8BE;
      background: var(--ui-surface);
    }

    .global-modal-actions {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--global-modal-actions-gap);
      padding: var(--global-modal-actions-padding);
      background: var(--ui-surface);
    }

    .global-modal-actions[data-action-count="1"] {
      grid-template-columns: minmax(0, 1fr);
    }

    .global-modal-action {
      min-height: var(--global-modal-control-height);
      padding: var(--global-modal-action-padding);
      border: 0;
      border-radius: var(--global-modal-control-radius);
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      font-size: var(--global-modal-action-size);
      font-weight: 600;
      cursor: pointer;
    }

    .global-modal-action.is-confirm {
      background: var(--theme-color);
      color: var(--theme-color-contrast);
    }

    .global-modal-action.is-confirm.is-danger {
      background: var(--ui-danger);
      color: #FFFFFF;
    }

    .global-modal-message[hidden],
    .global-modal-extra[hidden],
    .global-modal-input[hidden],
    .global-modal-action[hidden] {
      display: none;
    }

    .global-modal-extra {
      margin-top: var(--global-modal-input-gap);
      color: var(--ui-text, #111111);
      -webkit-text-fill-color: currentColor;
    }

    /* 唯一全局滚动规范。
       浏览器原生滚动条全部隐藏；纵向不渲染任何滚动条/指示器。
       仅在真实横向滚动时由 core.js 的 .global-scroll-indicator 读取 --global-scrollbar-* 母变量渲染，业务 App 不得自定义滚动条皮肤。 */
    html, body, body * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    body *::-webkit-scrollbar,
    body .global-scroll::-webkit-scrollbar {
      /* 只隐藏滚动条外观，不用 display:none 干预滚动机制。 */
      width: 0;
      height: 0;
      background: transparent;
    }

    body .global-scroll {
      scrollbar-width: none;
      -ms-overflow-style: none;
      scrollbar-gutter: auto;
    }

    .global-scroll-indicator {
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-modal-overlay);
      width: 0;
      height: 0;
      min-width: 0;
      min-height: 0;
      border-radius: var(--global-scrollbar-radius);
      background: var(--global-scrollbar-thumb);
      opacity: 0;
      transform: translate3d(-100px, -100px, 0);
      transition: opacity .16s ease;
      pointer-events: none;
      will-change: transform, width, height, opacity;
    }

    .global-scroll-indicator.is-visible {
      opacity: var(--global-scrollbar-opacity);
    }

    /* 全局弹窗内部列表母模板：业务模块只提供内容，不再自造弹窗壳。 */
    .global-modal-list {
      width: 100%;
      margin-top: 14px;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: 16px;
      background: var(--ui-surface-secondary);
    }

    .global-modal-row {
      position: relative;
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ui-text);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .global-modal-row + .global-modal-row::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 0;
      top: 0;
      height: 1px;
      background: var(--ui-line);
      transform: scaleY(.5);
      transform-origin: top;
      pointer-events: none;
    }

    .global-modal-row:active {
      background: color-mix(in srgb, var(--ui-text) 5%, transparent);
    }

    .global-modal-row-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .global-modal-row-label {
      min-width: 0;
      overflow: hidden;
      font-size: calc(13px * var(--user-font-size-scale) * var(--display-scale));
      font-weight: 600;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-modal-row-note {
      min-width: 0;
      overflow: hidden;
      color: var(--ui-muted);
      font-size: calc(10px * var(--user-font-size-scale) * var(--display-scale));
      font-weight: 500;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-modal-row-mark {
      min-width: 18px;
      color: var(--ui-muted);
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
    }

    .global-modal-row.is-selected .global-modal-row-mark {
      color: var(--ui-text);
    }

    .global-modal-row-mark svg {
      width: 9px;
      height: 9px;
      display: block;
      margin-inline: auto;
      color: currentColor;
    }

    .global-modal-field-stack {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      margin-top: 12px;
    }

    .global-modal-field-stack .global-modal-input {
      margin-top: 0;
    }

    /* GlobalModal 颜色选择内部原语：业务页面只提供值，不再调用浏览器原生 color picker。 */
    .global-modal-color-preview {
      min-height: 48px;
      padding: 8px 10px;
      border: 1px solid var(--ui-line);
      border-radius: var(--global-modal-control-radius);
      background: var(--ui-surface-secondary);
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }

    .global-modal-color-preview-swatch {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
      background: transparent;
    }

    .global-modal-color-preview-value {
      min-width: 0;
      overflow: hidden;
      color: var(--ui-text);
      font-size: calc(12px * var(--user-font-size-scale) * var(--display-scale));
      font-weight: 600;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-modal-color-preview.is-invalid .global-modal-color-preview-value {
      color: var(--ui-danger);
    }

    .global-modal-color-palette {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 8px;
      padding: 2px;
    }

    .global-modal-color-chip {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      min-width: 0;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--ui-text) 15%, transparent);
      border-radius: 50%;
      outline: 0;
      background: var(--global-modal-chip-color);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
      cursor: pointer;
      transition: transform .14s ease, opacity .14s ease;
    }

    .global-modal-color-chip:active {
      transform: scale(.9);
      opacity: .76;
    }

    .ui-section {
      padding: var(--global-section-padding);
      border: 1px solid var(--ui-line);
      border-radius: var(--global-section-radius);
      background: var(--ui-surface);
      box-shadow: var(--global-section-shadow);
    }

    .ui-section + .ui-section {
      margin-top: var(--global-drawer-section-gap);
    }

    .ui-section-title {
      margin: 0 0 var(--global-section-title-gap);
      color: var(--ui-muted);
      font-size: calc(12px * var(--display-scale));
      font-weight: 600;
      letter-spacing: .025em;
      line-height: 1.2;
    }

    .about-version-shell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 22px 12px 20px;
      text-align: center;
    }

    .about-version-big {
      font-size: clamp(38px, 11vw, 58px);
      font-weight: 700;
      letter-spacing: .01em;
      line-height: 1.05;
      color: var(--ui-text);
      font-variant-numeric: tabular-nums;
    }

    .about-version-sub {
      font-size: calc(13px * var(--display-scale));
      font-weight: 500;
      color: var(--ui-muted);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .about-disclaimer {
      margin: 0;
      color: var(--ui-muted);
      font-size: calc(12px * var(--display-scale));
      line-height: 1.55;
    }

    .ui-action-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--global-control-gap);
      margin-top: var(--global-drawer-section-gap);
    }

    .ui-action-row[data-columns="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-section-title + .ui-action-row,
    .ui-section > .ui-action-row:first-child {
      margin-top: 0;
    }

    .ui-action-button {
      min-width: 0;
      min-height: var(--global-control-height);
      padding: 10px 13px;
      border: 1px solid transparent;
      border-radius: var(--ui-control-radius);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      font-size: calc(13px * var(--display-scale));
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      transition: transform .16s ease, background-color .16s ease;
    }

    .ui-action-button.is-primary {
      border-color: rgba(127, 127, 127, .22);
      background: var(--theme-color);
      color: var(--theme-color-contrast);
    }

    .ui-action-button.is-danger {
      background: #FFF1F0;
      color: var(--ui-danger);
      border-color: #FFD7D3;
    }

    .ui-action-button.is-wide {
      width: 100%;
      margin-top: 14px;
    }

    .ui-action-button:disabled {
      color: #A7A7AD;
      cursor: default;
      opacity: .55;
      transform: none;
    }

    .wallpaper-preview {
      position: relative;
      width: 100%;
      height: clamp(132px, 37vw, 190px);
      margin: 1px auto 0;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: 24px;
      background: var(--home-wallpaper-color);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
    }

    .wallpaper-preview-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .wallpaper-preview-image[hidden] { display: none; }

    .native-select {
      width: 100%;
      min-width: 0;
      min-height: var(--global-control-height);
      margin: 0;
      padding: 0 4px;
      border: 0;
      border-radius: 0;
      outline: 0;
      appearance: auto;
      -webkit-appearance: menulist;
      background: transparent;
      box-shadow: none;
      color: var(--ui-text);
      font: inherit;
      font-size: calc(13px * var(--display-scale));
      font-weight: 600;
      line-height: 1.2;
      cursor: pointer;
    }

    .native-select:focus,
    .native-select:focus-visible {
      outline: 0;
      box-shadow: none;
    }

    .native-select:disabled {
      color: var(--ui-muted);
      cursor: default;
      opacity: .62;
    }

    .ui-control-list {
      overflow: hidden;
      border: 0;
      border-radius: 28px;
      background: var(--ui-surface-secondary);
      padding: 0 var(--global-inner-list-inline);
    }

    .ui-range-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "label value"
        "range range";
      align-items: center;
      gap: 9px 12px;
      min-height: 76px;
      padding: 13px 0 14px;
    }

    .ui-range-label {
      grid-area: label;
    }

    .ui-range-value {
      grid-area: value;
      min-width: 48px;
      padding: 4px 8px;
      border-radius: 999px;
      background: var(--ui-surface);
      color: var(--ui-text);
      text-align: center;
    }

    .ui-range-label,
    .ui-range-value {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
    }

    .global-range {
      grid-area: range;
      width: 100%;
      min-width: 0;
      height: 22px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      cursor: pointer;
      touch-action: none;
    }

    .global-range::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(to right, var(--theme-color) 0 var(--range-progress, 50%), var(--ui-line) var(--range-progress, 50%) 100%);
    }

    .global-range::-webkit-slider-thumb {
      width: 8px;
      height: 18px;
      margin-top: -6px;
      border: 0;
      border-radius: 2px;
      appearance: none;
      -webkit-appearance: none;
      background: var(--theme-color);
      box-shadow: 0 0 0 1px rgba(127,127,127,.18);
    }

    .global-range::-moz-range-track {
      height: 6px;
      border: 0;
      border-radius: 999px;
      background: var(--ui-line);
    }

    .global-range::-moz-range-progress {
      height: 6px;
      border-radius: 999px;
      background: var(--theme-color);
    }

    .global-range::-moz-range-thumb {
      width: 8px;
      height: 18px;
      border: 0;
      border-radius: 2px;
      background: var(--theme-color);
      box-shadow: 0 0 0 1px rgba(127,127,127,.18);
    }

    .icon-custom-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px 10px;
      padding: 3px 0 1px;
    }

    .icon-custom-item {
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ui-text);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      transition: transform .16s ease;
    }

    .icon-custom-preview {
      position: relative;
      width: min(15.5vw, 60px);
      height: min(15.5vw, 60px);
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--ui-line);
      border-radius: var(--custom-icon-radius);
      background: var(--ui-surface);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    }

    .icon-custom-preview svg,
    .icon-custom-preview img {
      width: 56%;
      height: 56%;
      display: block;
      object-fit: cover;
    }

    .icon-custom-preview img {
      width: 100%;
      height: 100%;
    }

    .icon-custom-name {
      width: 100%;
      overflow: hidden;
      color: var(--ui-muted);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .font-preview {
      min-height: 164px;
      padding: 21px;
      display: grid;
      align-content: center;
      gap: 9px;
      border: 0;
      border-radius: 20px;
      background: #111112;
      color: #FFFFFF;
      font-family: var(--user-font-family);
      line-height: 1.25;
      text-align: left;
      box-shadow: 0 7px 22px rgba(0, 0, 0, .12);
    }

    .font-preview-title {
      overflow: hidden;
      font-family: var(--user-font-family);
      font-size: calc(34px * var(--user-font-size-scale));
      font-weight: var(--user-font-weight);
      font-variation-settings: "wght" var(--user-font-weight);
      font-synthesis: none;
      letter-spacing: -.035em;
      line-height: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .font-preview-sample {
      font-family: var(--user-font-family);
      font-size: calc(20px * var(--user-font-size-scale));
      font-weight: var(--user-font-weight);
      font-variation-settings: "wght" var(--user-font-weight);
      font-synthesis: none;
    }

    .font-preview small {
      color: #BEBEC4;
      font-family: var(--user-font-family);
      font-size: calc(11px * var(--user-font-size-scale));
      font-weight: var(--user-font-weight);
      font-variation-settings: "wght" var(--user-font-weight);
      font-synthesis: none;
      line-height: 1.5;
    }

    .font-source-row {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr);
      gap: 10px;
    }

    .font-local-button,
    .font-url-control {
      min-width: 0;
      min-height: var(--global-control-height);
      border: 1px solid var(--ui-line);
      border-radius: var(--ui-control-radius);
      background: var(--ui-surface-secondary);
    }

    .font-local-button {
      padding: 9px 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: var(--ui-text);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .16s ease;
    }

    .font-url-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      overflow: hidden;
    }

    .font-url-input {
      width: 100%;
      min-width: 0;
      height: 42px;
      padding: 0 11px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ui-text);
      font: inherit;
      font-size: 12px;
      font-weight: 500;
    }

    .font-url-input::placeholder {
      color: #A1A1A7;
    }

    .global-emphasis-shell {
      border-color: var(--global-emphasis-shell-border);
      background: var(--global-emphasis-shell-bg);
      color: var(--global-emphasis-shell-fg);
    }

    .global-emphasis-shell:disabled {
      border-color: var(--ui-line);
      background: var(--ui-surface-secondary);
      color: var(--ui-muted);
    }

    .font-url-apply {
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      border-left: 1px solid var(--ui-line);
      display: grid;
      place-items: center;
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      cursor: pointer;
      transition: transform .16s ease;
    }


    /* 全局抽屉内部控件母模板：主题与设置共同复用，禁止再建立 settings-* 平行样式 */
    .ui-stack {
      display: grid;
      gap: var(--global-inner-stack-gap);
    }

    .ui-list-row {
      min-width: 0;
      min-height: var(--global-inner-row-min-height);
      padding: var(--global-inner-row-padding-y) 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--global-inner-row-gap);
      align-items: center;
    }

    .ui-control-list > * + * {
      border-top: var(--global-inner-divider-size) solid var(--ui-line);
    }

    .ui-row-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .ui-row-label,
    .ui-field-label {
      color: var(--ui-text);
      font-size: calc(13px * var(--display-scale));
      font-weight: 600;
      line-height: 1.25;
    }

    .ui-row-note,
    .ui-row-value,
    .ui-footnote {
      color: var(--ui-muted);
      font-size: calc(var(--global-inner-note-size) * var(--display-scale));
      font-weight: 500;
      line-height: 1.45;
    }

    .ui-row-value {
      max-width: 132px;
      overflow: hidden;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ui-form-row {
      min-width: 0;
      min-height: var(--global-inner-form-min-height);
      padding: var(--global-inner-form-padding-top) 0 var(--global-inner-form-padding-bottom);
      display: grid;
      align-content: center;
      gap: var(--global-inner-form-gap);
    }

    .ui-field-label {
      color: var(--ui-muted);
      font-size: calc(11px * var(--display-scale));
    }

    .ui-field-input,
    .ui-field-select {
      width: 100%;
      min-width: 0;
      height: var(--global-inner-field-height);
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
      color: var(--ui-text);
      font: inherit;
      font-size: calc(13px * var(--display-scale));
      font-weight: 600;
      line-height: 1.2;
    }

    .ui-field-input::placeholder {
      color: #A1A1A7;
      font-weight: 500;
    }

    .ui-field-input:focus,
    .ui-field-select:focus,
    .ui-field-input:focus-visible,
    .ui-field-select:focus-visible {
      outline: 0;
      box-shadow: none;
    }

    .ui-field-select {
      min-height: var(--global-inner-field-height);
      appearance: auto;
      -webkit-appearance: menulist;
      cursor: pointer;
    }

    .ui-model-picker-control {
      min-width: 0;
      min-height: 34px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      align-items: center;
    }

    .ui-model-picker-control .ui-field-input {
      height: 34px;
    }

    .ui-model-picker-toggle {
      width: 30px;
      height: 30px;
      padding: 0;
      border: 0;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--ui-muted);
      cursor: pointer;
      transition: transform .18s ease, color .18s ease;
    }

    .ui-model-picker-toggle svg {
      width: 12px;
      height: 12px;
    }

    .ui-model-picker.is-open .ui-model-picker-toggle {
      color: var(--ui-text);
      transform: rotate(180deg);
    }

    .ui-model-picker-options {
      display: none;
      max-height: 184px;
      margin-top: 4px;
      padding-top: 4px;
      overflow-y: auto;
      border-top: 1px solid var(--ui-line);
    }

    .ui-model-picker.is-open .ui-model-picker-options {
      display: block;
    }

    .ui-model-option {
      width: 100%;
      min-height: 38px;
      padding: 8px 0;
      border: 0;
      background: transparent;
      color: var(--ui-text);
      font: inherit;
      font-size: calc(12px * var(--display-scale));
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
      cursor: pointer;
    }

    .ui-model-option + .ui-model-option {
      border-top: 1px solid var(--ui-line);
    }

    .ui-model-option.is-empty {
      color: var(--ui-muted);
      cursor: default;
    }

    .ui-switch {
      position: relative;
      width: 46px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: var(--ui-line);
      cursor: pointer;
      transition: background-color .16s ease;
    }

    .ui-switch::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--ui-surface);
      box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
      transition: transform .16s ease;
    }

    .ui-switch.is-on {
      background: var(--ui-text);
    }

    .ui-switch.is-on::after {
      transform: translateX(18px);
    }

    .ui-field-select:disabled,
    .ui-field-input:disabled {
      cursor: default;
      opacity: .55;
    }

    .ui-footnote {
      margin: 12px 0 0;
      padding: 0 2px;
      text-align: left;
    }

    .theme-hidden-input {
      position: fixed;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .ui-field-textarea {
      width: 100%;
      min-width: 0;
      min-height: 150px;
      margin: 0;
      padding: 12px 13px;
      resize: vertical;
      border: 1px solid var(--ui-line);
      border-radius: var(--ui-control-radius);
      outline: 0;
      background: var(--ui-surface-secondary);
      color: var(--ui-text);
      font: inherit;
      font-size: calc(13px * var(--display-scale));
      font-weight: 500;
      line-height: 1.55;
    }

    .ui-field-textarea::placeholder {
      color: #A1A1A7;
    }

    .ui-field-textarea:focus,
    .ui-field-textarea:focus-visible {
      outline: 0;
      border-color: var(--ui-text);
    }

    .contact-avatar-editor {
      display: grid;
      place-items: center;
      padding: 2px 0 0;
      margin-bottom: var(--global-drawer-section-gap);
    }

    .contact-avatar-picker {
      position: relative;
      width: clamp(90px, 26vw, 108px);
      height: clamp(90px, 26vw, 108px);
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--ui-surface-secondary);
      cursor: pointer;
    }

    .contact-avatar-preview {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      background: var(--ui-surface-secondary);
    }

    .contact-avatar-preview img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 50% 50%;
    }

    .contact-avatar-add {
      position: absolute;
      right: 1px;
      bottom: 3px;
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--theme-color);
      color: #fff;
      box-shadow: none;
      pointer-events: none;
    }

    .contact-avatar-add svg {
      width: 20px;
      height: 20px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
    }

    .contact-setting-row {
      display: grid;
      gap: 9px;
    }

    .contact-setting-heading {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .contact-self-love-control {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .contact-self-love-label {
      color: var(--ui-muted);
      font-size: calc(11px * var(--display-scale));
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
    }

    .contact-self-love-control .ui-switch {
      width: 38px;
      height: 23px;
    }

    .contact-self-love-control .ui-switch::after {
      top: 3px;
      left: 3px;
      width: 17px;
      height: 17px;
    }

    .contact-self-love-control .ui-switch.is-on::after {
      transform: translateX(15px);
    }