/* ==========================================================================
   极简工具 · 站点样式
   1) 设计变量   2) 基础排版   3) 顶部导航   4) 页面容器
   5) 首页 Hero  6) 工具卡片   7) 工具页表单  8) 页脚
   9) 响应式    10) 遗留样式（勿删，旧页面仍在使用）
   ========================================================================== */

/* 1) 设计变量 ------------------------------------------------------------- */
:root {
    --jt-primary: #3b6ef6;
    --jt-primary-dark: #2b57d0;
    --jt-primary-soft: #eef3ff;
    --jt-ink: #161c2d;
    --jt-ink-2: #5a6478;
    --jt-ink-3: #8b93a5;
    --jt-line: #e6eaf2;
    --jt-bg: #f6f8fc;
    --jt-surface: #ffffff;
    --jt-radius: 16px;
    --jt-radius-sm: 12px;
    --jt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --jt-shadow: 0 12px 28px -16px rgba(21, 43, 96, .28);
    --jt-max: 1180px;
    --jt-header-h: 64px;
}

/* 2) 基础排版 ------------------------------------------------------------- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    background: var(--jt-bg);
    color: var(--jt-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--jt-primary);
    text-decoration: none;
}

a:hover {
    color: var(--jt-primary-dark);
}

.jt-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 3) 顶部导航 ------------------------------------------------------------- */
.jt-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--jt-line);
}

.jt-header__inner {
    max-width: var(--jt-max);
    margin: 0 auto;
    padding: 0 20px;
    height: var(--jt-header-h);
    display: flex;
    align-items: center;
    gap: 18px;
}

.jt-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 700;
    color: var(--jt-ink);
    letter-spacing: .2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.jt-brand:hover {
    color: var(--jt-ink);
}

/* 页脚语言下拉 */
.jt-lang-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 2px 22px 2px 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--jt-ink-2);
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a0ad' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 8px 5px;
    border: 1px solid var(--jt-line);
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color .15s ease, color .15s ease;
}

.jt-lang-select:hover,
.jt-lang-select:focus {
    color: var(--jt-primary);
    border-color: var(--jt-primary);
    outline: none;
}

.jt-brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--jt-primary), #7aa2ff);
    box-shadow: 0 4px 10px -4px rgba(59, 110, 246, .8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* 顶部搜索 */
.jt-search {
    flex: 1 1 auto;
    max-width: 440px;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.jt-search input {
    width: 100%;
    height: 40px;
    padding: 0 44px 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f2f5fb;
    color: var(--jt-ink);
    font-size: 14px;
    outline: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.jt-search input::placeholder {
    color: var(--jt-ink-3);
}

.jt-search input:focus {
    background: #fff;
    border-color: #bcd0ff;
    box-shadow: 0 0 0 3px rgba(59, 110, 246, .12);
}

.jt-search button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--jt-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: color .2s, background .2s;
}

.jt-search button:hover {
    color: var(--jt-primary);
    background: var(--jt-primary-soft);
}

.jt-header__user {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jt-login {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--jt-line);
    background: #fff;
    color: var(--jt-ink-2);
    font-size: 13px;
    transition: all .2s;
}

.jt-login:hover {
    border-color: #bcd0ff;
    color: var(--jt-primary);
    background: var(--jt-primary-soft);
}

.jt-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: #f2f5fb;
    color: var(--jt-ink-2);
    font-size: 13px;
    cursor: pointer;
    position: relative;
}

.jt-user__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jt-primary), #7aa2ff);
    color: #fff;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jt-user__menu {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 120px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: 10px;
    box-shadow: var(--jt-shadow);
    display: none;
}

.jt-user:hover .jt-user__menu {
    display: block;
}

.jt-user__menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--jt-ink-2);
    font-size: 13px;
}

.jt-user__menu a:hover {
    background: var(--jt-primary-soft);
    color: var(--jt-primary);
}

/* 分类导航 */
.jt-nav {
    border-bottom: 1px solid var(--jt-line);
    background: #fff;
}

.jt-nav__inner {
    max-width: var(--jt-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    overflow-x: auto;
    scrollbar-width: none;
}

.jt-nav__inner::-webkit-scrollbar {
    display: none;
}

.jt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--jt-ink-2);
    font-size: 13px;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.jt-chip:hover {
    background: #f2f5fb;
    color: var(--jt-ink);
}

.jt-chip.is-active {
    background: var(--jt-primary-soft);
    color: var(--jt-primary);
    font-weight: 600;
}

.jt-chip i {
    font-size: 14px;
}

/* 4) 页面容器 ------------------------------------------------------------- */
.jt-main {
    flex: 1 0 auto;
    padding: 24px 0 48px;
}

.jt-container {
    max-width: var(--jt-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* 5) 首页 Hero ------------------------------------------------------------ */
.jt-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 40px 32px;
    margin-bottom: 28px;
    background: radial-gradient(120% 160% at 0% 0%, #e8f0ff 0%, #f4f7ff 45%, #ffffff 100%);
    border: 1px solid #e4ecff;
}

.jt-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 110, 246, .14), rgba(59, 110, 246, 0) 70%);
    pointer-events: none;
}

.jt-hero h1 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--jt-ink);
}

.jt-hero p {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--jt-ink-2);
    line-height: 1.7;
}

.jt-hero__search {
    position: relative;
    max-width: 520px;
    display: flex;
}

.jt-hero__search input {
    width: 100%;
    height: 48px;
    padding: 0 120px 0 18px;
    border: 1px solid #dbe5ff;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    color: var(--jt-ink);
    outline: none;
    box-shadow: 0 10px 24px -18px rgba(21, 43, 96, .5);
    transition: border-color .2s, box-shadow .2s;
}

.jt-hero__search input:focus {
    border-color: #a9c3ff;
    box-shadow: 0 0 0 4px rgba(59, 110, 246, .1);
}

.jt-hero__search button {
    position: absolute;
    right: 6px;
    top: 6px;
    height: 36px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--jt-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

.jt-hero__search button:hover {
    background: var(--jt-primary-dark);
}

.jt-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--jt-ink-3);
}

.jt-hero__stats b {
    color: var(--jt-ink);
    font-size: 16px;
    font-weight: 700;
    margin-right: 4px;
}

/* 6) 工具卡片 ------------------------------------------------------------- */
.jt-section {
    margin-bottom: 34px;
}

.jt-section__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.jt-section__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--jt-ink);
}

.jt-section__count {
    font-size: 12px;
    color: var(--jt-ink-3);
}

.jt-section__more {
    margin-left: auto;
    font-size: 13px;
    color: var(--jt-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.jt-section__more:hover {
    color: var(--jt-primary);
}

.jt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}

.jt-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    background: var(--jt-surface);
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius-sm);
    box-shadow: var(--jt-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    min-width: 0;
    color: inherit;
}

.jt-card:hover {
    transform: translateY(-3px);
    border-color: #cddcff;
    box-shadow: 0 16px 32px -20px rgba(21, 43, 96, .45);
    color: inherit;
}

.jt-card__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--jt-primary-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--jt-primary);
    font-size: 20px;
}

.jt-card__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.jt-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: block;
}

.jt-card__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--jt-ink);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jt-card__des {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--jt-ink-3);
    word-break: break-word;
}

.jt-card__meta {
    display: block;
    margin-top: 7px;
    font-size: 11.5px;
    color: #a8afbe;
}

/* 面包屑 */
.jt-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--jt-ink-3);
    flex-wrap: wrap;
}

.jt-crumb a {
    color: var(--jt-ink-2);
}

.jt-crumb a:hover {
    color: var(--jt-primary);
}

.jt-crumb__sep {
    color: #c6ccd8;
}

.jt-crumb__current {
    color: var(--jt-ink);
    font-weight: 600;
}

/* 工具页页面标题区（H1 + 一句话说明） */
.jt-page-head {
    margin: 0 0 18px;
}

.jt-page-head__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--jt-ink);
    letter-spacing: -.2px;
}

.jt-page-head__lead {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--jt-ink-3);
}

@media (max-width: 640px) {
    .jt-page-head__title {
        font-size: 19px;
    }

    .jt-page-head__lead {
        font-size: 13px;
    }
}

/* 空状态 */
.jt-empty {
    padding: 64px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dfe5f0;
    border-radius: var(--jt-radius);
    color: var(--jt-ink-3);
    font-size: 14px;
}

.jt-empty i {
    display: block;
    font-size: 34px;
    margin-bottom: 12px;
    color: #c6ccd8;
}

/* 7) 工具页表单 ----------------------------------------------------------- */
/* 工具页内容直接以 form / el-form 作为根节点，这里统一成白色面板 */
.jt-container > form.layui-form,
.jt-container > .el-form {
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    padding: 26px 28px;
    box-shadow: var(--jt-shadow-sm);
    margin-bottom: 0;
}

.jt-container > .el-form .el-form-item:last-child {
    margin-bottom: 0;
}

/* 表单面板下方的区块（说明 / 同类工具）需要留出呼吸空间 */
.jt-container > form.layui-form + .jt-section,
.jt-container > .el-form + .jt-section,
.jt-container > .jt-tool-note + .jt-section {
    margin-top: 46px;
}

/* 工具页底部说明（内容取自 tool_menu.remark，后台可直接编辑） */
.jt-tool-note {
    margin-top: 20px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow-sm);
}

.jt-tool-note__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--jt-ink);
}

.jt-tool-note__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--jt-ink-2);
    white-space: pre-line;
    word-break: break-word;
}

/* 工具页通用小部件 */
.jt-field-hint {
    margin-left: 10px;
    font-size: 12px;
    color: var(--jt-ink-3);
}

.jt-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
}

.jt-result-table {
    margin-top: 4px;
}

.jt-save {
    color: #2fa84f;
    font-weight: 600;
}

/* 上传类工具（图片压缩等） */
.jt-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.jt-upload-grid__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.jt-upload-drag {
    flex: 1;
    padding: 40px 20px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.jt-upload-drag__hint {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--jt-ink-3);
}

.jt-preview {
    position: relative;
    min-height: 240px;
    max-height: 360px;
    padding: 12px;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    background: #fafbfd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jt-preview img {
    display: none;
    max-width: 100%;
    max-height: 330px;
    object-fit: contain;
}

.jt-preview.has-img img {
    display: block;
}

.jt-preview__empty {
    font-size: 13px;
    color: var(--jt-ink-3);
}

.jt-preview.has-img .jt-preview__empty {
    display: none;
}

.jt-download-btn {
    display: block;
    margin-top: 12px;
    text-align: center;
}

/* 行内字段组：输入框 + 一排按钮（文本分隔、AES 等） */
.inline-fields {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.inline-fields__input {
    flex: 0 1 200px;
    width: 200px;
}

.inline-fields__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .inline-fields__input {
        flex: 1 1 100%;
        width: auto;
    }
}

/* MD5 工具 --------------------------------------------------------------- */
.md5-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.md5-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px 20px;
    background: #fbfcfe;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
}

.md5-panel--input {
    padding: 18px;
}

.md5-panel--input .el-textarea {
    flex: 1;
    display: flex;
}

.md5-panel--input .el-textarea__inner {
    height: 100% !important;
    min-height: 260px;
    resize: vertical;
}

.md5-line {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
}

.md5-line__label {
    font-size: 13px;
    color: var(--jt-ink-3);
    white-space: nowrap;
}

.md5-line .el-input__inner {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.md5-line__copy {
    padding: 6px;
}

.md5-actions {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 860px) {
    .md5-grid {
        grid-template-columns: 1fr;
    }

    .md5-line {
        grid-template-columns: 68px minmax(0, 1fr) 34px;
        gap: 8px;
    }
}

/* 单位换算（字节转换等） -------------------------------------------------- */
.unit-hint {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--jt-ink-3);
}

.unit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.unit-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--jt-ink-3);
}

.unit-field__control {
    position: relative;
}

.unit-field__control .layui-input {
    height: 44px;
    padding-right: 62px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.unit-field__suffix {
    position: absolute;
    top: 0;
    right: 16px;
    height: 44px;
    line-height: 44px;
    font-size: 13px;
    color: var(--jt-ink-3);
    pointer-events: none;
}

.unit-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.unit-foot__hint {
    font-size: 12px;
    color: var(--jt-ink-3);
}

@media (max-width: 720px) {
    .unit-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* BMI 工具 ---------------------------------------------------------------- */
.bmi-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 20px;
}

.bmi-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--jt-ink-3);
}

.bmi-field__control {
    position: relative;
}

.bmi-field__control .layui-input {
    height: 44px;
    padding-right: 48px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.bmi-field__unit {
    position: absolute;
    top: 0;
    right: 14px;
    height: 44px;
    line-height: 44px;
    font-size: 13px;
    color: var(--jt-ink-3);
    pointer-events: none;
}

.bmi-field--action {
    display: flex;
    gap: 10px;
}

.bmi-field--action .layui-btn {
    height: 44px;
    line-height: 44px;
}

.bmi-result {
    padding: 22px 24px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow-sm);
}

.bmi-result__main {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.bmi-result__value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--jt-ink);
    font-variant-numeric: tabular-nums;
}

.bmi-result__label {
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jt-ink-3);
    background: #f1f4f9;
}

.bmi-scale__bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7fc4e8 0%, #6ed08a 28%, #f0c860 56%, #f0a25c 78%, #e06a6a 100%);
}

.bmi-scale__marker {
    position: absolute;
    top: -5px;
    left: 0;
    display: none;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: #333;
    transform: translateX(-2px);
    box-shadow: 0 0 0 2px #fff;
    transition: left .25s ease;
}

.bmi-scale__ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--jt-ink-3);
}

.bmi-result__hint {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--jt-ink-2);
    min-height: 22px;
}

.bmi-table td {
    font-size: 13px;
}

.bmi-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.bmi-tag--thin { color: #2f9bd6; background: #e8f4fc; }
.bmi-tag--normal { color: #2fa84f; background: #e9f7ee; }
.bmi-tag--over { color: #c98a00; background: #fdf4e3; }
.bmi-tag--fat { color: #e07a1f; background: #fdf0e6; }
.bmi-tag--veryfat { color: #d64545; background: #fdecec; }

@media (max-width: 720px) {
    .bmi-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bmi-field--action .layui-btn {
        flex: 1;
    }

    .bmi-result__value {
        font-size: 32px;
    }

    .bmi-table th:nth-child(3),
    .bmi-table td:nth-child(3) {
        display: none;
    }

    /* 隐藏第三列后，colgroup 里的固定宽度会把剩下两列挤扁 */
    .bmi-table col {
        width: auto !important;
    }

    .bmi-table th:first-child,
    .bmi-table td:first-child {
        width: 40%;
    }
}

/* 时间戳工具 ------------------------------------------------------------- */
.ts-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow-sm);
}

.ts-now__main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-now__label {
    font-size: 13px;
    color: var(--jt-ink-3);
}

.ts-now__time {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--jt-ink);
    font-variant-numeric: tabular-nums;
}

.ts-now__side {
    display: flex;
    gap: 10px;
}

.ts-now__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 14px;
    border: 1px dashed var(--jt-line);
    border-radius: 10px;
    background: #fbfcfe;
    cursor: pointer;
    transition: border-color .15s ease;
}

.ts-now__item span {
    font-size: 11px;
    color: var(--jt-ink-3);
}

.ts-now__item b {
    font-size: 14px;
    color: var(--jt-ink);
    font-variant-numeric: tabular-nums;
}

.ts-now__item:hover {
    border-color: var(--jt-primary);
}

.ts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ts-col {
    display: flex;
    min-width: 0;
}

.ts-card {
    flex: 1 1 auto;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: var(--jt-radius);
    box-shadow: var(--jt-shadow-sm);
}

.ts-card__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--jt-ink);
}

.ts-card__hint {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--jt-ink-3);
}

.ts-input {
    font-variant-numeric: tabular-nums;
}

.ts-result {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px 12px;
    margin: 0;
    font-size: 13px;
}

.ts-result dt {
    color: var(--jt-ink-3);
}

.ts-result dd {
    margin: 0;
    color: var(--jt-ink);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.ts-result__pick {
    margin-left: -4px;
    padding: 0 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ts-result__pick:hover {
    background: #eef3ff;
    color: var(--jt-primary);
}

.ts-tip {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--jt-ink-3);
}

@media (max-width: 860px) {
    .ts-grid {
        grid-template-columns: 1fr;
    }

    .ts-now__time {
        font-size: 20px;
    }
}

/* 统计类工具的指标表（字数统计等） */
.jt-stat-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--jt-radius);
    overflow: hidden;
}

.jt-stat-table td {
    width: 33.33%;
    padding: 14px 16px;
    border: 1px solid var(--jt-line);
    font-size: 13px;
    line-height: 1.4;
    color: var(--jt-ink-3);
    background: #fbfcfe;
}

.jt-stat-table b {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--jt-ink);
    font-variant-numeric: tabular-nums;
}

.jt-stat-table__hint {
    margin-left: 4px;
    font-size: 11px;
    color: #b9c0cc;
}

/* 密码强度计（工具页局部组件） */
.pwd-meter {
    height: 8px;
    background: #eef1f6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 16px;
}

.pwd-meter__bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .25s ease, background .25s ease;
}

.pwd-result {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.pwd-result__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}

.pwd-result__label {
    color: var(--jt-ink-3);
}

.pwd-result__value {
    font-weight: 600;
    color: var(--jt-ink);
}

.pwd-tip {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #e6a23c;
}

.pwd-tip--muted {
    margin: 0;
    color: var(--jt-ink-3);
}

/* 结果框：视图里统一用 disabled 防止误改，但浏览器会把文字渲染成浅灰、几乎看不清。
   这里把文字颜色拉回正文色，只保留「不可编辑」的语义。 */
.jt-app .el-textarea.is-disabled .el-textarea__inner,
.jt-app .el-input.is-disabled .el-input__inner {
    background-color: #f8fafc;
    color: var(--jt-ink);
    -webkit-text-fill-color: var(--jt-ink);
    cursor: text;
}

.jt-app .el-textarea.is-disabled .el-textarea__inner {
    line-height: 1.7;
}

/* 让工具页里的 el 组件与站点主色一致 */
.jt-app .el-button--primary {
    background-color: var(--jt-primary);
    border-color: var(--jt-primary);
}

.jt-app .el-button--primary:focus,
.jt-app .el-button--primary:hover {
    background-color: #5c88ff;
    border-color: #5c88ff;
}

.jt-app .el-textarea__inner:focus,
.jt-app .el-input__inner:focus {
    border-color: var(--jt-primary);
}

.jt-app .el-breadcrumb {
    font-size: 13px;
    margin-bottom: 18px;
}

/* layui 默认按钮（绿色）统一成站点主色，其它语义色按钮保持原样 */
.jt-app .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled) {
    background-color: var(--jt-primary);
}

.jt-app .layui-btn:not(.layui-btn-primary):not(.layui-btn-normal):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled):hover {
    background-color: var(--jt-primary-dark);
}

/* layui 面板/引用块跟随站点圆角 */
.jt-app .layui-elem-quote {
    border-radius: 10px;
    border-left-width: 4px;
}

/* 8) 页脚 ---------------------------------------------------------------- */
.jt-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--jt-line);
    background: #fff;
    padding: 24px 0;
    color: var(--jt-ink-3);
    font-size: 12.5px;
}

.jt-footer__inner {
    max-width: var(--jt-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

.jt-footer a {
    color: var(--jt-ink-3);
}

.jt-footer a:hover {
    color: var(--jt-primary);
}

.jt-footer__sep {
    color: #dfe4ee;
}

/* 9) 响应式 -------------------------------------------------------------- */
@media (max-width: 900px) {
    .jt-hero {
        padding: 30px 22px;
    }

    .jt-hero h1 {
        font-size: 22px;
    }
}

@media (max-width: 720px) {
    .jt-header__inner {
        height: auto;
        padding: 10px 16px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .jt-brand {
        order: 1;
    }

    .jt-header__user {
        order: 2;
    }


    .jt-search {
        order: 3;
        flex: 1 0 100%;
        max-width: none;
    }

    .jt-nav__inner {
        padding: 0 16px;
        height: 44px;
    }

    .jt-container {
        padding: 0 16px;
    }

    .jt-container > form.layui-form + .jt-section,
    .jt-container > .el-form + .jt-section,
    .jt-container > .jt-tool-note + .jt-section {
        margin-top: 28px;
    }

    .jt-main {
        padding: 16px 0 32px;
    }

    .jt-hero {
        border-radius: 16px;
        padding: 26px 18px;
    }

    .jt-hero__search input {
        height: 44px;
        padding-right: 96px;
    }

    .jt-hero__search button {
        height: 32px;
        padding: 0 16px;
        top: 6px;
    }

    .jt-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }

    .jt-card {
        padding: 12px;
        gap: 10px;
    }

    .jt-card__icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .jt-card__icon img {
        width: 22px;
        height: 22px;
    }

    .jt-container > form.layui-form,
    .jt-container > .el-form {
        padding: 18px 16px;
        border-radius: 14px;
    }
}

/* 10) 遗留样式（旧页面仍在引用，勿删）------------------------------------ */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb;
}

.selector-for-some-widget {
    box-sizing: content-box;
}

.nav-bg-gray {
    background-color: #f7f7f7;
    color: #000;
}

.floattopminpx {
    cursor: pointer;
    border-radius: 15px;
    transition: transform .4s;
    min-height: 100px;
}

.floattopminpx:hover {
    transform: translateY(-5px);
}

.bg-whitr {
    background-color: #fff !important;
}

.layui-container {
    width: auto !important;
}

.layui-card-header label {
    font-size: 18px;
    line-height: 42px;
    height: 42px;
}

.headsplitwidth {
    width: 78px !important;
}

.endsplitwidth {
    width: 45px !important;
}

.groupwidth {
    width: 500px;
}

.index-leftnav {
    top: 0;
    position: fixed;
    overflow: hidden;
    background: #f6f7fa;
    z-index: 50;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 200px;
    height: 100vh;
}

.an-i {
    font-size: 20px;
}

.an-input {
    width: 100%;
}

.an-form-con {
    width: 100%;
}

.an-menu-text {
    font-size: 16px;
}

.layui-fluid {
    padding: 0;
}

.custom-gutter {
    margin-right: -5px;
    margin-left: -5px;
}

.custom-gutter > [class^="col"],
.custom-gutter > [class*=" col"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* layui table 条纹（原本依赖 bootstrap，此处补一个） */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .02);
}

/* 长文页面（关于 / 联系 / 条款 / 隐私） ---------------------------------- */
.jt-doc {
    max-width: 720px;
    padding: 4px 0 12px;
    color: var(--jt-ink-2);
}

.jt-doc h1 {
    margin: 0 0 16px;
    font-size: 26px;
    line-height: 1.4;
    color: var(--jt-ink);
}

.jt-doc__lead {
    margin: 0 0 8px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--jt-ink);
}

.jt-doc h2 {
    margin: 30px 0 10px;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--jt-ink);
}

.jt-doc p {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.95;
}

.jt-doc ul {
    margin: 0 0 12px;
    padding-left: 22px;
    list-style: disc outside;
}

/* layui 的样式表会把列表符号去掉，这里显式补回来 */
.jt-doc ul li {
    list-style: disc outside;
}

.jt-doc li::marker {
    color: var(--jt-ink-3);
}

.jt-doc li {
    margin: 6px 0;
    font-size: 14.5px;
    line-height: 1.9;
}

.jt-doc a {
    color: var(--jt-primary);
}

.jt-doc a:hover {
    text-decoration: underline;
}

/* 联系页的邮箱 */
.jt-doc__mail {
    display: inline-block;
    padding: 10px 16px;
    margin: 2px 0 4px;
    font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f5f8ff;
    border: 1px solid #dbe6ff;
    border-radius: 9px;
    word-break: break-all;
}

/* 需要被看见的提醒 */
.jt-doc__note {
    margin: 22px 0 0;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.85;
    color: #8a5a00;
    background: #fdf7e8;
    border-left: 3px solid #e8b64c;
    border-radius: 0 8px 8px 0;
}

.jt-doc__meta {
    margin: 32px 0 0;
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--jt-ink-3);
    border-top: 1px solid var(--jt-line);
}

@media (max-width: 640px) {
    .jt-doc h1 {
        font-size: 22px;
    }

    .jt-doc__lead {
        font-size: 15px;
    }
}

/* 404 页面 --------------------------------------------------------------- */
.jt-404 {
    max-width: 520px;
    margin: 36px auto 64px;
    text-align: center;
}

.jt-404__code {
    font-size: 92px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
    color: #eaeeF6;
    user-select: none;
}

.jt-404__title {
    margin: -10px 0 10px;
    font-size: 22px;
    line-height: 1.4;
    color: var(--jt-ink);
}

.jt-404__desc {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--jt-ink-2);
}

.jt-404__search {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto 18px;
}

.jt-404__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--jt-ink);
    background: #fff;
    border: 1px solid var(--jt-line);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s ease;
}

.jt-404__search input:focus {
    border-color: var(--jt-primary);
}

.jt-404__search button {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
    color: #fff;
    background: var(--jt-primary);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.jt-404__search button:hover {
    filter: brightness(1.06);
}

.jt-404__home {
    display: inline-block;
    font-size: 13.5px;
    color: var(--jt-primary);
}

.jt-404__home:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .jt-404__code {
        font-size: 68px;
    }

    .jt-404__title {
        font-size: 19px;
    }
}