/* my.html 页面样式：自模板内联 <style> 抽离。
   「我的上架」网格的卡片壳 / 海报 / 角标 / 隐藏 badge / 操作按钮全部走
   全站共享 css/itemcard.css + js/util/itemcard.js。
   本文件只剩「我的」页独占的：资料卡、我的收藏卡、管理入口、emoji 头像选择。 */
        * { box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f7fafc;
            margin: 0;
            padding: 12px 10px;
            color: #333;
            -webkit-tap-highlight-color: transparent;
        }
        .container { margin: 0 auto; }
        h1 { text-align: center; margin: 0 0 10px; font-size: 1.2rem; }
        h2 { font-size: 1.05rem; margin: 18px 0 10px; color: #444; }
        h2 .count { color: #999; font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
        .card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 1px 4px rgba(0,0,0,.08);
            padding: 14px;
        }
        .empty { text-align: center; color: #999; padding: 26px 0; font-size: 0.92rem; }
        .login-tip { text-align: center; padding: 60px 0; color: #666; }
        .login-tip a { color: #4a90d9; text-decoration: none; }
        /* 我的上架：卡片壳 / 海报 / 角标 / 隐藏 badge / 操作按钮全部走全站共享 itemcard.css。
           本文件只剩「我的」页独占的：资料卡、我的收藏卡、管理入口、emoji 头像选择。 */
        /* 头像 + 改名按钮：行高 ≥44，避免视觉上挤压 */
        .profile-card { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; min-height: 64px; }
        .profile-card .avatar { width: 48px; height: 48px; font-size: 1.2rem; }
        /* 资料卡昵称行：可点击就地编辑；hover/active 给视觉反馈；
           昵称 + 角色标签同行，昵称超长省略 */
        .profile-card .name {
            font-weight: 600; font-size: 1rem;
            cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
            flex-wrap: wrap; gap: 4px;
            padding: 0 6px; margin: 0 -6px; border-radius: 6px;
            transition: background-color .15s;
        }
        .profile-card .name-text {
            flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; min-width: 0;
        }
        .profile-card .name:hover { background: var(--border-soft, #edf2f7); }
        .profile-card .name:active { background: #e2e8f0; }
        .profile-card .name:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
        /* 就地编辑的输入框：撑满名字行宽度，跟名字本身同字号同字重 */
        .profile-card .name-input {
            font: inherit; font-weight: 600; color: #2d3748;
            width: 100%; min-width: 0;
            padding: 6px 8px; margin: -6px -8px;
            border: 1px solid #4a90d9; border-radius: 6px; background: #fff;
            outline: none;
        }
        .profile-card .tip { font-size: 0.78rem; color: #999; margin-top: 2px; }
        /* 角色标签：紧跟昵称后面同一行，不压缩不换行 */
        .profile-role-tag {
            flex: 0 0 auto; display: inline-flex; align-items: center;
            font-size: 0.72rem; font-weight: 600; padding: 2px 9px;
            border-radius: 999px; background: #edf2f7; color: #4a5568;
        }
        .profile-role-tag.is-admin { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
        /* 头像可点击换 emoji：给出与昵称行一致的反馈 */
        #profileAvatar { cursor: pointer; border-radius: 50%; }
        #profileAvatar:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
        /* emoji 头像选择器（全屏可缩放画布）：无标题栏 / 无 × 铬件，全屏浮层，
           所有 emoji 铺在一块固定 32×32 的正方形大画布上，单指/拖拽平移、
           双指捏合/滚轮缩放（手势实现见 my-profile.js）。
           .emoji-fs-overlay 已 LayerManager.register（STD 基线 4100 之上） */
        .emoji-fs-overlay {
            position: fixed;
            inset: 0;
            z-index: 4100;
            display: none;
            overflow: hidden;
            background: #1f2430;
            touch-action: none;
            overscroll-behavior: contain;
            user-select: none;
            -webkit-user-select: none;
            cursor: grab;
        }
        .emoji-fs-overlay.active { display: block; }
        /* 正方形画布本体：几何（32 列 × 44px 格 + gap 4px + padding 6px = 约
           1544px 见方）须与 my-profile.js 的 FS_* 常量保持一致；位置只由
           my-profile.js 的 translate() scale() 变换驱动 */
        .emoji-fs-board {
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: 0 0;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
            display: grid;
            grid-template-columns: repeat(32, 44px);
            grid-auto-rows: 44px;
            gap: 4px;
            padding: 6px;
            will-change: transform;
            touch-action: none;
        }
        .emoji-picker-cell {
            width: 44px; height: 44px; font-size: 1.55rem; line-height: 1;
            background: #fff; border: none; border-radius: 10px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .emoji-picker-cell:hover { background: #edf2f7; }
        .emoji-picker-cell:active { background: #e2e8f0; transform: scale(1.08); }
        /* 资料卡右侧动作按钮：link-btn 复用 mobile-shell 的 button ≥44 基线，再加强可视样式；
           现在是「退出登录」，用 link-btn-danger 给出红色危险语义 */
        .link-btn {
            min-height: 44px;
            padding: 0 14px;
            background: #4a90d9;
            color: #fff !important;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .link-btn:hover { background: #3b7bc0; }
        .link-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
        /* 危险动作（退出登录）：红底红字，与全站 btn-danger 语义一致 */
        .link-btn.link-btn-danger { background: #fff1f0; color: #d4380d !important; }
        .link-btn.link-btn-danger:hover { background: #ffe6e6; }
        /* 退出登录图标按钮：方形，SVG 居中 */
        .link-btn-danger.logout-btn {
            min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 10px;
        }
        .link-btn-danger.logout-btn svg { display: block; }
        /* API Token 卡：外部 AI 工具 / MCP 接入凭证；明文只在生成/重置当次展示，
           刷新后回到按钮态（服务端不再下发明文） */
        .api-token-card { margin-bottom: 14px; }
        .api-token-desc { font-size: 0.82rem; color: #718096; margin-bottom: 10px; }
        .api-token-result { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
        .api-token-result[hidden] { display: none; }
        .api-token-result input {
            flex: 1;
            min-width: 0;
            font-family: monospace;
            font-size: 0.82rem;
            padding: 8px 10px;
            border: 1px solid var(--border-soft, #edf2f7);
            border-radius: 8px;
            background: #f7fafc;
            color: #4a5568;
            outline: none;
        }
        .api-token-result input:focus { border-color: #4a90d9; }
        /* 我的收藏：手机桌面图标式网格——圆角方形封面 + 名称居中，
           自适应每行 4~5 个；标题样式与管理入口的 qe-title 保持一致 */
        .favorites-card { margin-bottom: 14px; }
        .fav-title {
            font-size: 0.85rem;
            color: #4a5568;
            font-weight: 600;
            margin-bottom: 10px;
            /* 标题在左 / 编辑按钮在右：flex + space-between 撑开；窄屏挤压时由
               fav-title-text 的 min-width:0 + flex:1 兜底，必要时自动换行 */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .fav-title-text { min-width: 0; flex: 1 1 auto; }
        .fav-title .fav-count { color: #999; font-weight: 400; font-size: 0.78rem; margin-left: 6px; }
        .browse-count { color: #999; font-weight: 400; font-size: 0.78rem; margin-left: 6px; }
        .browse-history-card { margin-bottom: 14px; }
        .browse-history-content { padding: 10px 0; }
        .browse-history-content .loading-placeholder { text-align: center; color: #999; padding: 20px 0; }
        .browse-history-content .empty-hint { text-align: center; color: #999; padding: 40px 0; }
        .browse-subtitle { text-align: center; color: #999; font-size: 0.78rem; padding: 4px 0 10px; }
        /* 「更多」按钮：右上角小药丸，点击打开独立管理窗口。
           编辑相关的「取消 / 保存」按钮已经迁到 PlainView 弹层内（见 .pv-action-btn）。 */
        .fav-edit-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: none;
        }
        .fav-edit-btn {
            flex: none;
            min-height: 28px;
            padding: 4px 14px;
            background: transparent;
            color: #4a90d9;
            border: 1px solid #4a90d9;
            border-radius: 14px;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background-color .15s, color .15s;
        }
        .fav-edit-btn:hover { background: #ebf3fb; }
        .fav-edit-btn:active { background: #d6e6f5; }
        .fav-edit-btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
        .fav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
            gap: 14px 10px;
        }
        .fav-icon {
            cursor: pointer;
            text-align: center;
            position: relative;  /* 形成独立 stacking context，让 popup z-index 比较生效 */
            z-index: 1;
        }
        /* popup 真的在最上面：
           itemcard.js 的 bindMenuToggle 在 openPopup 时调用 popup.closest('.item-card')
           加 .menu-open 给 .item-card；但 .fav-icon 不是 .item-card，这条挂不上。
           用 :has() 检测 .item-menu-popup.open（itemcard.js 给 popup 切 .open），
           当 fav-icon 里出现打开态 popup 时把整图抬到 z-index 1000。
           浏览器支持：Chrome 105+ / Safari 15.4+ / iOS 15.4+，覆盖当前活跃版本 */
        .fav-icon:has(.item-menu-popup.open) { z-index: 1000; }
        .fav-icon .item-menu-popup { z-index: 100; }
        /* ⋮ 在收藏区彻底关闭：管理入口统一走编辑模式下的 X（暂存删除）+ 拖拽（重排）。
           itemcard.css 的 .item-menu 没有显式 display（div 默认 block），这里直接
           覆盖默认块级，让 ⋮ 在收藏网格里永不出现 */
        .fav-cover .item-menu { display: none; }
        .fav-cover {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            /* 不再用 overflow:hidden：item-menu 在 cover 内，popup 弹出需要溢出 cover 边界
               到 fav-name 行上方；圆角仍由 cover 自身 border-radius 限定（CSS3 渲染规则），
               img / ph 自身 border-radius 防止内容超出圆角。 */
            background: linear-gradient(135deg, #eef3f9, #dde7f3);
            box-shadow: 0 1px 3px rgba(30, 60, 110, .12);
            transition: transform .15s ease, box-shadow .15s ease;
        }
        /* 悬停轻抬、按压回缩：与手机图标的点按手感对齐 */
        .fav-icon:hover .fav-cover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(30, 60, 110, .18); }
        .fav-icon:active .fav-cover { transform: scale(.94); box-shadow: 0 1px 2px rgba(30, 60, 110, .12); }
        .fav-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; }
        /* 无封面占位：名称首字居中（缺省图标风格） */
        .fav-ph {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: 700; color: #7b93b5;
            border-radius: 14px;
        }
        /* 封面 emoji 图标（发布时「图或 emoji 二选一」，无图作品用 emoji 作封面） */
        .fav-ph.fav-emoji { font-size: 2.4rem; font-weight: 400; line-height: 1; }
        /* ⋮ 按钮：嵌在 cover 内右下角，与原 fav-badge 同位置 */
        .fav-cover .item-menu {
            position: absolute;
            bottom: 4px;
            right: 4px;
            margin: 0;
            z-index: 2;
        }
        .fav-cover .item-menu-trigger {
            background: rgba(255, 255, 255, .9);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        }
        .fav-cover .item-menu-trigger:hover {
            background: #edf2f7;
            color: #4a5568;
        }
        .fav-name {
            margin-top: 6px;
            font-size: 0.72rem;
            color: #4a5568;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
        }
        /* ===== 管理窗口内的图标（拖拽 + 红色 X 暂存删除）=====
           渲染入口：my.js 的 openFavManageWindow（PlainView 弹层内）。
           - touch-action:none 让 pointer move 跟着手指走，浏览器不会截走滚动
           - cursor:grab 给桌面用户「可拖」提示，移动端不显示但保留语义
           - 关掉正常模式的 hover/active 抬升反馈，避免与拖拽视觉打架 */
        .fav-icon-editing {
            cursor: grab;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        .fav-icon-editing:active { cursor: grabbing; }
        /* 管理窗口的 .fav-icon-editing 直接渲染在 PlainView 内；hover/active
           反馈在此直接覆盖（关掉主视图「抬升 + 阴影增强」反馈，避免拖拽视觉打架） */
        .fav-icon-editing:hover .fav-cover,
        .fav-icon-editing:active .fav-cover {
            transform: none;
            box-shadow: 0 1px 3px rgba(30, 60, 110, .12);
        }
        /* 管理窗口内的 .fav-grid：PlainView body 默认无内边距，
           收藏网格直接铺满；这里把容器顶部留出与标题栏分离的间距 */
        .fav-grid-manage {
            padding: 16px 14px 24px;
        }
        /* 浏览态分页哨兵（与社区同一套 InfiniteScroll）：多列网格里让哨兵
           占满整行，「加载中… / 已加载完毕」文案才能居中铺满；
           文案样式复用 itemcard.css 的全局 .inf-scroll-* 规则 */
        .fav-grid-manage .inf-scroll-sentinel { grid-column: 1 / -1; }
        /* 拖拽中：图标脱离布局、绝对定位浮起，叠在所有图标之上。
           .fav-dragging 是由 my.js 在 pointerdown 越过阈值后挂上的状态类 */
        .fav-icon-editing.fav-dragging {
            opacity: .92;
            z-index: 999;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
        }
        /* 红色 X 删除徽标：定位在图标右上角，稍稍外凸营造"贴标"感；
           只在编辑模式渲染，背景色采用全站一致的 danger 红 #ff4d4f。
           圆形硬约束：22x22 等宽高 + border-radius:50% 已是数学上的圆，但 iOS
           Safari 的 <button> UA 默认样式会注入额外 padding / 圆角 / 内嵌
           阴影，看起来像椭圆。这里用 appearance:none 把 UA 默认清掉，
           再用 box-sizing:border-box 把 2px 白边算进总尺寸避免外推导致
           视觉偏移，aspect-ratio:1 进一步保证横竖比恒等。
           border-radius 同步写 -webkit- 前缀覆盖旧 webkit 渲染路径，min-*
           / max-* 兜底防止任何 UA 把 width/height 吃掉后变形。 */
        .fav-delete-x {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 22px;
            height: 22px;
            min-width: 22px;
            min-height: 22px;
            max-width: 22px;
            max-height: 22px;
            aspect-ratio: 1 / 1;
            background: #ff4d4f;
            color: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
            cursor: pointer;
            padding: 0;
            margin: 0;
            font-size: 14px;
            line-height: 1;
            font-weight: 700;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            z-index: 3;
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
            appearance: none;
            box-sizing: border-box;
            transition: background-color .15s, transform .15s;
        }
        .fav-delete-x:hover { background: #ff7875; }
        .fav-delete-x:active { background: #d9363e; transform: scale(.92); }
        .fav-delete-x:focus-visible { outline: 2px solid #d9363e; outline-offset: 2px; }
        /* 首屏骨架：与真实图标同布局，shimmer 微光 */
        .fav-icon.skeleton { cursor: default; pointer-events: none; }
        .fav-icon.skeleton .sk-cover {
            width: 100%; aspect-ratio: 1 / 1; border-radius: 14px;
            background-color: #edf2f7;
            background-image: linear-gradient(90deg, #edf2f7 0%, #f7fafc 50%, #edf2f7 100%);
            background-size: 200% 100%;
            animation: favSkShimmer 1.4s ease infinite;
        }
        .fav-icon.skeleton .sk-line {
            height: 8px; width: 70%; margin: 8px auto 0; border-radius: 4px;
            background-color: #edf2f7;
            background-image: linear-gradient(90deg, #edf2f7 0%, #f7fafc 50%, #edf2f7 100%);
            background-size: 200% 100%;
            animation: favSkShimmer 1.4s ease infinite;
        }
        @keyframes favSkShimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        /* 空态 / 加载失败：无收藏或请求出错时显示 */
        .fav-empty {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            padding: 30px 0 24px;
            color: #a0aec0;
        }
        /* [hidden] 显式 display:none：本类有 display:flex，浏览器默认的 [hidden] {display:none}
           优先级低于类选择器，不补这条则 hidden 属性失效（同 contacts.css 口径） */
        .fav-empty[hidden] { display: none; }
        .fav-empty-icon { font-size: 1.7rem; line-height: 1; color: #cbd5e0; }
        .fav-empty-text { font-size: 0.85rem; }
        .btn { border: none; border-radius: 6px; padding: 0 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
        .btn-primary { background: #4a90d9; color: #fff; }
        .btn-primary:hover { background: #3b7bc0; }
        .btn-secondary { background: #edf2f7; color: #4a5568; }
        .btn-secondary:hover { background: #e2e8f0; }
        .btn-danger { background: #fff1f0; color: #d4380d; }
        .btn-danger:hover { background: #ffe6e6; }
        .btn:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }
        /* 管理快捷入口卡片：业务入口不再依赖底部 Tab，本卡片按 effectiveRole 显示 */
        .quick-entries { margin-bottom: 14px; }
        .qe-title {
            font-size: 0.85rem;
            color: #4a5568;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .qe-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 8px;
        }
        .qe-item {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 14px;
            background: #4a90d9;
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 8px;
            text-align: center;
        }
        .qe-item[hidden] { display: none; }
        .qe-item:hover { background: #3b7bc0; }
        .qe-item:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }


        /* ===== 我的收藏 ⋮ 菜单（打开 / 置顶 / 删除）=====
           复用 itemcard.css 里已定义的 .item-menu / .item-menu-trigger / .item-menu-popup /
           .item-admin-actions 全套样式与开关逻辑（itemcard.js 的 bindMenuToggle 全局
           监听 .item-menu-trigger 点击切换 .open）。这里只补 fav-icon 内的布局调整：
           - .fav-icon 设为 position: relative，让内部 .item-menu 的 popup 锚到图标右下
           - ⋮ 按钮绝对定位到封面右下角，替代原 .fav-badge（小游戏 🎮）占的同一位置 —— 
             单图标右下角只显示一个图标更干净；post / 小游戏类型区分改在名称下方 /
             左下角（见 .fav-type-chip），这样 ⋮ 不会因小游戏出现而左右切换 */
        .fav-icon { position: relative; }
        .fav-icon .fav-menu {
            position: absolute;
            bottom: 4px;
            right: 4px;
            margin-left: 0;
            z-index: 5;
        }
        .fav-icon .fav-menu-trigger {
            background: rgba(255, 255, 255, .9);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
        }
        .fav-icon .fav-menu-trigger:hover {
            background: #edf2f7;
            color: #4a5568;
        }
        /* 打开 ⋮ 菜单的图标抬升：避免向下展开的 popup 被相邻图标的封面 + 阴影盖住。
           用 :has() 检测 .item-menu-popup.open（itemcard.js 给 popup 切换 .open），不再依赖 .menu-open */
        /* 小游戏 🎮 角标挪到左下角：原默认 right/bottom 4px 与 ⋮ 按钮位置重叠 */
        .fav-icon .fav-badge { right: auto; left: 4px; }