:root{
    --ui-color:#ffdfdf;
    --home-png-theme-hue:0deg;
    --home-png-theme-saturation:1;
    --home-png-theme-brightness:1;
    --home-icon-color:#ffffff;
    --home-text-color:#000000;
    --shadow-warm-rgb:174,123,123;
    --shadow-deep-rgb:158,85,85;
    --highlight-tint-rgb:248,247,247;
    --ui-ink-rgb:34,34,34;
    --placeholder-bg:color-mix(in srgb,var(--ui-color) 84%,white);
    --placeholder-dot:color-mix(in srgb,var(--ui-color) 58%,white);
    --placeholder-mark:color-mix(in srgb,var(--ui-color) 24%,white);
    --icon-size:60px;
    --glyph-size:27px;
    --weixin-size:31px;
    --alipay-size:40px;
    --radius:30%;

    --app-shell-border:1px solid rgba(var(--highlight-tint-rgb),.26);
    --app-shell-shadow:
      2.5px 3px 5.5px rgba(var(--shadow-warm-rgb),.12),
      -1.7px -1.7px 3.8px rgba(var(--highlight-tint-rgb),.42);
    --app-shell-shadow-active:
      1.4px 1.8px 3.4px rgba(var(--shadow-warm-rgb),.09),
      -1px -1px 2.4px rgba(var(--highlight-tint-rgb),.32);
    --app-shell-active-scale:.95;
    --ui-surface-background:var(--ui-color);
    --ui-surface-backdrop:none;
    --ui-surface-backdrop-strong:none;
    --ui-surface-backdrop-dock:none;
    --ui-ridge-color:rgba(var(--highlight-tint-rgb),.26);
    --ui-ridge-shadow:var(--app-shell-shadow);
    --ui-divider-border:rgba(var(--highlight-tint-rgb),.36);
    --ui-divider-filter:
      drop-shadow(0 -1px 1.1px rgba(var(--highlight-tint-rgb),.24))
      drop-shadow(0 1.5px 1.5px rgba(var(--shadow-warm-rgb),.10));
    --ui-media-shadow:0 4px 12px rgba(var(--shadow-deep-rgb),.10);
    --text-main:#222222;
    --text-secondary:#555555;
    --edge-y:15px;
    --side-pad:clamp(15px,3.6vw,30px);
    --column-gap:clamp(14px,2.4vw,20px);
    /* 全局唯一纵向行距：应用/组件在主屏幕与布局系统中的纵向间隔。 */
    --global-row-gap:20px;
    /* 应用图标与应用名称之间的独立间隔。 */
    --app-item-gap:10px;
    --app-name-line:11px;
    --home-grid-column-gap:var(--column-gap);
    --home-grid-row-gap:var(--global-row-gap);
    --home-grid-cell:calc((100vw - (var(--side-pad) * 2) - (var(--home-grid-column-gap) * 3)) / 4);
    --dock-gap:15px;
    --dock-h:90px;
    --pager-gap:15px;
    --pager-h:8px;
    --layout-drawer-master:var(--ui-color);
    --layout-picker-gap:var(--home-grid-column-gap);
    --layout-picker-row-gap:var(--global-row-gap);
    --convex-divider-depth:30px;
  }

  :root[data-theme-texture="solid"]{
    --app-shell-border:1px solid var(--ui-color);
    --app-shell-shadow:none;
    --app-shell-shadow-active:none;
    --ui-surface-background:var(--ui-color);
    --ui-surface-backdrop:none;
    --ui-surface-backdrop-strong:none;
    --ui-surface-backdrop-dock:none;
    --ui-ridge-color:var(--ui-color);
    --ui-ridge-shadow:none;
    --ui-divider-border:var(--ui-color);
    --ui-divider-filter:none;
    --ui-media-shadow:none;
  }
  :root[data-theme-texture="glass"]{
    --app-shell-border:1px solid rgba(var(--highlight-tint-rgb),.46);
    --app-shell-shadow:
      0 7px 18px rgba(var(--shadow-deep-rgb),.18),
      2px 3px 7px rgba(var(--shadow-warm-rgb),.10),
      -1.4px -1.4px 3.4px rgba(var(--highlight-tint-rgb),.38);
    --app-shell-shadow-active:
      0 4px 11px rgba(var(--shadow-deep-rgb),.14),
      1px 2px 4px rgba(var(--shadow-warm-rgb),.08),
      -1px -1px 2.4px rgba(var(--highlight-tint-rgb),.30);
    --ui-surface-background:transparent;
    --ui-surface-backdrop:blur(12px) saturate(112%);
    --ui-surface-backdrop-strong:blur(18px) saturate(116%);
    --ui-surface-backdrop-dock:blur(24px) saturate(118%);
    --ui-ridge-color:rgba(var(--highlight-tint-rgb),.42);
    --ui-ridge-shadow:0 -4px 10px rgba(var(--shadow-deep-rgb),.13),0 -1px 2px rgba(var(--highlight-tint-rgb),.26);
    --ui-divider-border:rgba(var(--highlight-tint-rgb),.44);
    --ui-divider-filter:
      drop-shadow(0 -2px 3px rgba(var(--shadow-deep-rgb),.13))
      drop-shadow(0 1px 1.5px rgba(var(--highlight-tint-rgb),.24));
    --ui-media-shadow:0 6px 16px rgba(var(--shadow-deep-rgb),.14);
  }

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

  html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--ui-color);
  }

  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
    font-weight:400;
    color:var(--text-main);
    user-select:none;
    -webkit-user-select:none;
    overscroll-behavior:none;
  }

  button{font:inherit}

  .screen{
    position:relative;
    width:100%;
    height:100svh;
    height:100dvh;
    overflow:hidden;
    background:var(--ui-color);
  }

  .home-viewport{
    position:absolute;
    inset:
      env(safe-area-inset-top)
      0
      calc(var(--dock-gap) + var(--dock-h) + 20px + env(safe-area-inset-bottom))
      0;
    overflow:hidden;
    touch-action:pan-y;
  }

  .pages-track{
    height:100%;
    display:flex;
    will-change:transform;
    transform:translate3d(0,0,0);
  }

  .home-page{
    flex:0 0 100%;
    width:100%;
    height:100%;
    padding:var(--edge-y) var(--side-pad);
    min-width:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(6,var(--home-grid-cell));
    column-gap:var(--home-grid-column-gap);
    row-gap:var(--home-grid-row-gap);
    align-content:start;
  }
  .home-page::-webkit-scrollbar{display:none}

  .soft-panel{
    position:relative;
    overflow:hidden;
    border:var(--app-shell-border);
    border-radius:26px;
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
  }

  .personal-card{
    grid-column:1 / span 4;
    grid-row:1 / span 4;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
  }
  .app-panel,
  .sleeve-card,
  .status-card,
  .record-card{
    min-height:0;
  }
  .app-panel,
  .sleeve-card,
  .record-card{
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
    align-self:stretch;
  }
  .page-one-apps{grid-column:1 / span 2;grid-row:5 / span 2}
  .page-two-top-apps{grid-column:1 / span 2;grid-row:1 / span 2}
  .page-two-bottom-apps{grid-column:3 / span 2;grid-row:5 / span 2}

  .personal-media{
    position:relative;z-index:1;width:100%;height:58%;flex:0 0 58%;
    display:grid;place-items:center;overflow:hidden;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.6px,transparent 1.8px);
    background-size:13px 13px;
  }
  .personal-media .media-placeholder-glyph{width:clamp(72px,20vw,102px);height:clamp(84px,23vw,118px)}

  .personal-info{
    position:relative;
    z-index:2;
    width:100%;
    height:calc(42% + var(--convex-divider-depth));
    flex:0 0 calc(42% + var(--convex-divider-depth));
    margin-top:calc(-1 * var(--convex-divider-depth));
    padding:calc(40px + var(--convex-divider-depth)) 24px 20px;
    border-radius:var(--convex-divider-depth) var(--convex-divider-depth) 24px 24px;
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
    text-align:center;
  }

  .avatar{
    display:block;border-radius:50%;overflow:hidden;isolation:isolate;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.55px,transparent 1.8px);
    background-size:11px 11px;
    color:var(--placeholder-mark);
  }
  .avatar .avatar-silhouette{width:100%;height:100%;display:block;position:relative;z-index:1}
  .avatar .avatar-silhouette circle,.avatar .avatar-silhouette path{fill:currentColor}

  .personal-avatar{
    position:absolute;
    z-index:3;
    left:50%;
    top:-56px;
    width:112px;
    height:112px;
    transform:translateX(-50%);
    box-shadow:var(--ui-media-shadow);
  }

  .nickname{
    position:relative;
    z-index:4;
    margin:0;
    color:var(--home-text-color);
    font-size:19px;
    font-weight:600;
    line-height:1.15;
    letter-spacing:.01em;
  }

  .account{
    position:relative;
    z-index:4;
    margin-top:8px;
    color:var(--home-text-color);
    font-size:11.5px;
    font-weight:400;
    letter-spacing:.02em;
  }

  .signature{
    position:relative;
    z-index:4;
    margin:12px auto 0;
    max-width:92%;
    color:var(--home-text-color);
    font-size:12.5px;
    font-weight:400;
    line-height:1.36;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .location{
    position:relative;
    z-index:4;
    width:fit-content;
    max-width:calc(100% - 28px);
    margin:12px auto 0;
    padding:8px 14px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    border-radius:999px;
    background:var(--ui-color);
    border:var(--app-shell-border);
    box-shadow:var(--app-shell-shadow);
    color:var(--home-text-color);
    font-size:10.5px;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .location .fa-inline-icon{width:12px;height:12px;color:var(--home-icon-color);flex:0 0 12px}

  .app-panel{
    display:grid;
    place-items:center stretch;
  }

  .mini-app-grid{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    column-gap:var(--home-grid-column-gap);
    row-gap:var(--home-grid-row-gap);
    align-content:stretch;
    align-items:stretch;
    padding:0;
  }
  .mini-app-grid > .app{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    justify-content:center;
  }

  .app{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:var(--app-item-gap);
  }

  .app-icon{
    width:var(--icon-size);
    height:var(--icon-size);
    flex:0 0 var(--icon-size);
    display:grid;
    overflow:hidden;
    isolation:isolate;
    place-items:center;
    border:var(--app-shell-border);
    border-radius:var(--radius);
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
    transition:transform .14s ease,box-shadow .14s ease;
  }

  .app:active .app-icon,
  .dock-app:active .app-icon{
    transform:scale(var(--app-shell-active-scale));
    box-shadow:var(--app-shell-shadow-active);
  }

  .fa-inline-icon{display:block;fill:currentColor;flex:0 0 auto;max-width:100%;max-height:100%}
  .app-icon .fa-inline-icon{width:var(--glyph-size);height:var(--glyph-size);color:var(--home-icon-color)}
  .app-icon .brand-weixin{width:var(--weixin-size);height:var(--weixin-size)}
  .app-icon .brand-alipay-inner{width:var(--alipay-size);height:var(--alipay-size)}

  .app-icon > .fa-inline-icon{
    position:relative;
    z-index:1;
    object-fit:contain;
  }

  .app-name{
    width:100%;
    overflow:hidden;
    color:var(--home-text-color);
    font-size:var(--app-name-line);
    font-weight:400;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .home-page > .app[data-instance-kind="app"]{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    align-self:stretch;
    justify-self:stretch;
    justify-content:center;
  }
  .dock .app-name{display:none}

  .media-placeholder-glyph{
    position:relative;display:block;overflow:hidden;isolation:isolate;color:var(--placeholder-mark);
    max-width:100%;max-height:100%;
  }
  .media-placeholder-glyph .media-moon{
    position:absolute;left:7%;top:0;width:72%;height:100%;
  }
  .media-placeholder-glyph .media-star{
    position:absolute;right:0;top:0;width:27%;height:27%;
  }

  .sleeve-card{
    grid-column:3 / span 2;
    grid-row:5 / span 2;
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    isolation:isolate;
  }
  /* 第一页 2×2 拍立得组件：严格图层 + 无底色缝隙融合。左右图 < PNG < 中间图 */
  .sleeve-art{
    position:absolute;
    z-index:2;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    border:0;
    background:none;
    box-shadow:none;
    --home-png-source-hue:16.4deg;
    filter:
      hue-rotate(calc(var(--home-png-theme-hue) - var(--home-png-source-hue)))
      saturate(var(--home-png-theme-saturation))
      brightness(var(--home-png-theme-brightness));
    transition:filter .18s ease;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .sleeve-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    isolation:isolate;
    border:0;
    border-radius:0;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.35px,transparent 1.6px);
    background-size:11px 11px;
    background-position:center;
    background-repeat:repeat;
    box-shadow:none;
    pointer-events:auto;
  }
  .sleeve-photo-media{
    position:absolute;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    border:0;
    border-radius:0;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.35px,transparent 1.6px);
    background-size:11px 11px;
    background-position:center;
    background-repeat:repeat;
    box-shadow:none;
    transform-origin:50% 50%;
  }
  /* 左侧照片：整块位于 PNG 下方。遮罩略向边框内部溢出，由 PNG 本身完成最终裁边，杜绝页面底色露缝。 */
  .sleeve-photo-left{
    z-index:1;
    clip-path:polygon(6.55% 30.70%,38.55% 21.95%,47.10% 62.35%,14.10% 70.55%);
    -webkit-clip-path:polygon(6.55% 30.70%,38.55% 21.95%,47.10% 62.35%,14.10% 70.55%);
  }
  .sleeve-photo-left .sleeve-photo-media{
    left:28.0%;
    top:46.1%;
    width:48%;
    height:65%;
    transform:translate(-50%,-50%) rotate(-15.8deg) scale(1.05);
  }
  .sleeve-photo-right{
    z-index:1;
    clip-path:polygon(72.75% 31.10%,93.55% 42.75%,76.15% 80.35%,57.35% 69.40%);
    -webkit-clip-path:polygon(72.75% 31.10%,93.55% 42.75%,76.15% 80.35%,57.35% 69.40%);
  }
  .sleeve-photo-right .sleeve-photo-media{
    left:76.3%;
    top:57.7%;
    width:46%;
    height:64%;
    transform:translate(-50%,-50%) rotate(23.2deg) scale(1.05);
  }
  .sleeve-photo-center{
    z-index:3;
    clip-path:polygon(36.82% 12.43%,75.00% 19.77%,66.99% 66.13%,28.93% 58.70%);
    -webkit-clip-path:polygon(36.82% 12.43%,75.00% 19.77%,66.99% 66.13%,28.93% 58.70%);
  }
  .sleeve-photo-center .sleeve-photo-media{
    left:52.0%;
    top:39.3%;
    width:59%;
    height:67%;
    transform:translate(-50%,-50%) rotate(10.9deg) scale(1.04);
  }
  .sleeve-photo .media-placeholder-glyph{width:17%;height:22%}
  .cardpack-card{
    grid-column:3 / span 2;
    grid-row:1 / span 2;
    position:relative;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:1 / 1;
    align-self:stretch;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    isolation:isolate;
  }
  .cardpack-art{
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    display:block;
    width:auto;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:fill;
    object-position:center;
    transform:translate(-50%,-50%);
    border:0;
    background:none;
    box-shadow:none;
    --home-png-source-hue:21.8deg;
    filter:
      hue-rotate(calc(var(--home-png-theme-hue) - var(--home-png-source-hue)))
      saturate(var(--home-png-theme-saturation))
      brightness(var(--home-png-theme-brightness));
    transition:filter .18s ease;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .cardpack-cover{
    position:absolute;
    z-index:1;
    left:29.04%;
    top:19.86%;
    width:41.99%;
    height:61.20%;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    border:0;
    border-radius:15% 15% 7% 7% / 10% 10% 5% 5%;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.35px,transparent 1.6px);
    background-size:11px 11px;
    box-shadow:none;
  }
  .cardpack-cover .media-placeholder-glyph{width:42%;height:52%}
  .status-card{
    grid-column:1 / span 4;
    grid-row:3 / span 2;
    height:100%;
    align-self:stretch;
    padding:12px 16px;
    display:grid;
    grid-template-columns:1fr 104px 1fr;
    grid-template-rows:1fr 1fr;
    gap:8px 12px;
    align-items:center;
  }

  .status-center{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .status-center .avatar{
    width:93px;
    height:93px;
    box-shadow:var(--ui-media-shadow);
  }
  .status-name{
    width:104px;
    overflow:hidden;
    color:var(--home-text-color);
    font-size:13px;
    font-weight:500;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .status-pill{
    width:100%;
    min-height:34px;
    padding:6px 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:var(--app-shell-border);
    border-radius:13px;
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
    color:var(--home-text-color);
    font-size:11.2px;
    font-weight:400;
    line-height:1.22;
    text-align:center;
    overflow:hidden;
  }

  .record-card{
    grid-column:1 / span 2;
    grid-row:5 / span 2;
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    isolation:isolate;
  }
  .record-art{
    position:absolute;
    z-index:2;
    left:0;
    top:50%;
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:520 / 462;
    max-width:none;
    max-height:none;
    object-fit:fill;
    object-position:center;
    transform:translateY(-50%);
    border:0;
    background:none;
    box-shadow:none;
    --home-png-source-hue:14.2deg;
    filter:
      hue-rotate(calc(var(--home-png-theme-hue) - var(--home-png-source-hue)))
      saturate(var(--home-png-theme-saturation))
      brightness(var(--home-png-theme-brightness));
    transition:filter .18s ease;
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
  }
  .record-cover{
    position:absolute;
    z-index:1;
    left:35%;
    top:36.65%;
    width:30.16%;
    height:30.29%;
    border-radius:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    background-color:var(--placeholder-bg);
    background-image:radial-gradient(circle,var(--placeholder-dot) 1.35px,transparent 1.6px);
    background-size:11px 11px;
    box-shadow:none;
  }
  .record-cover .media-placeholder-glyph{width:48%;height:58%}

  /* 刷新首帧无感接管：模板本身按最终几何显示，只在 JS 接管期间关闭动效。 */
  html.app-booting .app-icon,
  html.app-booting .dock,
  html.app-booting .pager-dot,
  html.app-booting .pages-track,
  html.app-booting [data-instance-id]{
    transition:none;
    animation:none;
  }

  .pager{
    position:fixed;
    z-index:20;
    left:50%;
    bottom:calc(var(--dock-gap) + var(--dock-h) + var(--pager-gap) + env(safe-area-inset-bottom));
    height:var(--pager-h);
    display:flex;
    align-items:center;
    gap:7px;
    transform:translateX(-50%);
  }
  .pager-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border:0;
    padding:0;
    border-radius:999px;
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
    transform:translateZ(0);
    transition:
      width .30s cubic-bezier(.22,.8,.32,1),
      box-shadow .24s ease,
      transform .24s ease;
  }
  .pager-dot.active{
    width:14px;
    box-shadow:var(--app-shell-shadow);
  }

  .dock{
    --dock-inline-pad:var(--side-pad);
    --dock-item-gap:var(--home-grid-column-gap);
    position:fixed;
    z-index:30;
    left:50%;
    right:auto;
    bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom));
    width:auto;
    max-width:calc(100vw - (var(--side-pad) * 2));
    min-height:var(--dock-h);
    padding:14px var(--dock-inline-pad);
    display:grid;
    gap:var(--dock-item-gap);
    align-items:center;
    border:var(--app-shell-border);
    border-radius:28px;
    background:var(--ui-color);
    box-shadow:var(--app-shell-shadow);
    backdrop-filter:var(--ui-surface-backdrop-dock);
    -webkit-backdrop-filter:var(--ui-surface-backdrop-dock);
    transform:translateX(-50%);
    transition:
      width .20s cubic-bezier(.22,.76,.3,1),
      opacity .16s ease,
      box-shadow .16s ease,
      background-color .16s ease;
  }
  .dock[data-dock-count="1"]{
    width:calc((var(--dock-inline-pad) * 2) + var(--home-grid-cell));
    grid-template-columns:minmax(0,1fr);
  }
  .dock[data-dock-count="2"]{
    width:calc((var(--dock-inline-pad) * 2) + (var(--home-grid-cell) * 2) + var(--dock-item-gap));
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dock[data-dock-count="3"]{
    width:calc((var(--dock-inline-pad) * 2) + (var(--home-grid-cell) * 3) + (var(--dock-item-gap) * 2));
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .dock[data-dock-count="4"]{
    width:calc((var(--dock-inline-pad) * 2) + (var(--home-grid-cell) * 4) + (var(--dock-item-gap) * 3));
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .dock[data-dock-count="0"]{
    width:min(320px,calc(100vw - (var(--side-pad) * 2)));
    grid-template-columns:1fr;
    opacity:0;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    pointer-events:none;
  }
  .dock > .app[data-instance-id],
  .dock > .dock-app[data-instance-id]{
    width:var(--icon-size);
    min-width:var(--icon-size);
    max-width:var(--icon-size);
    justify-self:center;
  }
  .dock > [data-instance-id]{
    justify-self:center;
  }

  .dock-app{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  @media (max-width:360px){
    :root{
      --icon-size:54px;
      --glyph-size:25px;
      --weixin-size:29px;
      --app-name-line:10px;
    }
    .personal-avatar{width:104px;height:104px;top:-52px}
    .nickname{font-size:17px}
    .status-card{grid-template-columns:1fr 88px 1fr;padding-left:10px;padding-right:10px;gap:7px 7px}
    .status-center .avatar{width:80px;height:80px}
    .status-name{width:88px;font-size:12px}
    .status-pill{min-height:32px;padding:5px 8px;font-size:10px}
    .dock{padding-top:12px;padding-bottom:12px}
  }