/* iOS 文件夹形制。颜色全走 --nx-* 令牌，跟随站点明暗主题。 */
    .nex-toolbox{
        /* 64px —— **iOS 手机主屏上文件夹的真实尺寸**（0.18.5 从 148 缩下来）。
           工具箱那一列是 400px，正好是一部手机的宽度，所以这里可以直接照 iPhone 的数值做。

           三个值是一起按 148 → 64（×0.432）等比缩的，比值和当初调好的一模一样：
           64 - 14(内边距) - 8(两道缝) = 42 → 每格约 14px，占方块的 21.9%（原来 21.6%）。
           四周留白（7px）依然比缝（4px）宽 —— 这个大小关系不能反，反了九个小方块就挤成一坨。
           改尺寸时**三个值要一起改**，只改 size 的话比值会歪掉。 */
        --nex-folder-size:64px;
        --nex-folder-pad:7px;
        --nex-folder-gap:4px;
        --nex-tool-radius:28%;     /* 图标圆角，iOS 那种「超椭圆」观感 */
        box-sizing:border-box;
        width:100%;
        max-width:var(--nex-content-w,1200px);
        /* 板块上下的留白。默认 16px，小工具里可以逐块改（0 = 完全贴着邻块）。 */
        margin:var(--nex-toolbox-gap-y,16px) auto;
    }
    .nex-toolbox *,.nex-toolbox *::before,.nex-toolbox *::after{box-sizing:border-box}
    /* 和精选专题、游戏展示板块（.nex-sec）同一套：标题 → 4px → 副标题 → 14px → 内容。
       三个板块的这三个数值必须一致，回归测试会比对。 */
    .nex-toolbox-head{margin:0 0 14px !important}
    .nex-toolbox-title{margin:0 !important;font-size:22px !important;font-weight:800 !important;line-height:1.2;letter-spacing:.01em;color:var(--nx-text,#172033) !important}
    .nex-toolbox-sub{margin:4px 0 0 !important;font-size:13px !important;line-height:1.6;color:var(--nx-muted,#667085) !important}

    /* 文件夹那一排：固定边长、左对齐、自动换行 —— iOS 主屏就是这么排的，
       所以**不用 grid 拉伸**，格子大小不随窗口变。 */
    .nex-toolbox-folders{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:flex-start}

    .nex-tool-folder{
        display:flex;flex-direction:column;align-items:center;gap:4px;
        width:var(--nex-folder-size);
        text-decoration:none;color:inherit;
        -webkit-tap-highlight-color:transparent;
    }

    /* 文件夹方块本体：毛玻璃 + 3×3 小格。

       方块的「正方形」是用 **height:var(--nex-folder-size)** 定死的，**不是 aspect-ratio**。
       踩过的坑：`.nex-tool-folder` 是 flex column，方块是它的 flex 项 —— 主轴（高度）尺寸
       由内容决定，`aspect-ratio` 在这里只是「偏好值」，内容更高时就被顶开。
       于是网格行高变成不确定，格子里的 `<img height:100%>` 百分比解析不了、
       退回**图片自己的固有高度**，竖一点的图标就把行顶高：实测 64 宽、68 高，不是正方形。
       （给格子加 min-height:0 也没用 —— 撑开行的是替换元素的固有尺寸，不是最小尺寸。）
       高度一旦是确定值，行高就能解析，height:100% + object-fit:cover 才真正生效。

       行仍然要显式写：只写列的话行高还是由内容撑开。 */
    .nex-tool-folder-tile{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-template-rows:repeat(3,minmax(0,1fr));
        gap:var(--nex-folder-gap);
        width:100%;
        height:var(--nex-folder-size);
        padding:var(--nex-folder-pad);
        border-radius:var(--nex-tool-radius);
        background:rgba(128,148,178,.16);
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
        transition:transform .18s ease,background .18s ease;
    }
    html[data-bs-theme="light"] .nex-tool-folder-tile,
    html[data-nex-theme="light"] .nex-tool-folder-tile{background:rgba(16,40,80,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
    .nex-tool-folder:hover .nex-tool-folder-tile{transform:translateY(-2px)}
    .nex-tool-folder[aria-expanded="true"] .nex-tool-folder-tile{
        background:rgba(128,148,178,.3);
        box-shadow:inset 0 0 0 2px var(--nx-link,#2865bf);
    }
    html[data-bs-theme="light"] .nex-tool-folder[aria-expanded="true"] .nex-tool-folder-tile,
    html[data-nex-theme="light"] .nex-tool-folder[aria-expanded="true"] .nex-tool-folder-tile{background:rgba(16,40,80,.12)}

    .nex-tool-folder-cell{
        display:block;width:100%;height:100%;
        /* min-height:0 是必须的：grid 子项默认 min-height:auto，
           内容比格子高时会把行顶开，格子就不是正方形了 */
        min-height:0;
        border-radius:24%;
        object-fit:cover;
        background:var(--nx-soft,#f5f7fa);
    }
    /* 没有图标时用标题首字顶着，总比一个灰方块有信息量 */
    .nex-tool-folder-cell.is-letter{
        display:grid;place-items:center;
        background:var(--nx-border,#dfe5ed);
        color:var(--nx-muted,#627187);
        /* 格子只有 14px，字号得跟着缩，不然首字会顶出格子 */
        font-size:8px;font-weight:800;font-style:normal;
    }
    /* 还没填满的小格留空位，看起来才像文件夹而不是残阵。
       但要压得很淡 —— 只有两个工具时，剩下七个空位抢戏就变成一屏灰方块了。 */
    .nex-tool-folder-cell.is-empty{background:rgba(128,148,178,.10)}
    html[data-bs-theme="light"] .nex-tool-folder-cell.is-empty,
    html[data-nex-theme="light"] .nex-tool-folder-cell.is-empty{background:rgba(16,40,80,.045)}

    .nex-tool-folder-name{
        /* 11px 是 iOS 主屏图标下面那行字的大小 */
        font-size:11px;font-weight:600;line-height:1.4;text-align:center;
        color:var(--nx-text,#172033);
        max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .nex-tool-folder:hover .nex-tool-folder-name{color:var(--nx-link,#2865bf)}
    .nex-tool-folder-count{font-size:10px;line-height:1.4;color:var(--nx-muted,#667085)}

    /* 面板的「停车位」：面板平时躺在这里（容器一直 hidden，不占布局），
       点开文件夹时被 JS 搬进弹窗。所以这里不再需要外边距。 */
    .nex-toolbox-panels[hidden]{display:none}
    .nex-tool-panel[hidden]{display:none}

    /* ---- 弹窗（0.18.6：原来是「在文件夹正下方推开」，改成点开弹一层） ---- */
    .nex-toolbox-modal{
        position:fixed;inset:0;z-index:9990;
        display:flex;align-items:center;justify-content:center;
        padding:24px;
        /* 背景虚化。底色那层不能省 —— 浏览器不支持 backdrop-filter 时，
           全靠它把后面的页面压下去，不然弹窗会糊在内容上看不清。 */
        background:rgba(8,14,24,.5);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
        animation:nex-toolbox-backdrop-in .18s ease both;
    }
    .nex-toolbox-modal[hidden]{display:none}
    @keyframes nex-toolbox-backdrop-in{from{opacity:0}to{opacity:1}}

    /* 弹窗里那张卡片就是面板本身，尺寸和滚动都由它管 */
    .nex-toolbox-modal-box{display:flex;max-width:100%;max-height:100%}
    .nex-toolbox-modal .nex-tool-panel{
        width:min(760px,100%);
        max-height:calc(100vh - 48px);
        overflow:auto;
        margin:0;
        border:1px solid var(--nx-border,#dfe5ed);
        border-radius:18px;
        background:var(--nx-bg,#fff);
        box-shadow:0 24px 60px rgba(6,12,24,.45);
        padding:20px 22px 22px;
        animation:nex-tool-panel-in .2s cubic-bezier(.2,.8,.3,1) both;
    }
    .nex-toolbox-modal .nex-tool-panel:focus{outline:none}
    .nex-toolbox-modal .nex-tool-panel:focus-visible{outline:2px solid var(--nx-link,#2865bf);outline-offset:3px}
    @keyframes nex-tool-panel-in{
        from{opacity:0;transform:translateY(10px) scale(.985)}
        to{opacity:1;transform:none}
    }
    /* 弹窗开着的时候别让后面的页面滚 */
    html.nex-toolbox-modal-open{overflow:hidden}

    .nex-tool-panel-head{
        display:flex;align-items:center;gap:10px;flex-wrap:wrap;
        margin:0 0 14px;
    }
    .nex-tool-panel-title{margin:0;font-size:15px;font-weight:800;line-height:1.4;color:var(--nx-text,#172033)}
    .nex-tool-panel-count{font-size:12px;line-height:1.4;color:var(--nx-muted,#667085)}
    .nex-tool-panel-more{
        font-size:12px;font-weight:600;color:var(--nx-link,#2865bf);
        text-decoration:none;white-space:nowrap;
    }
    .nex-tool-panel-more i{font-style:normal}
    .nex-tool-panel-more:hover{text-decoration:underline}
    /* 收起按钮靠最右 */
    .nex-tool-panel-close{
        margin-left:auto;
        width:30px;height:30px;padding:0;
        display:grid;place-items:center;
        border:1px solid var(--nx-border,#dfe5ed);
        border-radius:8px;
        background:var(--nx-bg,#fff);
        color:var(--nx-muted,#667085);
        cursor:pointer;
        transition:color .15s ease,border-color .15s ease;
    }
    .nex-tool-panel-close svg{width:15px;height:15px;display:block}
    .nex-tool-panel-close:hover{color:var(--nx-text,#172033);border-color:var(--nx-muted,#667085)}

    /* 展开后的工具网格：图标 + 名字，名字压两行封顶 */
    .nex-tool-list{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
        gap:16px 10px;
    }
    .nex-tool{
        display:flex;flex-direction:column;align-items:center;gap:7px;
        padding:6px 2px;
        border-radius:10px;
        text-decoration:none;color:inherit;
        transition:background .15s ease;
    }
    .nex-tool:hover{background:var(--nx-bg,#fff)}
    .nex-tool-icon{
        display:block;
        width:68px;height:68px;
        border-radius:var(--nex-tool-radius);
        overflow:hidden;
        background:var(--nx-bg,#fff);
        box-shadow:0 2px 8px rgba(10,20,40,.14);
        flex:none;
    }
    .nex-tool-icon img{display:block;width:100%;height:100%;object-fit:cover}
    .nex-tool-icon i{
        display:grid;place-items:center;width:100%;height:100%;
        font-style:normal;font-weight:800;font-size:22px;
        color:var(--nx-muted,#627187);
        background:var(--nx-border,#dfe5ed);
    }
    .nex-tool:hover .nex-tool-icon{box-shadow:0 4px 14px rgba(10,20,40,.22)}
    .nex-tool-name{
        font-size:11.5px;line-height:1.45;text-align:center;
        color:var(--nx-text,#172033);
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
        overflow-wrap:anywhere;
    }

    .nex-toolbox-empty{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--nx-muted,#667085)}

    @media (max-width:760px){
        .nex-toolbox{--nex-folder-size:56px;--nex-folder-pad:6px;--nex-folder-gap:4px}
        .nex-tool-folder-name{font-size:10.5px}
        .nex-tool-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:14px 8px}
        .nex-tool-icon{width:52px;height:52px}
        .nex-tool-panel{padding:14px 14px 16px}
    }
    @media (max-width:420px){
        .nex-toolbox{--nex-folder-size:48px;--nex-folder-pad:5px;--nex-folder-gap:3px}
        .nex-toolbox-folders{gap:12px 10px}
        .nex-tool-folder-name{font-size:10px}
    }
    @media (prefers-reduced-motion:reduce){
        .nex-tool-folder-tile,.nex-tool,.nex-tool-panel{transition:none;animation:none}
        .nex-tool-folder:hover .nex-tool-folder-tile{transform:none}
        /* 弹窗保留（它是内容，不是动效），只是不淡入不位移 */
        .nex-toolbox-modal,.nex-toolbox-modal .nex-tool-panel{animation:none}
    }