.left-nav {
    left: 0;
    top: 0;
    position: fixed;
    overflow: hidden;
    background: #f6f7fa;
    z-index: 50;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.left-nav,
.left-nav-empty {
    width: 240px;
    height: 100vh;
    content: "viewport-units-buggyfill; height: 100vh";
}

.left-nav-empty {
    float: left;
}

.main-content {
    display: flow-root;
    position: relative;
    min-height: 100vh;
    content: "viewport-units-buggyfill; min-height: 100vh";
}

.left-nav .left-nav-inner {
    overflow: auto;
    width: 100%;
    -webkit-flex: 1;
    flex: 1;
}

.category-container {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.category-container li {
    position: relative;
    white-space: nowrap;
    list-style: none;
}

.category-container .category-entry-wrapper {
    margin: 20px 10px 0;
}

.category-container .category-entry-wrapper .category-entry-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 43px;
    text-decoration: none;
    cursor: pointer;
}

.category-container .category-entry-wrapper .category-entry-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-left: 20px;
}

.category-container .category-entry-wrapper .category-entry-item i {
    color: var(--semi-color-text-2);
    font-size: 18px;
    margin-right: 10px;
    margin-left: 20px;
}

.category-container .category-entry-wrapper .category-entry-item span {
    font-size: 16px;
    line-height: 23px;
    color: #242424;
}

.category-container .category-entry-wrapper .category-entry-item[data-actived="true"] {
    background: #e8e8fd;
    border-radius: 10px;
}

.category-container .category-entry-wrapper:first-child {
    margin-top: 0;
}

.category-container .category-entry-wrapper {
    margin: 20px 10px 0;
}

.category-container li {
    position: relative;
    white-space: nowrap;
    list-style: none;
}

.search-wrapper {
    margin: 30px 20px 30px 0;
    -webkit-flex: 1;
    flex: 1;
}

.search-content {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

/* ============================================================
 * 结果表格边框
 * ------------------------------------------------------------
 * 站点结果表格统一写法（见 views/home/tools/_template/）：
 *   <table border="1" cellpadding="6" style="border-collapse:collapse;...">
 * 但 Tailwind 的 preflight（static/home/css/tailwind.css 第一条规则）输出：
 *   *, ::before, ::after { border-width: 0; border-style: solid; border-color: #e5e7eb }
 * HTML 的 border="1" 属于「表现性提示」(presentational hint)，层叠优先级最低，
 * 会被这条 (0,0,0) 规则整片盖掉 —— 于是 table / th / td 的边框被统一清零，
 * 表格只剩文字、没有网格线。只写 table{} 是治不好的，必须连单元格一起写。
 *
 * 修复思路：用属性选择器把边框补回来
 *   · `table[border] …` 特异性 (0,1,3)，远高于 preflight 的 (0,0,0)，
 *     与加载顺序无关（tailwind.css 排在 main.css 之后也照样生效）；
 *   · 只匹配写了 border 属性的表格，不影响本来无边框的表格；
 *   · 颜色 #e5e7eb 与 .tool_scan / .tool_print 输入框保持一致；
 *   · >thead / >tbody / >tr 三种结构都覆盖，兼容不带 thead 的表格。
 * ============================================================ */
table[border] {
    border: 1px solid #e5e7eb;
    border-collapse: collapse;
}

table[border]>thead>tr>th,
table[border]>thead>tr>td,
table[border]>tbody>tr>th,
table[border]>tbody>tr>td,
table[border]>tr>th,
table[border]>tr>td {
    border: 1px solid #e5e7eb;
}

/* ============================================================
 * 结果表格换行与等分列宽（长内容不再撑宽表格 / 独吞宽度）
 * ------------------------------------------------------------
 * 症状一：单元格里是「一整串没有空格的字符」（超长整数、连续数字串）时，
 *         表格只往右越长越宽、不肯换行，把所在列顶宽，出现横向滚动条。
 *   原因有两层，只改一层都治不好：
 *     1) `td` 默认只在空格等软换行点断行，长数字串没有空格。
 *        `overflow-wrap: anywhere` 允许在**任意字符**处断行（仅需要时），
 *        而且它**参与 min-content 宽度计算** —— 这点是关键：
 *        `break-word` 不参与，只写它时表格最小宽度仍等于整串数字的宽度。
 *        旧 WebKit 不认 `anywhere`，补 `word-break: break-word` 兜底。
 *     2) `bootstrap.row.css` 的 `.row > *` 是 `flex-shrink:0` 且没写
 *        `min-width`，flex 项走默认 `min-width:auto`（=内容最小宽度），
 *        `max-width:100%` 压不住它，所以栅格子项要显式补 `min-width:0`。
 *
 * 症状二：能换行之后，长内容列（如斐波那契的「数值」）会吞掉 ~88% 宽度，
 *         其余列只剩 3%~5%，短内容（F(1000)）被迫折成两行。
 *   原因：auto 布局把「超出最小宽度的空间」按 max-content 比例分给各列，
 *         长内容列的 max-content 巨大，几乎独吞全部剩余空间；
 *         而规范里 **max-width 对表格单元格不生效**（实测 max-width:35%
 *         与不写完全一样），没法用它给单列限宽。
 *   处理：`table-layout: fixed` —— 列宽不再看内容，N 列等分，
 *         单列上限即 100%/N（4 列 25%、3 列 33%、8 列 12.5%），
 *         3 列起就天然 ≤35%（2 列是 50%，两列表格的合理上限）；
 *         配合上面的 anywhere，任何内容都装得下，也永不再出横向滚动。
 *
 * 表头原本内联写 `white-space:nowrap`，fixed 布局下列宽不再随内容伸缩，
 * 窄屏（8 列每列仅 ~36px）会让表头压到隔壁格，这里统一放开成可换行
 * （!important 用于盖过页面里内联的 style）。
 * ============================================================ */
table[border] {
    table-layout: fixed;
}

table[border]>thead>tr>th,
table[border]>thead>tr>td,
table[border]>tbody>tr>th,
table[border]>tbody>tr>td,
table[border]>tr>th,
table[border]>tr>td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

table[border]>thead>tr>th,
table[border]>tr>th {
    white-space: normal !important;
}

.tool-container .row>* {
    min-width: 0;
}

/* ============================================================
 * 结果表格空态
 * ------------------------------------------------------------
 * 表格在没出结果时只剩一行表头，看着像「坏了 / 没反应」。
 * 现在由 static/home/js/tool-common.js 里的 emptyTableRow() 注入一行
 * colspan 跨满整行的占位行，文字取公共文案 no_data（暂无数据 / 暫無資料 /
 * データがありません / No data available），四语言自动跟着切。
 *   · 时机：DOM ready 时 fillEmptyToolTables() 兜底补；renderTable(sel, []) 也会补；
 *   · 范围：只处理 .tool-container 内的表格，且 tbody 原本为空才补；
 *   · 特异性 (0,3,4) 高于上面的 (0,1,3)，颜色/内边距不会被盖掉。
 * ============================================================ */
table[border]>tbody>tr.tool-table-empty-row>td.tool-table-empty {
    text-align: center;
    color: #9ca3af;
    padding: 8px 6px;
    background: #fcfcfc;
}

/* ============================================================
 * 结果表格标题栏
 * ------------------------------------------------------------
 * 表格上方一行：左边写清「这是什么结果」（计算结果 / 统计结果 / 输出结果），
 * 右边一个「下载 CSV」文字链接，点了把表格内容导出成 CSV。
 *   · 结构：<div class="tool-table-caption">
 *               <span class="tool-table-title">…</span>
 *               <a class="tool-table-csv" data-target="#t-body">…</a>
 *           </div>
 *   · 链接由 tool-common.js 的 bindTableCsvLinks() 统一接管点击，页面不用写 onclick；
 *     不写 data-target 时默认导出「同一容器内的表格」。
 *   · 文字都走 i18n（calculation_result / statistics_result / download_csv），四语言自动切。
 * ============================================================ */
.tool-table-caption {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 10px 0 8px;
    font-size: 14px;
    line-height: 1.2
}

.tool-table-caption .tool-table-title {
    font-weight: 700;
    color: #374151;
    border-left: 3px solid #f59e0b;
    padding-left: 8px;
}

.tool-table-caption .tool-table-csv {
    color: #2563eb;
    /* text-decoration: underline; */
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.tool-table-caption .tool-table-csv:hover {
    color: #1d4ed8;
}

.tool-list-container {
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto 30px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tool-list-container .tool-item {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
    display: -webkit-flex;
    display: flex;
    margin-top: 30px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border-radius: 10px;
    height: 85px;
    text-decoration: none;
}

.tool-list-container .tool-item img {
    width: 46px;
    height: 46px;
    margin-top: 15px;
    margin-left: 8px;
}

.tool-list-container .tool-item i {
    width: 60px;
    height: 60px;
    min-width: 60px;
    line-height: 57px;
    font-size: 26px;               /* FA 字形在 60px 圆里的合适大小 */
    text-align: center;
    margin-top: 13px;              /* (85-60)/2，与站标 img 的光学中心对齐 */
    margin-left: 10px;
    border-radius: 50%;
    color: var(--icon-fg, #4b5563);
    background-color: var(--semi-color-tertiary-light-default);
}

.left-nav .logo-container {
    text-decoration: none;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin: 25px 0 0 25px;
    white-space: nowrap;
    padding-bottom: 30px;
    cursor: pointer;
}

.left-nav .logo-container div .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.left-nav .logo-container div .sub-title {
    font-size: 12px;
}

.left-nav .logo-container div span {
    display: block;
}

.left-nav .logo-container img {
    width: 56px;
    height: 56px;
    margin-right: 12px;
}

.main-content .footer-container,
.search-content {
    margin: 0 auto;
}

.tool-list-container .tool-item .tool-content {
    padding: 10px 10px 10px 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-list-container .tool-item .tool-content .tool-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #242424;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: flex;
    height: 38px;
    flex-direction: column;
    justify-content: space-evenly;
}

.tool-list-container .tool-item .tool-content .tool-desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    margin-top: 0px;
    color: #8f8f8f;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tool-list-container .tool-item .tool-content em {
    color: #f73131;
    font-style: normal;
    display: contents;
}

/* ============================================================
 * 列表卡片右上角的「NEW」徽标（首页 / 分类页工具列表）
 * ------------------------------------------------------------
 * 输出位置：views/home/index.html 与 views/home/tools/c/class.html
 *   <a ... class="tool-item has-new">
 *       <span class="tool-new-badge">{{.__common.new_badge}}</span>
 * 「哪些工具算新」由 Go 侧 internal/app/home/controllers/newtools.go 决定，
 * 到期自动消失，前端无需任何额外处理。
 * 卡片自身已是 position:relative（见上面的 .tool-item），故直接绝对定位到右上角。
 * 文案走 i18n 的 common.new_badge（NEW / 新 / 新 / 新着），天然多语言。
 * ============================================================ */
.tool-list-container .tool-item .tool-new-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .5px;
    color: #fff;
    background: linear-gradient(135deg, #3bb346, #2f9c3c);
    border-radius: 0 10px 0 10px;
    box-shadow: 0 2px 6px rgba(59, 179, 70, .35);
    pointer-events: none;
    white-space: nowrap;
}

/* 带徽标的卡片：正文右侧留白，避免徽标压住标题文字 */
.tool-list-container .tool-item.has-new .tool-content {
    padding-right: 46px;
}

/* ============================================================
 * 工具卡片：手机端紧凑化（≤767px）
 * ------------------------------------------------------------
 * 桌面端维持原样（85px 高 + 30px 间距，一行 3 列）。
 * 手机上原来是 85 + 30 = 每张 115px，一屏（约 1000px 可视高度）只放得下 7 张。
 * 这里压到 64 + 12 = 每张 76px（约 -34%），同样高度能放 10 张左右：
 *   - 图标 46 → 34，左右留白同步收窄，并用 align-items:center 整体垂直居中；
 *   - 标题 14px/38px（两行）→ 13px/18px（一行，超长自动省略号；短标题仍是核心名，一行放得下）；
 *   - 描述 13px/20px → 12px/16px，与标题留 3px；
 *   - 列表上下留白 30 → 16px。
 * 只动移动端，桌面与分类页的既有观感不变。
 * ============================================================ */
@media (max-width: 767px) {
    .tool-list-container {
        margin-bottom: 16px;
    }

    .tool-list-container .tool-item {
        height: 64px;
        margin-top: 12px;
        -webkit-align-items: center;
        align-items: center;
    }

    .tool-list-container .tool-item img {
        width: 34px;
        height: 34px;
        margin-top: 0;
        margin-left: 8px;
    }

    /* 列表卡片用 FA 图标时的移动端尺寸（卡片 64px 高） */
    .tool-list-container .tool-item i {
        width: 40px;
        height: 40px;
        min-width: 40px;
        line-height: 40px;
        font-size: 20px;
        margin-top: 0;
        margin-left: 8px;
        border-radius: 50%;
    }

    .tool-list-container .tool-item .tool-content {
        padding: 6px 10px;
    }

    .tool-list-container .tool-item .tool-content .tool-title {
        display: block;
        height: 18px;
        font-size: 16px;
        line-height: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tool-list-container .tool-item .tool-content .tool-desc {
        margin-top: 6px;
        font-size: 14px;
        line-height: 16px;
    }    
}

.search-container {
    position: relative;
    -webkit-align-items: center;
    align-items: center;
    background: #f6f7fa;
    border-radius: 25px;
    overflow: hidden;
    z-index: 20;
}

.search-container .search-area {
    display: -webkit-flex;
    display: flex;
    height: 50px;
    position: relative;
    -webkit-align-items: center;
    align-items: center;
}

.search-container .search-area .search-input {
    border: 0;
    outline: none;
    background: #f6f7fa;
    line-height: 30px;
    margin-right: 20px;
    -webkit-flex-grow: 1;
    padding-left: 10px;
    flex-grow: 1;
    color: #242424;
    font-size: 16px;
}

.search-container .search-area .statistics-container {
    position: absolute;
    left: 65px;
    top: 10px;
    line-height: 30px;
    pointer-events: none;
    color: #b3b3b3;
}

.search-container .search-area .statistics-container b {
    color: #136ce9;
}

.search-container .search-area .search-icon {
    font-size: 20px;
    line-height: 40px;
    margin: 0 5px 0 23px;
    color: rgba(0, 0, 0, .1);
}

.share-btn {
    font-size: 18px;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 26px;
    color: var(--semi-color-text-2);
    background-color: var(--semi-color-fill-0);
    margin-right: 10px;
}

/**********tool start****************/

@media (max-width: 767px) {    
    .search-wrapper {
        margin: 10px 15px 10px  5px;
    }
    .search-container{
        border-radius:15px;
    }
    .search-container .search-area {
    height: 45px;
    }

    .left-nav,
    .left-nav-empty {
        display: none;
    }

    /* 顶栏右上角的用户菜单（登录态/昵称 + 下拉）：手机上不需要。
       一是它的下拉靠 mouseenter/mouseleave 触发，触摸屏点不出来；
       二是「我的 / 收藏 / 登录」手机端已由底部导航（_bottom_nav.html）承接。
       分享按钮 #shareLink 不在这个容器里，不受影响。 */
    #userMenuContainer {
        display: none;
    }
}

.tool-container,
.tool-content-container {
    border-radius: 10px;
    box-sizing: border-box;
}

.tool-container {
    background: #f6f7fa;
    padding: 0px 20px 20px 20px;
}


.tool-information {
    min-height: 45px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 5px;
}

.tool-information .tool-content .tool-title {
    height: 30px;
    line-height: 30px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
}

.tool-information i.icon {
    font-size: 18px;
    width: 30px;
    /* height: 40px; */
    /* line-height: 40px; */
    text-align: center;
    border-radius: 26px;
    color: var(--icon-fg, #4b5563);
    /* background-color: var(--icon-bg, rgb(240 241 242)); */
    margin-right: 5px;
    /* color: var(--semi-color-text-2);     */
}


/* ---------------- 工具页标题图标配色 ----------------
 * 颜色不写死在页面，也不写在这里 —— 口径是「颜色跟图标走」：
 *   色板键（如 teal-2）登记在 Go 清单的 Color 字段
 *   → 控制器透传成 ViewPage.Color（lists.go）
 *   → 页面模板输出 class="fa fa-xxx icon{{if .info.Color}} icon-{{.info.Color}}{{end}}"
 *   → 色值由 tools/tailwind/input.css 里 theme() 引用 Tailwind 官方调色板生成
 *     （.icon-<色相>-<档位>，16 色相 × 3 档 = 48 种，只设 --icon-fg/--icon-bg）
 * 上面的 .tool-information i.icon 与 game.css 的 .game-header-icon 消费这两个变量。
 * Color 为空时回退默认灰底灰字。改色板请改 input.css 后重新构建：tools/tailwind/build.bat
 */

/* ---------------- 工具页「收藏」按钮（标题所在行的最右端，见 static/home/js/favorite.js） ---------------- */
/*
 * 布局口径：按钮不塞进标题元素内部（那样只会紧贴标题文字），
 * 而是作为「标题所在那一行」的最后一个 flex 子项，靠右对齐：
 *   工具页  行容器 = .tool-information（图标 + .tool-content + 按钮）
 *   游戏页  行容器 = .game-header     （图标 + 标题 + 按钮，描述已换到第二行）
 * 让标题撑满剩余宽度（flex:1），按钮自然被推到整行最右端。
 * 对应的行容器会带上 .has-fav-btn 类（由 favorite.js 添加）。
 */
.tool-information.has-fav-btn .tool-content,
.game-header.has-fav-btn h1 {
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题过长时省略，避免顶到右侧按钮上 */
.tool-information.has-fav-btn .tool-title,
.game-header.has-fav-btn h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 12px;
    padding: 0 10px;
    height: 26px;
    vertical-align: middle;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--semi-color-text-2, #6b7280);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: color .15s, border-color .15s, background-color .15s;
}

.tool-fav-btn:hover {
    color: var(--semi-color-primary, #0064fa);
    border-color: currentColor;
}

/* 已收藏：实心星 + 琥珀色，和移动端底栏「收藏」的图标语义保持一致 */
.tool-fav-btn.is-on {
    color: #f5a623; 
    border-color: rgba(245, 166, 35, .45);
    background-color: rgba(245, 166, 35, .08); 
}

.tool-fav-btn:disabled {
    opacity: .6;
    cursor: default;
}

.tool-fav-btn i {
    font-size: 12px;
}
.tool-fav-btn.is-on i{
    font-size: 14px;
}

@media (max-width: 767px) {
    .tool-fav-btn {
        margin-left: 8px;
        padding: 0 9px;
    }

    /* 窄屏只留星标，免得把标题挤换行 */
    .tool-fav-btn .tool-fav-text {
        display: none;
    }
}

.tool-content-container .pc-content {
    padding: 20px 30px 30px;
    min-height: 200px;
    overflow: auto;
}

.tool-content-container {
    background: #fff;
    position: relative;
}

#app {
    min-height: 200px;
    /* display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center; */
    /* margin-top: 20px; */
    position: relative;
}

body[data-pc=true] .tool-useguide-modal .tool-useguide {
    border-radius: 10px;
    background: #fafbfc;
    color: #262626;
    font-size: 14px;
    font-style: normal;
    margin-top: 30px;
    padding: 20px;
    max-height: none;
}

.tool-useguide {
    margin-top: 22px;
    max-height: 600px;
    overflow-y: auto;
    background: #f6f7fa;
    border-radius: 10px;
    padding: 30px 50px;
    box-sizing: border-box;
}

@media screen and (max-width:768px) {
    .tool-useguide {
        padding: 10px;
    }

    .tool-container {
        padding: 5px;
    }

    .tool-content-container {
        padding: 0;
    }

    .tool-content-container .pc-content {
        padding: 0 5px
    }

    /* 手机端 .pc-content 只有 5px 内边距，挡不住 bootstrap .row 自带的
       -12px 左右负 margin（3button-info.html 那排「消息 + 3 按钮」就是 .row），
       会左右各超出 7px，触发 .pc-content(overflow:auto) 的横向滚动条，
       表现为 .toolbuttongroup 下方出现一条横拉条。
       这里把 .tool-container 内 .row 的负 margin 与子项的 gutter 内边距一起归零：
       原本 -12px 与 +12px 正好抵消，子元素位置一个像素不变，只是不再溢出。
       工具模板里手机端全部是 col-12 堆叠（无 col-6/col-4 并排），归零无副作用。 */
    .tool-container .row {
        margin-left: 0;
        margin-right: 0;
    }

    .tool-container .row > * {
        padding-left: 0;
        padding-right: 0;
    }

    .tool-information .tool-content .tool-title {
        font-size: 14px;
    }
}

body[data-pc=true] .tool-useguide-modal .tool-useguide .tool-description {
    margin-top: 10px;
}

.tool-useguide .tool-description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #8f8f8f;
}

.tool-useguide .tool-description,
.tool-useguide h3 {
    font-family: PingFang SC;
    font-style: normal;
    line-height: 20px;
}

.more-examples a {
    line-height: 35px;
}

.toolbuttongroup {
    min-height: 75px;
    padding: 10px 2px;
    text-align: center;
}

.toolbuttongroup button:active {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-translate-y: 0.25rem;
}

.tool_copy,
.tool_clear,
.tool_export {
    width: 2.0rem;
    height: 2.0rem;
    color: var(--semi-color-text-2);
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: var(--semi-color-fill-1);
    margin-right: .5rem;
}

.tool_export:hover {
    color: #3bb346;
}

.tool_copy:hover {
    color: #3bb346;
}

.tool_clear:hover {
    color: #d52515;
}
.example-btn {
    padding: .4rem 0.8rem;
}
.run-btn{
    padding: .35rem 0.75rem;
}

/* ============================================================
 * 表格内联「复制」图标按钮（公共组件）
 * ------------------------------------------------------------
 * 生成方式：static/home/js/tool-common.js 的 copyIconBtn()
 * 用法（表格 / 任意位置都能用，无需写 onclick）：
 *   `<td>${copyIconBtn(text)}</td>`                        复制纯文本
 *   `<td>${copyIconBtn('', {target:'#textResult'})}</td>`  复制某元素的值
 * 设计：纯图标无文字（天然免翻译）+ 浅色背景 + hover 主题绿 + 复制成功打勾
 * 注意：Tailwind preflight 会清零 button 的 border / background，
 *       这里用类选择器 (0,1,0) 覆盖，优先级足够；勿改成裸 button 选择器。
 * ============================================================ */
.tool-inline-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #f3f4f6;
    color: #6b7280;
    float: right;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.tool-inline-copy:hover {
    color: #3bb346;
    background-color: #eef7ef;
    border-color: #9fdcb3;
}

.tool-inline-copy:active {
    background-color: #e2f1e6;
}

/* 复制成功后的短暂反馈（由 tool-common.js 添加/移除） */
.tool-inline-copy.is-copied {
    color: #ffffff;
    background-color: #3bb346;
    border-color: #3bb346;
}

.tool_scan,
.tool_print {
    width: 100%;
    outline: none;
    border: 1px solid #e5e7eb;
    padding: 5px 10px;
    border-radius: 5px;
}

.tool_print {
    background-color: #f8f8f8;
}

.toolresultinfo {
    color: #1c1f23cc;
    min-height: 2rem;
    line-height: 25px;
    padding-left: 5px;
    border-radius: 3px;
}

.tool_alert {
    z-index: 50;
    padding: 0.5rem 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    left: 50%;
    transition-duration: 1000ms;
    bottom: 2.5rem;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    border-radius: 0.25rem;
    color: white;
}

@media (max-width: 767px) {
    .tool_alert {
        width: auto;
        left: 25%;
    }
}

.toolparams {
    background-color: var(--semi-color-info-light-default);
    border-radius: 5px;
    margin: 5px 0;
}

.toolparams label {
    cursor: pointer;
}

.toolparams>div {
    padding: 6px 10px;
}

.toolparams select {
    padding: 0.25rem 0.75rem;
}

.toolparams input[type=text],
.toolparams input[type=number] {
    padding: 0.25rem 0.5rem;
}

.toolparams input[type=number] {
    width: 100px;
}

/* ---------- 参数区统一（2026-10-03 早期 32 个工具体检后补） ----------
   1) .toolparams 若是 .row 的直接子元素，会被 bootstrap.row.css 的 .row > * 加上
      左右各 12px 的 gutter 内边距，蓝底框因此比上方输入/输出框宽 24px
      （同一批页面里有的 940px、有的 916px，就是这一条造成的）。
      这里统一收回到与 .pc-content 内容同宽，两种写法渲染结果一致。 */
.tool-container .row > .toolparams {
    width: calc(100% - var(--bs-gutter-x, 1.5rem));
    margin-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
    padding: 5px 3px;
    font-size: 14px;
}

/* 2) tailwind 的 preflight 把 select/textarea 的边框清成 0，而 input 靠页面里
      手写的 .border 工具类才有边框 —— 同一参数区里下拉框/多行框光秃秃、
      输入框有框。这里给参数区控件统一补边框与圆角（与 .border/.rounded 同值）。 */
.toolparams input[type=text],
.toolparams input[type=number],
.toolparams select,
.toolparams textarea {
    border: 1px solid rgb(229, 231, 235);
    border-radius: 4px;
    background-color: #fff;
    min-width: 6rem;
}

/* 参数区里的多行输入：独占一行、与所在参数行同宽（原先只有 sku-generator
   用页面局部 .text90x / .form-control 自己实现，现已下沉为公共样式） */
.toolparams textarea {
    display: block;
    width: 100%;
    padding: 4px 8px;
}

.more_examples a {
    padding: 5px 15px 5px 0;

}

/**********tool end****************/


/**********footer start****************/
.footer-empty {
    height: 215px;
}

.footer-content {
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-bottom: 50px;
}

.footer-content .line {
    border: 1px solid #f6f7fa;
    height: 0;
    width: 100%;
    margin: 0 auto;
}

.footer-content .userid-debug-container {
    height: 50px;
}

.footer-content .footer-infor {
    display: -webkit-flex;
    display: flex;
}

.footer-content .footer-infor .footer-introduce {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: #242424;
    height: 18px;
    margin-bottom: 10px;
}

.footer-content .footer-infor .license-pc {
    height: 18px;
    line-height: 18px;
}

.license-pc a {
    color: #8f8f8f !important;
    position: relative;
    margin: 0 !important;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
}

.footer-content .footer-infor .copyright-pc {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #8f8f8f;
    box-sizing: border-box;
}

.footer-content .footer-infor .copyright-pc {
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #8f8f8f;
    box-sizing: border-box;
}

.license-pc .vertical {
    padding-right: 12px;
    margin-right: 12px;
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    border-right: 1px solid var(--semi-color-border);
}

@media screen and (max-width:768px) {
    .footer-content .footer-infor .footer-introduce {
        font-size: 14px;
    }

}

/*
  底部语言切换：≤767px 时整块隐藏。
  移动端顶部 H5 头部（_mobile_header.html，靠 Tailwind 的 md:hidden 在 <768px 显示）
  已经有一个功能完全相同的语言下拉，一屏里出现两个只会让人以为是两回事。
  断点取 767px 是为了和 Tailwind 的 md(768px) 严丝合缝地互补：
  桌面端顶部头部隐藏，此时底部这个就是页面上唯一的语言入口，必须保留。
  （工具页 / 分类页 / 404 页的底部同样是这套模板，一并生效。）
*/
@media screen and (max-width: 767px) {
    .footer-content .userid-debug-container {
        display: none;
    }
}

/**********footer end****************/



/**************nav start***************/
.nav-box .upgrade-pro {
    background-color: #eebf8a;
    color: #8e520d;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 24px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}


/*************nav end******************/

/**************long tail start***************/
/* 通用长尾页正文块（views/home/layout/_longtail.html 与 _longtail_links.html）
   - 表格刻意不写 border="1"：那条属性会被本文件的 table[border] 规则接管成
     table-layout:fixed 等分列宽，而长尾表格的列宽并不相等（有的列是长算式、长数字），
     所以这里单开一套 .lt-table。
   - 配色沿用站点浅色底，不做深色主题。 */
.lt-section {
    margin-top: 18px;
    padding: 20px 22px;
    background-color: #fff;
    border: 1px solid #eceff3;
    border-radius: 10px;
}

.lt-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.lt-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background-color: #eef7f0;
    color: #2f9e44;
    font-size: 12px;
    font-weight: 600;
}

.lt-h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1f2933;
    line-height: 1.45;
}

.lt-summary {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.8;
    color: #3d4852;
}

.lt-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.lt-fact {
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 12px;
    background-color: #f7f9fb;
    border: 1px solid #eceff3;
    border-radius: 8px;
}

.lt-fact-label {
    display: block;
    font-size: 12px;
    color: #8b95a1;
    margin-bottom: 4px;
}

.lt-fact-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1f2933;
    word-break: break-all;
}

.lt-table-block {
    margin: 0 0 16px;
}

.lt-table-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2933;
    margin: 0 0 8px;
}

.lt-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.lt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lt-table th,
.lt-table td {
    border: 1px solid #e5e9ef;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.lt-table th {
    background-color: #f5f7fa;
    font-weight: 600;
    white-space: nowrap;
}

.lt-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

.lt-notes {
    margin: 0 0 16px;
    padding-left: 18px;
    color: #6b7480;
    font-size: 13px;
    line-height: 1.8;
}

.lt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lt-chip {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #dfe5ec;
    border-radius: 16px;
    background-color: #f8fafc;
    color: #2b6cb0;
    font-size: 13px;
    text-decoration: none;
}

.lt-chip:hover {
    background-color: #eef4fb;
    border-color: #c9dcf3;
}

.lt-links-block {
    margin-top: 16px;
    padding: 16px 18px;
    background-color: #fff;
    border: 1px solid #eceff3;
    border-radius: 10px;
}

@media screen and (max-width: 767px) {
    .lt-section {
        padding: 16px 14px;
    }

    .lt-h1 {
        font-size: 17px;
    }

    .lt-fact {
        flex: 1 1 100%;
    }
}

/**************long tail end***************/