/* ================= Home（iOS Widget 风格首页 · 横向分页 + 单页完整版） ================= */
/* 复用 style.css 里的设计变量（--bg、--text、--radius、--shadow 等前缀的变量），
   只在这里新增 Home 专属的组件样式，不覆盖聊天页/设置页已有规则。

   横向分页重新加回来了（.home-pager / .home-screen / 分页圆点 /
   initHomePager()），但这次第一页（#homeScreen1）必须完整包含主页全部
   内容：时钟 → 资料卡（可拖拽块）→ 四宫格+在一起天数左右并排（可拖拽块）
   → 大图片（flex:1 撑满剩余高度，纪念日/日记/记忆浮在它内部）。第二页
   （#homeScreen2）是空白预留页，不承载第一页的任何组件，只是为了保留
   "左右滑动"这个交互。每个 .home-screen 内部 overflow-y:hidden，硬性
   禁止纵向滚动；.home-pager 只允许横向 overflow-x:auto + scroll-snap，
   上下不能滑、左右可以滑。各组件尺寸相应压缩，保证第一页在正常手机屏幕
   内一次看完，不需要纵向滚动就能看到全部内容。 */

.home-shell{
    --home-radius:30px;
    --home-shadow:0 14px 34px -8px rgba(196,160,150,.28),0 2px 10px rgba(196,160,150,.14);
    --home-gutter:20px;
    --home-gap:14px;
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:390px;
    height:100%;
    height:100dvh;
    max-height:100dvh;
    margin:0 auto;
    overflow:hidden;
    background:
        radial-gradient(110% 70% at 12% 100%,#ffe9da 0%,transparent 55%),
        radial-gradient(120% 80% at 18% 0%,#ffe2ea 0%,transparent 62%),
        radial-gradient(120% 80% at 88% 12%,#ffedd6 0%,transparent 58%),
        radial-gradient(100% 70% at 50% 100%,#f4e9e0 0%,transparent 65%),
        linear-gradient(165deg,#fffaf6 0%,#fdf3ee 100%);
    background-size:cover;
    background-position:center;
    color:var(--text-1);
}

/* 极轻噪点纹理：叠在渐变之上，用分形噪声 SVG 做一层几乎看不见的颗粒感，
   避免大面积纯色渐变显得过于"数码平"。 */
.home-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.035;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 用户自定义的首页背景图，铺满整个 Home，盖在默认渐变之上 */
.home-shell.has-custom-bg{
    background-image:
        linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.4)),
        var(--home-bg-image);
    background-size:cover;
    background-position:center;
}

/* ---------- 横向分页：.home-pager 是唯一的横向滚动容器，靠原生
   scroll-snap-type:x mandatory 吸附切页，不用 JS 自己算触摸位移——iOS
   Safari 对原生 scroll-snap 有现成的滚动物理/回弹效果，比手写手势更可靠，
   电脑端鼠标横向滚动/拖动滚动条也天然可用，不需要额外适配。
   .home-screen 宽度锁死 100%，高度锁死 100%（= .home-pager 高度 =
   .home-shell 的 100dvh），overflow-y:hidden——按这次要求严格禁止纵向
   滚动，不留"兜底可以滚一点"的余地；第一页各组件尺寸已经精确控制在这个
   高度预算内（见后面各组件的注释），不依赖滚动兜底也能显示完整。 ---------- */

.home-pager{
    flex:1;
    min-height:0; /* flex item 默认 min-height:auto 会被内容撑开，必须显式清零，
                     否则 .home-pager 自己不会真正收缩到一屏高度 */
    width:100%;
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    overscroll-behavior:contain; /* 横向滑到头不触发浏览器的下拉刷新/前后页手势，
                                     也不会把这次滑动"漏"给外层页面当成纵向滚动 */
    scrollbar-width:none; /* Firefox：隐藏横向滚动条本身，但滚动功能不受影响 */
    -ms-overflow-style:none;
}

.home-pager::-webkit-scrollbar{
    display:none; /* Chrome / Safari */
}

.home-screen{
    flex:0 0 100%;
    width:100%;
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    flex-direction:column;
    /* 大图片改成 aspect-ratio 固定比例之后，第一页的内容总高度不再天然等于
       屏幕高度（正常情况下会比屏幕矮一些）——用 justify-content:center 把
       整体内容在屏幕内垂直居中，多出来的空间平均分给上下两端，而不是让
       某一个组件被拉伸去填满剩余空间。 */
    justify-content:center;
    overflow-y:hidden;
    overflow-x:hidden;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
    touch-action:pan-x;
}

/* 第二页：空白预留页，只是为了保留"左右滑动"这个交互，不承载第一页的
   任何组件。 */
.home-screen--placeholder{
    align-items:center;
    justify-content:center;
}

.home-screen-placeholder-hint{
    color:var(--text-2);
    font-size:14px;
    -webkit-user-select:none;
    user-select:none;
}

/* ---------- 实时时钟：iOS 锁屏风格，大号时间 + 小号日期/星期，每分钟自动
   刷新（见 clock.js），不是写死的静态文字。字号/间距比早期版本压缩过，
   给下面的资料卡、四宫格、大图片让出高度。 ---------- */

.home-clock{
    flex-shrink:0;
    text-align:center;
    padding:calc(env(safe-area-inset-top,0px) + 8px) var(--home-gutter) 0;
    color:var(--text-1);
    -webkit-user-select:none;
    user-select:none;
}

.home-clock-time{
    font-size:36px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:.4px;
    font-variant-numeric:tabular-nums;
    text-shadow:0 1px 12px rgba(255,255,255,.5);
}

.home-clock-date{
    margin-top:4px;
    font-size:13px;
    font-weight:500;
    color:var(--text-2);
}

/* ---------- 顶部资料卡：上半截是可换背景图的相框区，头像压在相框区与下方
   信息卡的交界线上，昵称/@ID/签名/地址全部是空的可编辑字段，不写死任何
   文字。背景图/头像图复用 data-image-key 通用图片槽机制（见 home.js 的
   initImageSlots）。 ---------- */

.ios-header{
    --avatar-size:68px;
    --photo-zone:58px;
    position:relative;
    width:calc(100% - var(--home-gutter) * 2);
    min-height:196px;
    margin:14px var(--home-gutter) 0;
    color:var(--text-1);
    flex-shrink:0;
    background:
        radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,255,255,.9) 50%,transparent 52%),
        radial-gradient(1.2px 1.2px at 32% 62%,rgba(255,255,255,.8) 50%,transparent 52%),
        radial-gradient(1.2px 1.2px at 68% 30%,rgba(255,255,255,.85) 50%,transparent 52%),
        radial-gradient(1.2px 1.2px at 84% 68%,rgba(255,255,255,.8) 50%,transparent 52%),
        radial-gradient(1.2px 1.2px at 50% 45%,rgba(255,255,255,.75) 50%,transparent 52%),
        linear-gradient(150deg,#ffd9e6 0%,#ffe6d6 100%);
    background-size:56px 56px,56px 56px,56px 56px,56px 56px,56px 56px,cover;
    background-position:center;
    border-radius:var(--home-radius);
    box-shadow:var(--home-shadow);
    border:1px solid rgba(255,255,255,.65);
    overflow:hidden;
    cursor:pointer;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}

.ios-header.has-photo{
    background-size:cover;
}

@media (hover:hover){
    .ios-header:hover{
        transform:translateY(-2px) scale(1.012);
    }
}

.ios-header:active{
    transform:scale(.99);
}

.header-profile.app-icon-btn{
    position:relative;
    display:block;
    padding:0;
    gap:0;
    background:none;
    border:none;
    cursor:default;
}

/* ---------- 头像：压在"相框区"与下方信息卡的交界线上，一半叠在照片上、一半叠在卡片上 ---------- */

.header-avatar{
    position:relative;
    z-index:2;
    width:var(--avatar-size);
    height:var(--avatar-size);
    margin:calc(var(--photo-zone) - var(--avatar-size) / 2) auto 0;
    border-radius:50%;
    background-color:rgba(255,255,255,.9);
    background-size:cover;
    background-position:center;
    box-shadow:0 0 0 3px rgba(255,255,255,.85),var(--home-shadow);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.header-avatar:not(.has-photo)::after{
    content:"+";
    font-size:18px;
    font-weight:300;
    line-height:1;
    color:rgba(43,36,32,.28);
}

/* ---------- 信息卡：昵称 / @ID / 签名 / 地址，全部是空的可编辑字段，未填写时只显示占位提示。
   四级字号依次递减，做出清楚的主次层级：昵称 > @ID > 签名 > 地址。 ---------- */

.header-card{
    position:relative;
    margin-top:calc(var(--avatar-size) / -2);
    padding:calc(var(--avatar-size) / 2 + 12px) 24px 20px;
    text-align:center;
    background:rgba(255,253,251,.86);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
}

/* 可编辑字段的通用规则：Header 和纪念日 Widget 共用同一套（点击编辑、失焦保存的机制见 home.js）。
   :focus 时把颜色强制拉回默认文字色的规则只在 Header 里生效——纪念日卡片自己另有一套
   有照片/无照片切换的文字配色（--anniversary-font-color 等），不能被这条规则覆盖掉。 */
[contenteditable]{
    outline:none;
    cursor:text;
    -webkit-tap-highlight-color:transparent;
}

[contenteditable]:empty::before{
    content:attr(data-placeholder);
    color:var(--text-2);
    pointer-events:none;
}

.header-card [contenteditable]:focus{
    color:var(--text-1);
}

.header-name{
    font-size:23px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.2px;
}

.header-handle{
    margin-top:5px;
    font-size:15px;
    font-weight:600;
    line-height:1.15;
    color:var(--text-2);
}

.header-bio{
    margin-top:7px;
    font-size:14px;
    font-weight:400;
    line-height:1.35;
    color:var(--text-1);
}

.header-location{
    margin-top:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:12px;
    font-weight:500;
    color:var(--text-2);
}

.header-location-icon{
    width:12px;
    height:12px;
    flex-shrink:0;
}

/* ---------- 可拖拽的顶层"块"（顶部资料卡 / 四宫格+在一起天数）：纯壳，不带
   任何自己的背景/圆角/阴影——那些都是 .ios-header / .home-widgets-row
   自己已有的外观，这层只负责承载"编辑模式下长按抖动、拖动换位"的交互。
   两块都在第一页内部，互换顺序不会影响任何组件是否可见。抖动/拖起状态由
   home.js 统一挂 is-home-editing（全局）和 is-dragging（拖起的那一个）
   两个类控制。 ---------- */

.home-draggable-block{
    position:relative;
    flex-shrink:0;
    /* 显式声明，不依赖"祖先 .home-screen 限制了 pan-x、这个元素自己没设置
       所以顺着祖先的限制生效"这种隐式传导——之前就因为某个子元素显式设成
       更窄的 pan-y 把横向翻页手势整个吞掉过一次，这次直接显式声明 pan-x，
       消除任何依赖浏览器具体实现细节的不确定性。 */
    touch-action:pan-x;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes home-block-wiggle{
    0%{transform:rotate(-.5deg);}
    50%{transform:rotate(.5deg);}
    100%{transform:rotate(-.5deg);}
}

.home-shell.is-home-editing .home-draggable-block{
    animation:home-block-wiggle .28s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
    .home-draggable-block{animation:none !important;}
}

.home-draggable-block.is-dragging{
    z-index:10;
    animation:none !important;
    transition:none;
}

/* ---------- 四宫格图标 + 在一起天数：左右并排的一行，Grid 而不是
   flex-wrap，明确写死 2 列，不管手机多窄，永远左右并排，不会被挤成上下
   两块。 ---------- */

.home-widgets-row{
    flex-shrink:0;
    padding:14px var(--home-gutter) 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--home-gap);
    align-content:center;
}

/* ---------- Widget 通用外观：大圆角 + 毛玻璃 + 柔和阴影 + 弹性过渡 ---------- */

.widget{
    position:relative;
    border-radius:var(--home-radius);
    background:rgba(255,251,246,.62);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    box-shadow:var(--home-shadow);
    border:1px solid rgba(255,255,255,.65);
    overflow:hidden;
    /* 显式声明 pan-x：横向翻页要从 Widget 上开始滑也能正常触发，不依赖
       祖先 .home-screen 的限制隐式传导下来（同样的坑之前踩过一次，见
       .home-draggable-block 的注释）。长按拖拽排序本身用的是 JS 里的
       pointer 事件坐标计算，不依赖 touch-action，不受这条声明影响。 */
    touch-action:pan-x;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
    animation:widget-enter .5s cubic-bezier(.25,.8,.4,1) both;
}

/* Widget 进场：轻微上浮 + 淡入，每个 Widget 错开一点点，不是同时弹出 */
@keyframes widget-enter{
    from{opacity:0;transform:translateY(14px);}
    to{opacity:1;transform:translateY(0);}
}

.home-widgets-row > .widget:nth-child(1){animation-delay:.02s;}
.home-widgets-row > .widget:nth-child(2){animation-delay:.08s;}

@media (prefers-reduced-motion:reduce){
    .widget{animation:none;}
}

@media (hover:hover){
    .widget:hover{
        transform:translateY(-2px) scale(1.012);
        box-shadow:0 20px 46px -8px rgba(196,160,150,.32),0 4px 14px rgba(196,160,150,.18);
    }
}

.widget:active{
    transform:scale(.985);
}

/* 拖动排序中：被抓起的 Widget 浮起、放大一点，其余 Widget 正常参与让位。 */
.widget.is-dragging{
    z-index:10;
    box-shadow:0 22px 46px -6px rgba(196,160,150,.4);
    animation:none !important;
    transition:none;
}

.widget:not(.is-dragging){
    transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;
}

/* 编辑模式（长按进入）：所有 Widget/图标轻微抖动，跟 iPhone 桌面整理图标
   一致——全局唯一一个 is-home-editing 开关（挂在 .home-shell 上，见
   home.js enterHomeEditMode()），长按任何一个可拖拽元素，四宫格里的图标、
   在一起天数 Widget、顶部资料卡会一起抖动。 */
@keyframes widget-wiggle{
    0%{transform:rotate(-1deg);}
    50%{transform:rotate(1deg);}
    100%{transform:rotate(-1deg);}
}

.home-shell.is-home-editing .home-widgets-row > .widget{
    animation:widget-wiggle .26s ease-in-out infinite;
}

/* 四宫格里的 4 个图标（.app-icon-btn）现在也是可拖拽重排的单位，跟顶层
   Widget 共用同一套抖动关键帧。 */
.home-shell.is-home-editing .widget-quad > .app-icon-btn{
    animation:widget-wiggle .26s ease-in-out infinite;
}

.app-icon-btn.is-dragging{
    z-index:10;
    animation:none !important;
    transition:none;
}

@media (prefers-reduced-motion:reduce){
    .widget-quad > .app-icon-btn{animation:none !important;}
}

/* ---------- App 图标：白色圆角底 + 彩色图案，可爱风，不做彩色色块按钮 ---------- */

.app-icon-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    padding:2px;
    font-family:inherit;
    touch-action:pan-x; /* 同 .widget：显式声明，横向翻页从图标上开始滑也要正常触发 */
    color:var(--text-1);
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}

@media (hover:hover){
    .app-icon-btn:hover .app-icon-glyph{
        transform:translateY(-1px) scale(1.05);
    }
}

.app-icon-btn:active .app-icon-glyph{
    transform:scale(.9);
}

.app-icon-glyph{
    position:relative;
    width:54px;
    height:54px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fffdfb;
    box-shadow:0 4px 12px rgba(196,160,150,.18),inset 0 1px 0 rgba(255,255,255,.8);
    flex-shrink:0;
    overflow:hidden;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}

.app-icon-glyph svg{
    width:26px;
    height:26px;
}

/* 自定义图标图片：object-fit:cover 等效写法是 background-size:cover +
   background-position:center，配合 .app-icon-glyph 本身的 overflow:hidden
   + border-radius，图片永远被裁成这个圆角方块，不拉伸变形也不会溢出方块
   边缘。换上自定义图片后把默认 SVG 藏起来，两者不会重叠显示。 */
.app-icon-glyph.js-image-slot.has-photo{
    background-size:cover;
    background-position:center;
}

.app-icon-glyph.js-image-slot.has-photo svg{
    display:none;
}

/* 占位页大图标：复用同一套 icon-* 颜色，尺寸放大用在整页居中的场景 */
.app-icon-glyph.is-large{
    width:84px;
    height:84px;
    border-radius:24px;
    box-shadow:0 10px 24px rgba(196,160,150,.22),inset 0 1px 0 rgba(255,255,255,.8);
}

.app-icon-glyph.is-large svg{
    width:38px;
    height:38px;
}

.app-icon-label{
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}

/* 图标颜色：白底 + 彩色图案，颜色沿用原本的分类色相，只是从"底色"变成"图案色" */

.icon-chat{color:#2fa84f;}
.icon-worldbook{color:#e0821f;}
.icon-settings{color:#5850c4;}
.icon-beautify{color:#e0355f;}
.icon-memory{color:#0a84ff;}
.icon-character{color:#9040d0;}
.icon-anniversary{color:#e0355f;}
.icon-diary{color:#c9971a;}
.icon-generalsettings{color:#6c6c70;}

/* ---------- 左：2x2 App 图标 Widget，跟右边的在一起天数 Widget 各占约一半宽度。
   高度调到接近自己的宽度（宽度是内容区一半减去 gap，大约 160~170px），让这
   张卡片看起来接近正方形，不是扁的长条。 ---------- */

.widget-quad{
    grid-column:1;
    height:186px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-content:center;
    justify-items:center;
    gap:12px 6px;
    padding:12px 8px;
}

/* ---------- 右：在一起天数信息卡，跟左边四宫格同一个 Grid 行，靠 grid-column 固定在
   第二列，永远左右并排（不会在窄屏下被挤到下一行），高度跟四宫格保持一致，
   同样接近正方形。 ---------- */

.widget-anniversary{
    grid-column:2;
    height:186px;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background-image:linear-gradient(155deg,#ffe1ea 0%,#ffd9c2 100%);
    background-size:cover;
    background-position:center;
    color:var(--anniversary-font-color,var(--text-1));
    cursor:pointer;
}

/* 上传了真实照片之后才需要底部渐变遮罩 + 默认白字，没有照片时用浅色渐变底 + 深色字更符合奶油/粉色调性 */
.widget-anniversary.has-photo{
    color:var(--anniversary-font-color,#ffffff);
}

.widget-anniversary.has-photo::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.48) 100%);
    pointer-events:none;
}

.anniversary-body{
    position:relative;
}

/* .anniversary-body 借用 .app-icon-btn 类名，跟 Header 的 .header-profile 同一个用途：
   命中 initImageSlots 里"点在 app-icon-btn 范围内不触发换背景图"的判断，让点文字编辑
   和点空白处换背景图互不冲突；这里把按钮外观完全重置，纯粹当点击豁免区用，不改变原有布局。 */
.anniversary-body.app-icon-btn{
    display:block;
    padding:0;
    gap:0;
    background:none;
    border:none;
    color:inherit;
    cursor:default;
}

.anniversary-label{
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:.65;
    margin-bottom:3px;
}

.anniversary-days{
    font-size:33px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
}

.anniversary-date{
    font-size:12px;
    font-weight:500;
    opacity:.65;
    margin-top:3px;
}

.widget-anniversary.has-photo .anniversary-label,
.widget-anniversary.has-photo .anniversary-days,
.widget-anniversary.has-photo .anniversary-date{
    text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* ---------- 底部大图片：横向长方形卡片，不再靠 flex:1 撑满剩余高度（那样
   会把它撑成占满下半屏的竖向大块）。改用 aspect-ratio 把高度锁定成宽度的
   固定比例——宽度是内容区宽度（卡片左右各留 --home-gutter 外边距），
   16:10 比标准的 16:9 略高一点，图片本身也跟着这次整体放大的比例走，但
   仍然明显是一张"宽图"而不是"竖图"。flex-shrink:0 保证它不会被上面几块
   顶层元素挤压变形；不设 flex-grow，多出来的垂直空间交给 .home-screen 的
   justify-content 去居中分配，不会为了填满屏幕硬把图片拉高。 ---------- */

.widget-photo-full{
    flex-shrink:0;
    width:calc(100% - var(--home-gutter) * 2);
    aspect-ratio:16 / 10;
    margin:16px var(--home-gutter) 0;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-position:center;
    cursor:pointer;
}

/* 底部轻微渐变遮罩：现在只是打底，以后要叠文字在图片上时直接有现成的可读性保障 */
.widget-photo-full::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.26) 100%);
    pointer-events:none;
}

.widget-photo-full-empty{
    position:relative;
    color:var(--text-2);
    font-size:13px;
}

.widget-photo-full.has-photo .widget-photo-full-empty{
    display:none;
}

/* ---------- 分页圆点：悬浮在 .home-pager 之上，不属于任何一个 Screen，
   横向滑动切页时始终可见，用来提示"现在在第几页、还有第二页"。容器本身
   pointer-events:none 不拦截下面的滑动/点击，只有每个圆点自己重新开启
   pointer-events，点击可以直接跳转到对应页（见 home.js
   initHomePager()）。 ---------- */

.home-page-dots{
    position:absolute;
    left:50%;
    bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    z-index:5;
    pointer-events:none;
}

.home-page-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(43,36,32,.2);
    box-shadow:0 1px 2px rgba(255,255,255,.4);
    transition:background .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
    pointer-events:auto;
    cursor:pointer;
}

.home-page-dot.is-active{
    background:rgba(43,36,32,.55);
    transform:scale(1.3);
}

/* 编辑模式打开时，分页圆点让位给编辑工具条（同一个视觉位置，不会两个同时
   出现）——浏览态信息在编辑期间意义不大，工具条更重要。 */
.home-shell.is-home-editing .home-page-dots{
    display:none;
}

/* ---------- 主页编辑模式工具条：只在 is-home-editing 打开时出现，跟分页
   圆点占同一块位置。"恢复默认"清掉这次几轮改造新增的自定义内容（顶部
   背景图/4 个图标图/拖拽保存的位置），"完成"退出编辑模式——跟点空白区域
   退出是同一个效果，只是多一个明确的按钮。 ---------- */

.home-edit-bar{
    display:none;
    position:absolute;
    left:50%;
    bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    transform:translateX(-50%);
    align-items:center;
    gap:10px;
    z-index:6;
}

.home-shell.is-home-editing .home-edit-bar{
    display:flex;
}

.home-edit-bar-btn{
    border:1px solid rgba(255,255,255,.65);
    border-radius:var(--radius-pill);
    padding:8px 16px;
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    color:var(--text-1);
    background:rgba(255,251,246,.86);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 6px 16px rgba(196,160,150,.2);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}

.home-edit-bar-btn:active{
    transform:scale(.94);
}

.home-edit-bar-btn.is-primary{
    color:#ffffff;
    background:var(--accent);
    border-color:transparent;
}

/* ---------- 换图/清除图片的小徽标：只在"编辑模式 + 这个槽位当前确实有自定义
   图片"这两个条件同时成立时才显示，平时（没有自定义图片，或者不在编辑模式）
   完全不占位置、不拦截点击——见 home.js initImageSlots() 里 clearBadge 的
   点击处理，只清这一个槽位自己的图片，不影响其它 Widget。 ---------- */

.home-image-clear-badge{
    display:none;
    position:absolute;
    top:6px;
    right:6px;
    width:19px;
    height:19px;
    border-radius:50%;
    border:none;
    padding:0;
    line-height:1;
    font-size:12px;
    font-weight:700;
    font-family:inherit;
    color:#ffffff;
    background:rgba(28,28,30,.72);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    cursor:pointer;
    z-index:3;
    -webkit-tap-highlight-color:transparent;
}

.home-shell.is-home-editing .js-image-slot.has-photo > .home-image-clear-badge{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* 顶部资料卡的清除徽标位置比图标的稍微往里收一点——头像压在相框区右下方，
   徽标固定在相框区右上角，跟头像/文字都不会重叠。 */
.ios-header > .home-image-clear-badge{
    top:8px;
    right:8px;
}

/* ---------- 纪念日 / 日记 / 记忆：浮在底部大图片内部的半透明圆角条 ----------
   .ios-dock 是 .widget-photo-full（position:relative，继承自 .widget）的
   绝对定位子元素，贴的是图片自己的下边缘，不是贴真实屏幕边缘，所以不需要
   env(safe-area-inset-bottom)（图片跟屏幕边缘之间已经有 margin-bottom
   兜底）。视觉上就是"浮在图片上"的一块毛玻璃条，不是页面另起一排的独立
   元素，也不属于任何"第二屏"——现在整个主页只有一屏。 ---------- */

.widget-photo-full .ios-dock{
    position:absolute;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:12px 22px;
    border-radius:24px;
    background:rgba(255,251,246,.64);
    backdrop-filter:blur(26px) saturate(160%);
    -webkit-backdrop-filter:blur(26px) saturate(160%);
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.5);
}

/* 编辑模式下把 Dock 藏起来：编辑期间点 Dock 跳去纪念日/日记/记忆会直接
   离开主页，中断正在进行的拖拽/换图操作，体验上很突兀，不如干脆先不露出
   这几个入口，退出编辑模式（点"完成"或点空白处）后自动恢复。 */
.home-shell.is-home-editing .ios-dock{
    display:none;
}

.dock-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    color:var(--text-1);
    font-family:inherit;
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}

.dock-btn:active{
    transform:scale(.9);
}

.dock-icon-glyph{
    position:relative;
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fffdfb;
    box-shadow:0 4px 10px rgba(196,160,150,.18),inset 0 1px 0 rgba(255,255,255,.8);
    overflow:hidden;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}

.dock-icon-glyph svg{
    width:20px;
    height:20px;
}

/* 自定义图标图片（【美化 UI → 组件自定义 → 图标自定义】里设置的），跟四宫格
   图标同一套做法：object-fit:cover 等效于 background-size:cover +
   overflow:hidden 裁切，换上自定义图片后隐藏默认 SVG。 */
.dock-icon-glyph.js-image-slot.has-photo{
    background-size:cover;
    background-position:center;
}

.dock-icon-glyph.js-image-slot.has-photo svg{
    display:none;
}

.dock-btn-label{
    font-size:10px;
    font-weight:500;
}

/* ---------- Toast：轻提示（上传成功等反馈），悬浮在图片区域中部，避免被
   Dock 挡住，也避免被顶部内容挡住。 ---------- */

.home-toast{
    position:absolute;
    left:50%;
    bottom:35%;
    transform:translate(-50%,12px);
    padding:10px 18px;
    border-radius:var(--radius-pill);
    background:rgba(28,28,30,.86);
    color:#ffffff;
    font-size:13px;
    white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s cubic-bezier(.34,1.56,.64,1),transform .25s cubic-bezier(.34,1.56,.64,1);
    z-index:20;
}

.home-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}

/* ---------- 极矮屏幕兜底（视口高度 ≤700px，典型代表是 375×667 的老款
   iPhone SE 这类 4.7 寸机型；苹果现在在售的所有机型都是 390×844 起，远
   高于这个阈值，不会被这条规则影响）：这次整体放大是针对主流机型做的，
   如果原样套用到明显更矮的屏幕上会产生纵向溢出（跟"禁止纵向滚动"这条
   硬性要求冲突）。这里不是另外做一套设计，只是把同一批组件按比例整体
   缩回上一版验证过、确认能在 375×667 内完整显示且不溢出的尺寸——响应式
   断点，不是布局重做。 ---------- */
@media (max-height:700px){
    .home-clock-time{font-size:32px;}
    .home-clock-date{margin-top:3px;font-size:12px;}

    .ios-header{
        --avatar-size:58px;
        --photo-zone:50px;
        min-height:156px;
        margin-top:12px;
    }
    .header-card{
        padding-top:calc(var(--avatar-size) / 2 + 10px);
        padding-left:18px;
        padding-right:18px;
        padding-bottom:12px;
    }
    .header-name{font-size:19px;}
    .header-handle{margin-top:4px;font-size:14px;}
    .header-bio{margin-top:6px;font-size:13px;}
    .header-location{margin-top:6px;gap:3px;font-size:11px;}
    .header-location-icon{width:11px;height:11px;}

    .home-widgets-row{padding-top:10px;}
    .widget-quad{
        height:160px;
        gap:10px 4px;
        padding:10px 6px;
    }
    .widget-anniversary{
        height:160px;
        padding:14px;
    }
    .app-icon-glyph{width:46px;height:46px;border-radius:15px;}
    .app-icon-glyph svg{width:22px;height:22px;}
    .app-icon-label{font-size:10px;}
    .anniversary-label{font-size:11px;margin-bottom:2px;}
    .anniversary-days{font-size:28px;}
    .anniversary-date{font-size:11px;margin-top:2px;}

    .widget-photo-full{
        aspect-ratio:16 / 9;
        margin-top:14px;
    }
    .widget-photo-full .ios-dock{
        bottom:12px;
        gap:18px;
        padding:10px 18px;
        border-radius:22px;
    }
    .dock-icon-glyph{width:38px;height:38px;border-radius:13px;}
    .dock-icon-glyph svg{width:18px;height:18px;}
    .dock-btn-label{font-size:9px;}
}

/* ---------- 隐藏的文件上传 input（每个图片 Widget 各自一份，动态插入） ---------- */

.home-bg-upload-input{
    display:none;
}