/* 起源计划 · www.is46.com 全站统一设计系统 */

:root {
  --brand: #2563eb;
  --brand-dk: #1d4ed8;
  --brand-soft: #eff4ff;
  --brand-line: #dbe7ff;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #9ca3af;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --line: #e5e7eb;
  --line-2: #eef2f7;
  --ok: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 6px 24px -8px rgba(16, 24, 40, .12);
  --shadow-dd: 0 12px 32px -8px rgba(16, 24, 40, .18);
  --header-h: 58px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  /* 浏览器默认 body{margin:8px} 的重置原本由 Bootstrap 提供；
     首页与新建工具页不加载 Bootstrap，这里补上，避免顶部多出一圈空白。
     对加载 Bootstrap 的旧页是无变化覆盖（它本身就是 margin:0）。 */
  margin: 0;
  padding: 0;
  font-family: var(--font) !important;
  color: var(--ink);
  background: var(--bg);
}

@media (min-width: 1200px) { .container { max-width: 1200px; } }

/* 1. 顶部导航（全站统一） */
.i46-header {
  position: sticky;
  top: 0;
  /* 必须高于遮罩 1040：header 是 sticky+z-index 的层叠上下文，
     抽屉(.i46-nav)作为其子元素，z-index 再高也只在上下文内生效，
     若 header 低于遮罩，移动端抽屉会被遮罩盖住导致无法点击 */
  z-index: 1060;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.i46-header-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 16px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 6px;
}
.i46-logo { display: flex; align-items: center; flex: none; margin-right: 8px; }
.i46-logo img { height: 36px; width: auto; display: block; }

/* 主导航 */
.i46-nav { flex: 1 1 auto; min-width: 0; }
.i46-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}
.i46-menu > li { position: relative; flex: none; }
.i46-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: var(--font);
  transition: background .15s, color .15s;
}
.i46-link:hover, .i46-link.is-open { background: var(--brand-soft); color: var(--brand) !important; }
.i46-item.is-active > .i46-link { color: var(--brand) !important; font-weight: 600; }
.i46-link .i46-caret {
  width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}
.i46-item.is-open .i46-caret { transform: rotate(225deg) translateY(-1px); }

/* 下拉面板 */
.i46-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-dd);
  padding: 10px;
  display: none;
  z-index: 1100;
}
.i46-item.is-open > .i46-dd { display: block; }
/* hover 桥接：面板与导航项间有 6px 视觉间隙，鼠标穿过时会被判定为离开 li
   而立即关闭，导致永远点不到面板。用一层透明区域把间隙补成连续可悬停区。
   仅限桌面（移动端面板是 static 流式布局，加了会挡住上一个条目的点击）。 */
@media (min-width: 1200px) {
  .i46-item.is-open > .i46-dd::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px; height: 10px;
  }
}
.i46-dd.i46-dd-right { left: auto; right: 0; }
.i46-dd-cols { display: grid; grid-auto-flow: column; gap: 0 6px; }
.i46-dd-cols.c1 { grid-template-rows: repeat(16, auto); grid-auto-flow: row; min-width: 210px; }
.i46-dd-cols.c2 { grid-template-rows: repeat(9, auto); grid-auto-flow: column; min-width: 430px; }
.i46-dd-cols.c2r { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; min-width: 430px; }
.i46-dd-cols.c3 { grid-template-rows: repeat(9, auto); grid-auto-flow: column; min-width: 640px; }
.i46-dd-cols.c3r { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; min-width: 640px; }
.i46-dd a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.45;
  transition: background .12s, color .12s;
}
.i46-dd a:hover { background: var(--brand-soft); color: var(--brand) !important; }
.i46-dd a .ext { font-size: 11px; color: var(--ink-3); margin-left: 2px; }

/* 搜索框（桌面） */
.i46-search { flex: none; margin-left: 8px; }
.i46-search form {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 4px 0 14px;
  height: 36px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.i46-search form:focus-within {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.i46-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13.5px;
  width: 150px;
  color: var(--ink);
  font-family: var(--font);
}
.i46-search input::placeholder { color: var(--ink-3); }
.i46-search button {
  border: 0;
  background: var(--brand);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.i46-search button:hover { background: var(--brand-dk); }
.i46-search svg { width: 14px; height: 14px; display: block; }

/* 移动端抽屉内搜索（仅抽屉模式显示） */
.i46-search-m { display: none; }

/* 汉堡按钮（移动端） */
.i46-burger {
  display: none;
  border: 0;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  padding: 9px;
  flex: none;
}
.i46-burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  margin: 4px 0;
  transition: transform .2s, opacity .2s;
}
.i46-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.i46-burger.is-open span:nth-child(2) { opacity: 0; }
.i46-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 遮罩 */
.i46-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1040;
  opacity: 0;
  transition: opacity .2s;
}
.i46-mask.is-open { display: block; opacity: 1; }

/* 2. 页面头（面包屑 + 标题） */
.i46-pagehead { background: var(--surface); border-bottom: 1px solid var(--line-2); }
.i46-pagehead .container { padding-top: 14px; padding-bottom: 14px; }
.i46-crumb { font-size: 12.5px; color: var(--ink-3); margin: 0 0 6px; line-height: 1.6; }
.i46-crumb a { color: var(--ink-2) !important; text-decoration: none !important; }
.i46-crumb a:hover { color: var(--brand) !important; }
.i46-crumb .sep { margin: 0 7px; color: #cbd5e1; }
/* 面包屑三段现在都是链接（首页 / 栏目 / 当前页） */
.i46-crumb a[aria-current="page"] { color: var(--ink-3) !important; }
.i46-crumb a[aria-current="page"]:hover { color: var(--brand) !important; }
.i46-h1 {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.i46-h1 + .i46-sub { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

/* 工具页内容区：白色卡片面板 */
.i46-main {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 24px;
  margin-top: 16px;
  margin-bottom: 30px;
}

/* 3. 分类页签（兼容 Bootstrap3/4 两种标记） */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0 !important;
  margin-bottom: 14px;
}
.nav-tabs > li, .nav-tabs .nav-item { margin: 0 !important; float: none !important; }
.nav-tabs > li > a, .nav-tabs .nav-item .nav-link {
  display: block;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #eef1f6;
  color: var(--ink-2) !important;
  font-size: 13px;
  line-height: 1.6 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  margin: 0 !important;
}
.nav-tabs > li > a:hover, .nav-tabs .nav-item .nav-link:hover { background: #e2e8f0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus,
.nav-tabs .nav-item .nav-link.active {
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, .5);
}
/* 选中页签为当前工具的“轻提示”变体 */
.nav-tabs > li.active > a::after, .nav-tabs .nav-item .nav-link.active::after { content: none; }

/* 旧工具页签条（加密/颜色/元素等特殊家族 p.ClassHead-wrap > a 结构）：
   胶囊化 + 窄屏自动换行，替代旧版定宽横排 */
p.ClassHead-wrap, p.ClassHead-wrap02 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 10px 0 !important;
  margin: 0 0 12px !important;
  background: none !important;
  border: 0 !important;
}
p.ClassHead-wrap > a, p.ClassHead-wrap02 > a {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  height: auto !important;          /* 压掉旧版写死的 33px */
  margin: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #eef1f6 !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
p.ClassHead-wrap > a:hover, p.ClassHead-wrap02 > a:hover { background: #e2e8f0 !important; }
p.ClassHead-wrap > a.CHeadcur, p.ClassHead-wrap02 > a.CHeadcur,
p.ClassHead-wrap > a.active, p.ClassHead-wrap02 > a.active {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, .5);
}

/* 4. 表单 / 按钮 / 输出区 */
.form-control {
  border-radius: var(--radius-sm) !important;
  border-color: #d8dee8 !important;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}
textarea.form-control { line-height: 1.6; }
select.form-control { height: auto; }
.input-group-text { border-radius: var(--radius-sm); }

.btn {
  border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.btn, .btn:hover, .btn:focus { text-decoration: none !important; }

/* 主操作 = 品牌蓝 */
.btn-success, .btn-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, .45);
}
.btn-success:hover, .btn-primary:hover, .btn-success:focus, .btn-primary:focus {
  background: var(--brand-dk) !important;
  border-color: var(--brand-dk) !important;
  color: #fff !important;
}
/* 清除/危险 = 白底红字（弱化） */
.btn-danger {
  background: #fff !important;
  border: 1px solid #fecaca !important;
  color: var(--danger) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: var(--danger) !important;
}
/* 普通按钮 */
.btn-default, .btn-secondary, .btn-light {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: var(--ink) !important;
}
.btn-info { background: #0ea5e9 !important; border-color: #0ea5e9 !important; color: #fff !important; }
.btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color: #fff !important; }
.btn-xs, .btn-sm { padding: 5px 12px !important; font-size: 12.5px !important; }
.btn-lg { padding: 10px 22px !important; font-size: 15px !important; }

/* 复选框/单选框颜色 */
.form-check-input:checked, input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* 输出区 (pre / 结果框) */
pre {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  overflow: auto;
}
pre code { background: none; color: inherit; padding: 0; }
code {
  font-family: var(--mono);
  background: #f1f5f9;
  color: #be185d;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 92%;
}
kbd { background: #1e293b; border-radius: 5px; }

/* 5. 提示条 / 说明区 */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid transparent;
  font-size: 13.5px;
  padding: 11px 15px !important;
}
.alert-note, .alert-info {
  background: var(--brand-soft) !important;
  border-color: var(--brand-line) !important;
  color: #1e40af !important;
}
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
.alert-success { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert .close { color: inherit; opacity: .5; }
.alert .close:hover { opacity: .9; }
.alert-dismissible .close { top: 0; }

/* “功能说明” 分隔线标题 */
.text-with-hr:before { border-bottom-color: var(--line) !important; }
.text-with-hr span { font-weight: 600; color: var(--ink) !important; font-size: 14px; }

/* 6. 表格（对照表类页面） */
.table {
  font-size: 13.5px;
  color: var(--ink);
  border-color: var(--line) !important;
  background: var(--surface);
}
.table > thead > tr > th, .table th {
  background: #f8fafc !important;
  border-color: var(--line) !important;
  font-weight: 600;
  color: #334155;
  padding: 10px 12px;
  white-space: nowrap;
}
.table > tbody > tr > td, .table td {
  border-color: var(--line-2) !important;
  padding: 9px 12px;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfd; }
.table-hover > tbody > tr:hover { background: #f4f7fb !important; }

/* 7. 首页 */
.i46-hero {
  background: linear-gradient(180deg, #e8f0fe 0%, #f5f8ff 60%, var(--bg) 100%);
  border-bottom: 1px solid var(--line-2);
  padding: 42px 16px 34px;
  text-align: center;
}
.i46-hero h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 10px;
  color: #0f172a;
}
.i46-hero h1 .i46-hero-brand { color: var(--brand); }
.i46-hero p.i46-hero-sub { font-size: 14.5px; color: var(--ink-2); margin: 0 0 22px; }
.i46-hero-search { max-width: 560px; margin: 0 auto; position: relative; }
.i46-hero-search form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px 6px 6px 16px;
}
.i46-hero-search input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 15px;
  height: 40px;
  background: transparent;
  font-family: var(--font);
  color: var(--ink);
}
.i46-hero-search button {
  border: 0;
  background: var(--brand);
  color: #fff;
  height: 40px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
}
.i46-hero-search button:hover { background: var(--brand-dk); }
.i46-hero-tags { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.i46-hero-tags a { color: var(--ink-2) !important; margin: 0 9px; text-decoration: none !important; }
.i46-hero-tags a:hover { color: var(--brand) !important; }

.i46-home { max-width: 1200px; margin: 0 auto; padding: 26px 16px 10px; }

.i46-cat { margin-bottom: 30px; }
.i46-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.i46-cat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.i46-cat-icon svg { width: 18px; height: 18px; }
.i46-cat-head h2 { font-size: 17px; font-weight: 700; margin: 0; color: var(--ink); }
.i46-cat-head .i46-cat-count { font-size: 12px; color: var(--ink-3); margin-left: 2px; }

.i46-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 11px;
}
.i46-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.i46-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-line);
  box-shadow: var(--shadow-md);
}
.i46-card b {
  display: block;
  font-size: 13.8px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.5;
}
.i46-card span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.6;
  min-height: 19px;
}
.i46-card:hover b { color: var(--brand); }
.i46-card .ext-badge {
  display: inline-block;
  font-size: 10.5px;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 5px;
  padding: 0 5px;
  line-height: 17px;
  margin-left: 6px;
  vertical-align: 1px;
  font-weight: 400;
}

.i46-empty {
  display: none;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  padding: 60px 0;
}
.i46-empty.is-show { display: block; }

/* 8. 页脚（全站统一） */
.i46-footer {
  margin-top: 40px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.i46-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 16px 18px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 26px;
}
.i46-footer h4 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.i46-footer .i46-f-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.i46-footer .i46-f-brand img { height: 30px; width: auto; }
.i46-footer p { margin: 0; line-height: 1.8; color: var(--ink-3); font-size: 12.5px; }
.i46-footer ul { list-style: none; margin: 0; padding: 0; }
.i46-footer ul li { line-height: 2; }
.i46-footer a { color: var(--ink-2) !important; text-decoration: none !important; }
.i46-footer a:hover { color: var(--brand) !important; }
.i46-footer-bottom {
  border-top: 1px solid var(--line-2);
  text-align: center;
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  background: #fbfcfe;
}
.i46-footer-bottom a { color: var(--ink-3) !important; }

/* 回顶按钮 */
.gotop { background: var(--brand) !important; }
.gotop .arrow.lit, .gotop:hover .arrow.lit { border-color: transparent transparent var(--brand) !important; }
.gotop .arrow { border-color: transparent transparent #fff; }

/* 9. 响应式 */
@media (max-width: 1199.98px) {
  .i46-menu { display: none; }
  .i46-search { display: none; }
  .i46-burger { display: block; margin-left: auto; }

  /* 抽屉式导航 */
  .i46-nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--surface);
    z-index: 1050;
    overflow-y: auto;
    padding: 14px;
    box-shadow: -12px 0 32px -8px rgba(16, 24, 40, .2);
    -webkit-overflow-scrolling: touch;
  }
  .i46-nav.is-open { display: block; }
  .i46-nav .i46-search-m { display: block; margin: 4px 0 10px; }
  .i46-nav .i46-search-m form {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0 4px 0 14px;
    height: 38px;
  }
  .i46-nav .i46-search-m input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 14px; height: 36px; font-family: var(--font);
  }
  .i46-nav .i46-search-m button {
    border: 0; background: var(--brand); color: #fff; width: 30px; height: 30px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  }
  .i46-nav .i46-search-m svg { width: 14px; height: 14px; }
  .i46-menu { display: block; }
  .i46-menu > li { border-bottom: 1px solid var(--line-2); }
  .i46-link { display: flex; width: 100%; justify-content: space-between; padding: 13px 6px; font-size: 14.5px; border-radius: 0; }
  .i46-link:hover, .i46-link.is-open { background: none; }
  .i46-item.is-open > .i46-link { color: var(--brand) !important; }
  .i46-dd {
    position: static;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 10px 10px;
    display: none;
  }
  .i46-item.is-open > .i46-dd { display: block; }
  .i46-dd-cols, .i46-dd-cols.c1, .i46-dd-cols.c2, .i46-dd-cols.c2r,
  .i46-dd-cols.c3, .i46-dd-cols.c3r {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    min-width: 0 !important;
  }
  .i46-dd a { padding: 9px 10px; font-size: 13.5px; }
}

@media (max-width: 767.98px) {
  .i46-main { padding: 14px 12px 18px; border-radius: 10px; margin-top: 10px; margin-bottom: 20px; }
  .i46-hero { padding: 30px 14px 24px; }
  .i46-hero h1 { font-size: 22px; }
  .i46-hero p.i46-hero-sub { font-size: 13px; margin-bottom: 16px; }
  .i46-hero-search button { padding: 0 16px; }
  .i46-cards { grid-template-columns: 1fr 1fr; gap: 9px; }
  .i46-card { padding: 11px 12px; }
  .i46-card b { font-size: 13px; }
  .i46-card span { font-size: 11.5px; }
  .i46-footer-inner { grid-template-columns: 1fr; gap: 18px; padding-bottom: 8px; }
  .i46-h1 { font-size: 18px; }
  .container { padding-left: 12px; padding-right: 12px; }

  /* 工具页签横向滑动 */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs > li, .nav-tabs .nav-item { flex: none; }
}

@media (max-width: 420px) {
  .i46-cards { grid-template-columns: 1fr; }
}

/* 屏宽 <992 时主页搜索仍在 hero 中，导航抽屉里另有搜索 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .i46-logo img { height: 32px; }
}

/* 打印隐藏导航与页脚 */
@media print {
  .i46-header, .i46-footer, .i46-pagehead, .gotop { display: none !important; }
}

/* 10.5 旧固定宽家族窄屏：内容块内横向滚动 */
@media (max-width: 1199.98px) {
  /* 覆盖 bootstrap 的 body{min-width:992px!important}：本文件最后加载，同权重 !important 按文档序生效 */
  body { min-width: 0 !important; overflow-x: hidden; }
  .pularge, .pusmall { min-width: 0 !important; }
  .w1200, .wrapper, .Tool-MainWrap, #__root__ {
    width: auto !important;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .w1200 > *, .wrapper > * { min-width: 1160px; }
  .wrapper.wwlr > * { min-width: 960px; }
}

/* 10. 桌面头部档位微调（置于文件末尾以覆盖基础规则） */
/* 紧凑档位：1200–1399px 视口，压缩导航尺寸防止换行 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .i46-logo img { height: 32px; }
  .i46-logo { margin-right: 4px; }
  .i46-link { font-size: 12.5px; padding: 7px 5px; gap: 3px; }
  .i46-link .i46-caret { width: 6px; height: 6px; }
  .i46-menu { gap: 0; }
  .i46-search { margin-left: 6px; }
  .i46-search input { width: 120px; }
  .i46-search form { padding: 0 4px 0 10px; }
}
/* 窄桌面：1200–1279px 隐藏头部搜索（长度不足以放置），可用抽屉/首页搜索 */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .i46-search { display: none; }
}

/* 11. .container 被写死 1160px 的家族在窄屏的兜底 */
@media (max-width: 1199.98px) {
  /* 新框架层（页头/页脚内的容器）必须跟随视口宽度 */
  .i46-header .container,
  .i46-pagehead .container,
  .i46-footer .container {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 新版内容卡片：任何家族都必须跟随视口宽度（它是 .i46-main 自己的类，
     但部分家族把 .container 写死 1160px 会连带撑破它）；内容过宽时卡内横滚 */
  .i46-main {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 旧正文容器（未被模板化为卡片的家族）：自身满宽，内容过宽时卡内横滚。
     注意：不要给子元素加 min-width —— math/text 等内容本是自适应的，
     强行 1160px 反而把它们撑出屏幕；真正定宽的内容（qita 表格）自带宽度。 */
  body > .container:not(.i46-main) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 12. 原生页（只加载本文件）的 .container 居中 */
body.i46-native .container {
  width: 100%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}
body.i46-native .i46-pagehead .container { padding-left: 15px; padding-right: 15px; }

/* 13. 合并卡片（页签与工具同处一卡后的内层容器） */
.i46-merged > .container {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.i46-merged > .container + .container { margin-top: 4px; }

/* 工具区节奏：旧模板给 textarea 设了 margin-bottom:-10px，
   会把按钮行拉到输入框的下边框上，造成「框-按钮-框」零间距。 */
.i46-main textarea,
.i46-merged textarea { margin-bottom: 0 !important; }
.i46-main .input-group,
.i46-merged .input-group { margin: 14px 0 !important; }
.i46-main .input-group:first-of-type { margin-top: 12px !important; }
.i46-main h2 + .tab-pane,
.i46-merged h2 + .tab-pane { margin-top: 10px; }

/* 14. 全站统一内容列宽 1200px */
@media (min-width: 1200px) {
  .i46-home,
  .i46-main,
  .i46-pagehead .container,
  .i46-footer .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 15. 页签横滑轨道：.nav-tabs::before 宽度归零 */
.nav-tabs::before,
.custom-tab::before,
.tab-after::before { width: 0 !important; }

/* 17. jiami 两栏 / 三栏工具布局在窄屏改竖排 */
@media (max-width: 1199.98px) {
  /* 先解除 10.5 给直接子元素加的 1160px 最小宽度 */
  .wrapper > *,
  .Tool-MainWrap > *,
  #__root__ > *,
  .w1200 > * { min-width: 0 !important; }

  /* 这些页面自带 `#__root__ * { box-sizing: content-box !important }`，
     ID 选择器权重高于单类，必须同样带 #__root__ 前缀才能压住它，
     否则 width:100% 再叠加 padding 会超出视口（被 body 的 overflow-x 裁掉）。 */
  #__root__ .wwlr,
  #__root__ .CodingWrap,
  #__root__ .CodChangeWrap,
  #__root__ .GuoLvWrap,
  #__root__ .GuoLvWrapCenter,
  #__root__ .GuoLvCbtn,
  #__root__ .JsTxtW-r,
  #__root__ .CodChangLeft,
  #__root__ .CodChangCent,
  #__root__ .CodChangRight {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  #__root__ .wwlr > form,
  #__root__ .wwlr form > .clearfix,
  #__root__ .CodingWrap > form,
  #__root__ .GuoLvWrap > form { width: 100% !important; box-sizing: border-box !important; }

  #__root__ .JsTxtW-r,
  #__root__ .CodChangLeft,
  #__root__ .CodChangCent,
  #__root__ .CodChangRight { margin-bottom: 14px; }

  #__root__ .JsTxtW-r .JsTxtCo,
  #__root__ .wwlr textarea.wwlr-l,
  #__root__ .wwlr textarea.wwlr-r,
  #__root__ textarea.CodchaLtxt,
  #__root__ textarea.CodchaRtxt,
  #__root__ textarea.GuoLvWrapAgo,
  #__root__ textarea.GuoLvWrapAfter {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #__root__ .GuoLvWrapCenter,
  #__root__ .GuoLvCbtn { white-space: normal; }
  #__root__ .GuoLvCbtn input { margin: 0 8px 8px 0; }
}

/* 16. body 直接子元素被写死 1200px 的旧模板页 */
@media (max-width: 1199.98px) {
  .ToolHead,
  .public_main,
  #main_content,
  .ClassHead-wrap,
  .ColorCentWrap,
  .SafeCorCent-down,
  #all_colors,
  .nry_bt,
  .clear,
  .wrapper02,
  .ToolsWrapIM,
  .Tsfuhao-Wrap,
  .TsCorBan-Wrap {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* 这些块内部确实有宽表格/色板，保留块内横向滚动而不是撑破文档 */
  .ColorCentWrap,
  .SafeCorCent-down,
  #all_colors,
  #main_content,
  .wrapper02,
  .Tsfuhao-Wrap,
  .TsCorBan-Wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 18. 输入类控件的移动端左右留白 */
@media (max-width: 1199.98px) {
  /* a) 覆盖旧 CSS 的 1160px !important */
  .i46-main > .container,
  .i46-merged > .container,
  .i46-main .container,
  #__root__ .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* b) 抵消 Bootstrap .row 的负外边距（.row 也可能挂在 body 下的裸 div 里，
        如 /json/jiexi.html 的 diff 视图，所以这里不限定父级） */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* c) 给无内边距的旧容器补上统一留白（.wwlr 已有 20px，不重复加） */
  #__root__ .CodingWrap,
  #__root__ .GuoLvWrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 输入控件一律跟随视口 */
  textarea,
  input[type=text],
  input[type=number],
  input[type=file],
  input:not([type]),
  select {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .i46-main textarea,
  #__root__ textarea,
  .wrapper textarea,
  .Tool-MainWrap textarea,
  textarea.form-control {
    width: 100% !important;
  }
}

/* 19. 色彩搭配分类（/color/）移动端适配 */
@media (max-width: 1199.98px) {
  .ColorCentWrap > *,
  .Tsfuhao-Wrap > *,
  .TsCorBan-Wrap > *,
  .CTCor-centtainer > * {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .ColorCentWrap,
  .CTCor-centtainer {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* 色板行放开固定宽度，让 float 色块回绕 */
  .CorContent .CorConList { width: 100% !important; }
  .CorContent .boxc,
  .CorContent .boxr { margin-right: 4px !important; }

  /* 传图识色页内联的 1180px 固定宽容器 */
  #__root__ .ff,
  #__root__ .se,
  #__root__ .se_two,
  .wrapper .ff,
  .wrapper .se,
  .wrapper .se_two {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 20. 复制成功/失败的全站提示条（配合 is46-ui.js） */
#i46-toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 14px);
  z-index: 3000;
  max-width: 82vw;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(23, 32, 51, .92);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#i46-toast.i46-toast-on { opacity: 1; transform: translate(-50%, 0); }

/* 21. /color/3.html 色板容器与内容列等宽 */
@media (min-width: 1200px) {
  .CTCor-centtainer {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 22. 色彩页色板：响应式网格 */
#chinacolor,
#japancolor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  width: 100%;
}
/* display:contents 让各色系列的 li 直接参与上面的网格（同时取消 float:right） */
#chinacolor > ul,
#japancolor > ul {
  display: contents;
}
#chinacolor li,
#japancolor li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 58px;
  padding: 7px 9px !important;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
#chinacolor li:hover,
#japancolor li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .16), 0 6px 16px rgba(17, 24, 39, .16);
}
#chinacolor li:active,
#japancolor li:active { transform: translateY(0); }
#chinacolor li a,
#japancolor li a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
#chinacolor li a:hover,
#japancolor li a:hover { text-decoration: none; }
#chinacolor li a span,
#japancolor li a span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .01em;
  opacity: .88;
}

/* 2.html 网页常用色彩：同样换成自适应网格（保留每个色系分节的 h3/说明） */
.CorContent .CorConList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  width: 100% !important;
  clear: both;
}
.CorContent .boxc,
.CorContent .boxr {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 58px;
  padding: 7px 9px !important;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.CorContent .boxc:hover,
.CorContent .boxr:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .16), 0 6px 16px rgba(17, 24, 39, .16);
}
.CorContent .boxc span,
.CorContent .boxr span {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: .01em;
  opacity: .9;
}

/* 「中国传统色彩 / 日本传统色彩」切换：居中胶囊页签 */
.CorTongHead {
  text-align: center;
  padding: 6px 0 12px;
  border-bottom: 1px solid #e6eaf2;
}
.CorTongHead a {
  display: inline-block;
  margin: 4px 6px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #f1f4fa;
  color: #33415c;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.CorTongHead a:hover { opacity: 1; background: #e3e9f6; }
.CorTongHead a.CorCurrt {
  background: var(--brand, #2563eb);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
/* 2.html 的分节标题与说明条：统一到新版配色 */
.CorContent h3 { padding: 14px 0 4px; color: #1f2430; font-size: 16px; line-height: 1.6; }
.CorContent .blockQuote {
  padding: 8px 12px;
  margin: 0 0 10px;
  border-left: 3px solid var(--brand, #2563eb);
  border-radius: 0 8px 8px 0;
  background: #f5f8ff;
  color: #4a5568;
  line-height: 1.7;
}

/* clearfix 的 ::before/::after 在 grid 里会变成真实网格项，必须取消 */
.CorContent .CorConList::before,
.CorContent .CorConList::after {
  content: none !important;
  display: none !important;
}
/* 2.html 色块只有一行色值，卡片更矮、间隙更紧（1110 块才不会把页面拉太长） */
.CorContent .CorConList { gap: 6px; }
.CorContent .boxc,
.CorContent .boxr { min-height: 48px; padding: 6px 8px !important; }

/* 23. 色彩页移动端的排布与字号 */
#chinacolor li a span,
#japancolor li a span,
.CorContent .boxc span,
.CorContent .boxr span { font-size: 12px; }

/* 5.html WEB安全色：色块卡片网格 */
/* 旧左内缩靠负边距抵消；负边距归零后这里同步去掉，色板才能与内容列对齐 */
.ColorCentWrap { padding-left: 0; overflow: visible; }
.ColorCentWrap h2 { width: auto; text-align: left; }

.ColorCentWrap .row.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;

  margin-left: 0;
  margin-right: 0;
}
.ColorCentWrap .row.swatches h2 {
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6eaf2;
  font-size: 18px;
  font-weight: 600;
  color: #1f2430;
}
.ColorCentWrap .color.col {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding-bottom: 7px;
  overflow: hidden;
  background: #fff;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08);
}
.ColorCentWrap .color.col .swatch {
  display: block;
  width: 100% !important;
  height: 34px !important;
  border: 0;
  border-radius: 0;
}
.ColorCentWrap .color.col h3 {
  margin: 6px 8px 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: #1f2430;
}
.ColorCentWrap .color.col h3 .html b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
}
.ColorCentWrap .color.col h3 .html b.fr { display: none; }
/* RGB 三分量：一行三列 space-between，不插分隔符 */
/* RGB 三分量：三列 space-between，宽度足够且天然对齐 */
.ColorCentWrap .color.col h3 .rgb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.3;
  color: #6b7688;
  white-space: nowrap;
}
.ColorCentWrap .color.col h3 .rgb b { display: none; }
.ColorCentWrap .color.col h3 .rgb span {
  flex: 0 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* 定宽与 float 交给网格排布，这里一律放开 */
.ColorCentWrap .color.col { padding: 0 !important; text-align: center; }
.ColorCentWrap .color.col h3 {
  height: auto;
  margin: 0;
  padding: 6px 8px 7px;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 1.4;
}
.ColorCentWrap .color.col h3 .html,
.ColorCentWrap .color.col h3 .rgb { display: block; height: auto; line-height: 1.4; }
.ColorCentWrap .color.col h3 .html b {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  padding: 0;
  text-align: center;
  font-weight: 600;
}
.ColorCentWrap .color.col h3 .rgb { display: flex; }
.ColorCentWrap .color.col h3 .rgb span { float: none; padding: 0; }

/* 5.html 分组页签：与 .CorTongHead 一致的居中胶囊 */
.SafeCorCent-down { text-align: center; padding: 4px 0 12px; }
.SafeCorCent-down li {
  display: inline-block;
  float: none !important;
  width: auto !important;
  margin: 4px 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none;
  list-style: none;
}
.SafeCorCent-down li a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f1f4fa;
  color: #33415c;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.SafeCorCent-down li a:hover { background: #e3e9f6; text-decoration: none; }
.SafeCorCent-down li a.CorCurrt,
.SafeCorCent-down li a.i46-on {
  background: var(--brand, #2563eb);
  color: #fff;
}

/* 贴屏幕边的输入控件补内缩（仅窄屏） */
@media (max-width: 767.98px) {
  .wrapper .ff,
  .wrapper .se,
  .wrapper .se_two { padding-left: 12px !important; padding-right: 12px !important; }
  table.ColorHead td { padding-left: 12px; padding-right: 12px; }
}
/* 窄屏色板自己留左右 12px 呼吸位 */
@media (max-width: 1199.98px) {
  .ColorCentWrap { padding-left: 12px; padding-right: 12px; }
}

/* 24. 移动端控件尺寸基线（触控热区 / 最小宽度） */
#i46Burger { min-width: 44px; min-height: 44px; }

@media (max-width: 767.98px) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 6px 0 0;
    vertical-align: -4px;
    accent-color: var(--brand, #2563eb);
    flex: none;
  }
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input:not([type]),
  input[type="file"] { min-height: 38px; }
  /* #ss_fh_value 页内有 all:initial，必须显式恢复 inline-block，否则 width/min-height 失效 */
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input:not([type]) { display: inline-block; }
  #ss_fh_value { display: inline-block !important; min-height: 34px; }
  /* 只抬高度：段 18 的 min-width:0 !important 会压掉任何 min-width，强推宽度会撑破窄容器 */
  input[type="file"] { box-sizing: border-box; }
  input[type="button"],
  input[type="submit"],
  button,
  .btn { min-height: 44px; }
  select { min-height: 40px; }
  /* 触控放大后避免控件把容器顶宽：一律不允许超过父级 */
  input, select, textarea, button { max-width: 100%; }
}

/* 25. Bootstrap .input-group 窄屏改 flex 换行 */
@media (max-width: 767.98px) {
  /* Bootstrap 3 的 .input-group 是 display:table 不会换行，必须改成可换行的 flex */
  .input-group {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
  }
  .input-group > .form-control {
    display: block;
    flex: 1 1 92px;
    width: auto;
    min-width: 76px;
    margin: 4px 4px 4px 0;
  }
  .input-group > .input-group-addon,
  .input-group > .input-group-btn,
  .input-group > .input-group-prepend,
  .input-group > .input-group-append {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 4px 0 4px 4px;
  }
  .input-group > .input-group-btn { margin-left: auto; }
}

/* 26. /jisuan/calculator.html 窄屏纵向堆叠 */
@media (max-width: 991.98px) {
  .CalculatorWrap .CalculTable {
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
  }
  .CalculatorWrap .CalculTable .heachackWrap { height: auto !important; }
  .CalculatorWrap .CalculTable .heachackWrap li {
    float: none !important;
    height: auto;
    margin: 0 14px 8px 0;
  }
  .CalculatorWrap .CentChackBox { height: auto; overflow: hidden; }
  .CalculatorWrap .CentChackLeft,
  .CalculatorWrap .CentChackSide,
  .CalculatorWrap .CentChackRight {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }
  .CalculatorWrap .CentChackBox li { overflow: hidden; }
  .CalculatorWrap .heachackWrap li input.HTxt01 { height: 34px !important; line-height: 34px !important; }
  .CalculatorWrap .CentChackLeft li input,
  .CalculatorWrap .CentChackRight li input,
  .CalculatorWrap .CentChackSide input {
    width: auto !important;
    min-width: 52px;
    padding: 0 10px;
  }
}

/* 27. /jisuan/subnetmask.html 输入行布局 */
@media (max-width: 767.98px) {
  /* 不浮动、吃满宽度，每行用弹性换行 */
  .NetWorkWrap .NetWork-left,
  .NetWorkWrap .NetWork-right { float: none !important; width: 100% !important; }
  .NetWork-main01 .MCentlist {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
  }
  .NetWork-main01 .MCentlist label,
  .NetWork-main01 .MCentlist input { float: none !important; }
  .NetWork-main01 .MCentlist label { width: auto !important; min-width: 52px; text-align: right; }
  .NetWork-main01 .Intxt { min-height: 36px; width: 56px !important; margin-left: 0 !important; padding: 4px 6px; }
  .NetWork-main01 .Inbtn { min-height: 36px; width: auto !important; padding: 0 16px; margin-left: 0 !important; }
}

/* 28. /useragent/bootstrapicon.html 图标列表字号与列宽 */
@media (max-width: 767.98px) {
  .bs-glyphicons li {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: 31%;
    height: auto;
    min-height: 96px;
    font-size: 12px;
    text-align: center;
  }
  .bs-glyphicons .glyphicon-class {
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    word-break: break-all;
  }
}

/* 29. /json/jiexi.html 双 diff 面板 */
/* 双栏对比视图贴边是刻意形态，窄屏不额外干预 */

/* 30. /wenben/unix_time.html 的实时时间戳 */
.i46-live-ts {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f5f8ff;
  border-left: 3px solid var(--brand, #2563eb);
  color: #4a5568;
  font-size: 13.5px;
}
.i46-live-ts #currentunixtime {
  color: #d0342c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* 31. 无依赖下拉菜单的显示规则（配合 is46-ui.js） */
.dropdown { position: relative; }
.dropdown .dropdown-menu { display: none; }
.dropdown.i46-dd-open > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.dropdown.show > .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  min-width: 200px;
  max-width: 82vw;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(23, 32, 51, .14);
}
.dropdown .dropdown-menu.dropdown-menu-right { left: auto; right: 0; }
.dropdown.i46-dd-open > .dropdown-menu > li > a {
  display: block;
  padding: 8px 14px;
  color: #33415c;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: normal;
  text-decoration: none;
}
.dropdown.i46-dd-open > .dropdown-menu > li > a:hover { background: #f1f5fd; color: var(--brand, #2563eb); }

/* 32. 时间来源提示条（共享组件） */
.i46-tsbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 14px;
  max-width: 720px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #e8ecf4;
  background: #f7f9fd;
  font-size: 13px;
  color: #475569;
}
.i46-tsbar .i46-tsbar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1; flex: 0 0 auto;
}
.i46-tsbar .i46-tsbar-dot.is-ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.i46-tsbar .i46-tsbar-dot.is-bad { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.i46-tsbar .i46-tsbar-btn {
  margin-left: auto;
  border: 1px solid #dbe3f0; background: #fff; color: #33415c;
  border-radius: 8px; padding: 5px 13px; font-size: 13px; cursor: pointer; min-height: 32px;
}
.i46-tsbar .i46-tsbar-btn:hover { border-color: var(--brand, #2563eb); color: var(--brand, #2563eb); }

/* 33. layer 弹窗图标补位 */
.layui-layer-ico {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-image: none !important;
}
.layui-layer-ico1 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%2316a34a'/%3E%3Cpath d='M8.6 15.4l4.2 4.2L21.6 10' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.layui-layer-ico2 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%23dc2626'/%3E%3Cpath d='M10.4 10.4l9.2 9.2M19.6 10.4l-9.2 9.2' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.layui-layer-ico4 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%232563eb'/%3E%3Cpath d='M11.6 12.2a3.5 3.5 0 1 1 5.6 2.8c-1.3 1-2.2 1.6-2.2 3.1' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='22.6' r='1.6' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.layui-layer-ico5 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2.6 28.4 26H1.6z' fill='%23f59e0b'/%3E%3Cpath d='M15 10.6v7.2' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='21.6' r='1.6' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.layui-layer-ico6 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='%232563eb'/%3E%3Cpath d='M15 13.4v7.6' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='9.6' r='1.7' fill='%23fff'/%3E%3C/svg%3E") !important;
}
/* ico3 = loading：用 CSS 转圈，不依赖图片 */
.layui-layer-ico3 {
  width: 26px !important; height: 26px !important;
  top: 18px !important; left: 17px !important;
  border: 3px solid #dbe3f0 !important;
  border-top-color: var(--brand, #2563eb) !important;
  border-radius: 50% !important;
  background-image: none !important;
  animation: i46-spin .8s linear infinite !important;
}
@keyframes i46-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .layui-layer-ico3 { animation-duration: 2.4s; }
}

/* 34. 工具页底部「说明 + 示例结果」区块（.i46-doc） */
.i46-doc {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.i46-doc > * { box-sizing: border-box; }
.i46-doc-title {
  margin: 0 0 10px;
  padding-left: 11px;
  border-left: 3px solid var(--brand, #2563eb);
  font-size: 16px; font-weight: 600; color: #111827; line-height: 1.4;
}
.i46-doc p { margin: 0 0 10px; font-size: 14px; line-height: 1.78; color: #475569; }
.i46-doc p:last-child { margin-bottom: 0; }
.i46-doc code {
  padding: 1px 6px; border-radius: 5px;
  background: #f1f5f9; color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.i46-doc .i46-doc-src {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  background: #f8fafc; border: 1px dashed #dbe3f0; border-radius: 10px;
  font-size: 14px; color: #475569;
}
.i46-doc .i46-doc-src b { color: #0f172a; font-weight: 600; word-break: break-all; }
.i46-doc .i46-doc-src-meta { color: #94a3b8; font-size: 12.5px; }
.i46-doc table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.i46-doc caption {
  caption-side: top; text-align: left;
  font-size: 13px; color: #64748b; padding: 0 0 8px;
}
.i46-doc th, .i46-doc td {
  padding: 9px 10px; text-align: left; vertical-align: top;
  border-top: 1px solid #eef2f7; font-size: 13.5px;
}
.i46-doc thead th {
  border-top: 0; padding-bottom: 8px;
  font-size: 12.5px; font-weight: 600; color: #64748b;
  letter-spacing: .02em;
}
.i46-doc td.i46-doc-k { width: 172px; color: #0f172a; font-weight: 600; }
.i46-doc td.i46-doc-k small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: #94a3b8; }
.i46-doc .i46-doc-v {
  display: block; width: 100%; text-align: left;
  -webkit-user-select: text; user-select: text; cursor: pointer;
  margin: 0; padding: 7px 9px;
  border: 1px solid #e6ebf5; border-radius: 8px; background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; color: #1f2937;
  word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap;
  cursor: pointer;
  /* 文本/压缩/JSON 三栏目的示例经常是整段代码（C# 实体类、JavaBean、竖排结果、打包串），
     不封顶会把一行的说明卡撑成几屏高；超过 320px 就内部滚动，复制与拖选仍可用。 */
  max-height: 320px; overflow: auto;
}
.i46-doc .i46-doc-v:hover { border-color: var(--brand, #2563eb); background: #f5f8ff; }
/* 被 max-height 裁掉的示例值（整段代码那种）补一条提示，
   否则滚动区没有视觉线索，用户会以为内容被截断了。由 is46-ui.js 的
   「说明卡长值提示」模块加类名与提示行。 */
.i46-doc .i46-doc-v.is-clipped { border-radius: 8px 8px 0 0; }
.i46-doc-more {
  display: block; margin-top: -1px; padding: 5px 9px;
  border: 1px solid #e6ebf5; border-top: 0; border-radius: 0 0 8px 8px;
  background: #f8fafc; color: #94a3b8; font-size: 12px; line-height: 1.5;
}
/* 连续几条说明框之间必须有间距，否则会完全贴在一起 */
.i46-doc .i46-doc-note {
  margin: 10px 0 0; padding: 10px 12px;
  background: #fffaf0; border: 1px solid #fde8c0; border-radius: 10px;
  font-size: 13.5px; line-height: 1.7; color: #7a5210;
}
.i46-doc .i46-doc-note.is-warn { background: #fef4f4; border-color: #f7d0d0; color: #8c2f2f; }
@media (max-width: 767.98px) {
  .i46-doc { padding: 15px 14px 16px; border-radius: 10px; max-width: none; margin: 14px 12px 0; }
  .i46-doc th, .i46-doc td { display: block; width: auto; padding: 0; border: 0 }
  .i46-doc thead { display: none }
  .i46-doc tr { display: block; padding: 10px 0; border-top: 1px solid #eef2f7 }
  .i46-doc tbody tr:first-child { border-top: 0; padding-top: 0 }
  .i46-doc td.i46-doc-k { margin-bottom: 6px; font-size: 13.5px }
  .i46-doc .i46-doc-v { font-size: 12px }
}

/* 35. 加密/编码栏目工具区（作用域 body.i46-tpl-jiami） */

/* 35.1 容器：统一到 1200 内容列，取消旧固定宽 1160/1180 与多余左右内边距 */
.i46-tpl-jiami .Tool-MainWrap,
.i46-tpl-jiami .wrapper,
.i46-tpl-jiami #__root__ .wwlr,
.i46-tpl-jiami #__root__ .CodingWrap,
.i46-tpl-jiami #__root__ .GuoLvWrap {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 35.2 三栏（输入 | 操作 | 输出）与两栏（输入 | 输出）改成栅格，间隙统一 16px */
/* 栅格不需要清浮动，这两个伪元素直接取消 */
.i46-tpl-jiami #__root__ .CodChangeWrap::before,
.i46-tpl-jiami #__root__ .CodChangeWrap::after,
.i46-tpl-jiami form > .clearfix::before,
.i46-tpl-jiami form > .clearfix::after {
  content: none !important;
  display: none !important;
}
.i46-tpl-jiami #__root__ .CodChangeWrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.i46-tpl-jiami form > .clearfix:not(.GuoLvWrapCenter) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.i46-tpl-jiami #__root__ .CodChangLeft,
.i46-tpl-jiami #__root__ .CodChangCent,
.i46-tpl-jiami #__root__ .CodChangRight,
.i46-tpl-jiami #__root__ .JsTxtW-r {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
}
.i46-tpl-jiami #__root__ .CodChangCent .CodCBtnWrap,
.i46-tpl-jiami #__root__ .CodCBtnWrap {
  width: auto !important;
  height: auto !important;
}

/* 35.3 输入框 / 结果框：等宽填满栏、圆角、系统字体、可读的行高 */
.i46-tpl-jiami #__root__ .JsTxtCo,
.i46-tpl-jiami #__root__ .CodchaLtxt,
.i46-tpl-jiami #__root__ textarea#ipt {
  box-sizing: border-box !important;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 240px;
  padding: 12px 14px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 10px !important;
  background: #fff;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.i46-tpl-jiami #__root__ .JsTxtCo:focus,
.i46-tpl-jiami #__root__ .CodchaLtxt:focus,
.i46-tpl-jiami #__root__ textarea#ipt:focus {
  outline: 0;
  border-color: var(--brand, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
/* 占位提示跟着内边距走，否则文字会压在框边上 */
.i46-tpl-jiami .search-hint,
.i46-tpl-jiami #__root__ .search-hint {
  left: 14px !important;
  top: 12px !important;
  color: #94a3b8 !important;
  font-family: -apple-system, "system-ui", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
}

/* 35.4 按钮行：横排换行、统一高度与间距；主按钮品牌色、次按钮描边 */
.i46-tpl-jiami #__root__ .GuoLvCbtn,
.i46-tpl-jiami #__root__ .CodCBtnWrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
.i46-tpl-jiami #__root__ input.GLOkBtn,
.i46-tpl-jiami #__root__ input.bg-blue02,
.i46-tpl-jiami #__root__ input[type="button"],
.i46-tpl-jiami #__root__ input[type="submit"],
.i46-tpl-jiami #__root__ input[type="reset"] {
  box-sizing: border-box !important;
  margin: 0 !important;
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-family: -apple-system, "system-ui", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.i46-tpl-jiami #__root__ input.GLOkBtn {
  border: 1px solid var(--brand, #2563eb) !important;
  background: var(--brand, #2563eb) !important;
  color: #fff !important;
}
.i46-tpl-jiami #__root__ input.GLOkBtn:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.i46-tpl-jiami #__root__ input.bg-blue02 {
  border: 1px solid #dbe3f0 !important;
  background: #fff !important;
  color: #475569 !important;
}
.i46-tpl-jiami #__root__ input.bg-blue02:hover { border-color: #94a3b8 !important; color: #1f2937 !important; }
.i46-tpl-jiami #__root__ input.GLOkBtn:active,
.i46-tpl-jiami #__root__ input.bg-blue02:active { transform: translateY(1px); }

/* 35.5 自绘下拉（保留 hcj 的显隐逻辑，只改外观） */
.i46-tpl-jiami #__root__ .MainCateW-choese,
.i46-tpl-jiami #__root__ .MainCate-choese {
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  position: relative;
}
.i46-tpl-jiami #__root__ .MainCateW-cont.SearChoese,
.i46-tpl-jiami #__root__ .MainCate-cont.SearChoese {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 40px;
  padding: 0 30px 0 12px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  line-height: 38px !important;
  cursor: pointer;
}
.i46-tpl-jiami #__root__ .MainCateW-cont.SearChoese:hover { border-color: var(--brand, #2563eb) !important; }
.i46-tpl-jiami #__root__ .MCicon-drop-down {
  right: 12px !important;
  top: 17px !important;
  border-width: 5px 4px 0 !important;
  border-style: solid solid none !important;
  border-color: #64748b transparent transparent !important;
}
.i46-tpl-jiami #__root__ ul.MainCateC-down {
  box-sizing: border-box !important;
  top: 44px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  z-index: 20;
}
.i46-tpl-jiami #__root__ ul.MainCateC-down li,
.i46-tpl-jiami #__root__ ul.MainCateC-down li a {
  display: block;
  min-height: 38px;
  line-height: 38px;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #33415c !important;
  font-size: 14px !important;
  text-decoration: none;
}
.i46-tpl-jiami #__root__ ul.MainCateC-down li a:hover { background: #eff4ff !important; color: var(--brand, #2563eb) !important; }
.i46-tpl-jiami #__root__ .GlOtherWay { float: none !important; }
.i46-tpl-jiami #__root__ #pwd,
.i46-tpl-jiami #__root__ input#pwd {
  box-sizing: border-box !important;
  min-width: 120px !important;
  height: 40px;
  padding: 0 10px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}

/* 按钮下方那行小字说明（url.html 用来区分两个编码方向） */
.i46-tpl-jiami #__root__ .i46-btn-hint {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #64748b;
}
.i46-tpl-jiami #__root__ .i46-btn-hint code { color: #33415c; }

/* 35.5b 操作行：按钮 / 下拉 / 密码框排在同一行，下拉固定宽度不再撑满整行 */
.i46-tpl-jiami #__root__ .GuoLvWrapCenter,
.i46-tpl-jiami #__root__ .GuoLvWrapCenter.clearfix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.i46-tpl-jiami #__root__ .GuoLvWrapCenter::before,
.i46-tpl-jiami #__root__ .GuoLvWrapCenter::after { content: none !important; display: none !important; }
.i46-tpl-jiami #__root__ .GuoLvCbtn { flex: 1 1 auto; }
.i46-tpl-jiami #__root__ .MainCate-choese,
.i46-tpl-jiami #__root__ .MainCateW-choese {
  flex: 0 0 auto;
  width: 200px !important;
  max-width: 100%;
}
.i46-tpl-jiami #__root__ .GlOtherWay { flex: 0 0 auto; }
.i46-tpl-jiami #__root__ #btnlist { flex: 1 1 auto; }

/* 35.6 按钮行与说明卡之间的竖向节奏统一 */
.i46-tpl-jiami .GuoLvWrapCenter,
.i46-tpl-jiami #__root__ .GuoLvWrapCenter { margin-top: 16px !important; }
.i46-tpl-jiami .i46-doc { margin-top: 16px; }
.i46-tpl-jiami #__root__ #loading {
  border-radius: 10px;
  background: rgba(255, 255, 255, .92) !important;
  color: #64748b !important;
  font-family: -apple-system, "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
}

/* 35.7 randompass：table+bgcolor 的老表单重画 */
.i46-tpl-jiami #main_content { max-width: 1200px; margin: 0 auto; }
.i46-tpl-jiami #main_content table {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff;
  border: 1px solid #e6ebf5 !important;
  border-radius: 12px;
  overflow: hidden;
}
.i46-tpl-jiami #main_content table table { border: 0 !important; border-radius: 0; }
.i46-tpl-jiami #main_content td {
  background: #fff !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #33415c;
  text-align: left !important;
  vertical-align: middle;
}
.i46-tpl-jiami #main_content tr:first-child > td,
.i46-tpl-jiami #main_content tbody:first-child tr:first-child > td { border-top: 0 !important; }
.i46-tpl-jiami #main_content td[width="25%"],
.i46-tpl-jiami #main_content .shuru_div_jiange { background: #f8fafc !important; color: #475569 !important; font-weight: 600; }
.i46-tpl-jiami #main_content input[type="text"],
.i46-tpl-jiami #main_content input#ss_cd,
.i46-tpl-jiami #main_content input#ss_mmscjg,
.i46-tpl-jiami #main_content input#ss_fh_value {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 40px;
  padding: 0 10px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 9px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 14px !important;
  color: #1f2937;
}
.i46-tpl-jiami #main_content input#ss_mmscjg { background: #f8fafc !important; letter-spacing: .04em; }
.i46-tpl-jiami #main_content label { font-size: 14px; color: #33415c; cursor: pointer; }
.i46-tpl-jiami #pmk_sj_top {
  max-width: 1200px; margin: 0 auto 14px; padding: 0 4px;
  background: none !important; box-shadow: none !important; border: 0 !important;
  color: #1f2937 !important; font-size: 16px !important; font-weight: 600;
  font-family: -apple-system, "system-ui", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* 35.7a randompass 没有 #__root__ 包裹，段 35.4 的按钮规则命不到它，
   这里补一份（生成按钮 + 长度输入框 + 老分隔线/小标题） */
.i46-tpl-jiami #main_content input[type="button"],
.i46-tpl-jiami #main_content input[type="submit"],
.i46-tpl-jiami #main_content #ss_anniu {
  box-sizing: border-box !important;
  min-height: 40px;
  padding: 0 18px !important;
  border: 1px solid var(--brand, #2563eb) !important;
  border-radius: 9px !important;
  background: var(--brand, #2563eb) !important;
  color: #fff !important;
  font-family: -apple-system, "system-ui", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
  cursor: pointer;
}
.i46-tpl-jiami #main_content input[type="submit"]:hover { background: #1d4ed8 !important; }
.i46-tpl-jiami #main_content #ss_cd {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 8px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  text-align: center;
}
.i46-tpl-jiami #main_content #ss_fh_value {
  height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 9px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 14px !important;
}
.i46-tpl-jiami .nry_bt { display: none; }
/* 「本系统不会记录您的随机密码」是有用的隐私声明，不能藏，只把它排成正常提示行 */
.i46-tpl-jiami .huisefengexian {
  display: block;
  max-width: 620px;
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}
.i46-tpl-jiami #main_content .shuru_div { white-space: normal !important; }

/* 35.7b 窄屏栏距：桌面靠 max-width:1200 居中，手机上必须有 12px 栏距，
   否则输入框顶到屏幕两边、而下面的说明卡片有 12px，两者错位。
   只给最外层容器加，内层保持 0——两处都加会变成 24px 又错开一档；
   另外选择器必须带 #__root__ 前缀才打得过 35.1 里那条 (id,类,类) 的归零规则。 */
@media (max-width: 991.98px) {
  .i46-tpl-jiami .Tool-MainWrap,
  .i46-tpl-jiami #__root__ > .wrapper,
  .i46-tpl-jiami #__root__ .wrapper,
  .i46-tpl-jiami #main_content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .i46-tpl-jiami #main_content table { max-width: 100% !important; }
}

/* 35.8 窄屏：三栏/两栏一律纵向堆叠，顺序保持 输入 → 操作 → 输出 */
@media (max-width: 991.98px) {
  .i46-tpl-jiami #__root__ .CodChangeWrap,
  .i46-tpl-jiami form > .clearfix:not(.GuoLvWrapCenter) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }
  .i46-tpl-jiami #__root__ .CodChangCent { order: 2; }
  .i46-tpl-jiami #__root__ .CodChangRight { order: 3; }
  .i46-tpl-jiami #__root__ .CodChangLeft { order: 1; }
  .i46-tpl-jiami #__root__ .JsTxtCo,
  .i46-tpl-jiami #__root__ .CodchaLtxt,
  .i46-tpl-jiami #__root__ textarea#ipt { min-height: 180px; }
}
@media (max-width: 767.98px) {
  .i46-tpl-jiami #__root__ .GuoLvCbtn,
  .i46-tpl-jiami #__root__ .CodCBtnWrap { gap: 8px; }
  .i46-tpl-jiami #__root__ input.GLOkBtn,
  .i46-tpl-jiami #__root__ input.bg-blue02,
  .i46-tpl-jiami #__root__ input[type="button"],
  .i46-tpl-jiami #__root__ input[type="submit"],
  .i46-tpl-jiami #__root__ input[type="reset"] { flex: 1 1 auto; text-align: center; padding: 0 12px !important; }
  .i46-tpl-jiami #__root__ .JsTxtCo,
  .i46-tpl-jiami #__root__ .CodchaLtxt,
  .i46-tpl-jiami #__root__ textarea#ipt { min-height: 160px; font-size: 13.5px !important; }
  .i46-tpl-jiami #main_content td { padding: 10px 12px !important; }
}

/* 36. 全站工具区统一（段 35 的普适部分推广到其它栏目） */
.i46-main .container:not(.i46-main) {
  width: auto !important;
  max-width: 1200px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 裸 textarea（老模板没套 .form-control）统一到同一外观 */
.i46-main textarea:not(.form-control):not(.json_input) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 180px;
  padding: 12px 14px !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 10px !important;
  background: #fff;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  resize: vertical;
}
.i46-main textarea:focus {
  outline: 0;
  border-color: var(--brand, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
/* 工具区里的输入框/下拉/按钮：桌面 40px 高、窄屏不换行挤爆 */
.i46-main .row > .col-md-12,
.i46-main .row > .col-sm-12 { padding-left: 0; padding-right: 0; }

/* 37. 元素周期表：高亮本页元素 + 一行提示 */
.elboxs.is46-cur {
  outline: 3px solid var(--brand, #2563eb);
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
  border-radius: 4px;
}
.elboxs.is46-cur .eltl,
.elboxs.is46-cur .elff { font-weight: 700; }
.i46-el-cur {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #dbe3f0;
  border-left: 3px solid var(--brand, #2563eb);
  border-radius: 8px;
  background: #f7f9ff;
  color: #1f2937;
  font-size: 13.5px;
  line-height: 1.7;
}
.i46-el-cur b { color: var(--brand, #2563eb); }

/* 38. 元素周期表表块（.i46-pt） */
.i46-pt { margin: 4px 0 2px; }
.i46-pt-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.i46-pt-grid {
  display: grid;
  /* 列宽用 minmax(0,1fr)：容器多宽就摊成 18 等分，不会把最后一列挤扁或顶出容器；
     只有窄到需要横向滚动时（见下面 @media）才给一个最小宽度。 */
  grid-template-columns: 26px repeat(18, minmax(0, 1fr));
  grid-auto-rows: minmax(44px, auto);
  gap: 4px;
}
.i46-pt-gh, .i46-pt-gp { font-size: 10.5px; color: #6b7280; text-align: center; align-self: center; }
.i46-pt-gap { height: 6px; }
.i46-pt-el {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  transition: transform .12s ease, box-shadow .12s ease;
}
.i46-pt-el:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 24, 40, .16); z-index: 2; }
.i46-pt-el:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.i46-pt-n { position: absolute; top: 3px; left: 5px; font-size: 9.5px; font-style: normal; color: var(--ac, #6b7280); }
.i46-pt-s { font-size: 15px; font-weight: 700; line-height: 1.1; margin-top: 7px; }
.i46-pt-m { font-size: 9px; line-height: 1.1; color: #6b7280; }
.i46-pt-t { font-size: 10.5px; line-height: 1.15; color: #4b5563; }
.i46-pt-el.is46-cur { outline: 2.5px solid var(--brand, #2563eb); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(37, 99, 235, .16); }
/* 主表里 57–71 / 89–103 两个占位格：不跳转，只指向下方 f 区两行 */
.i46-pt-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #b6c2d2;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  color: #475569;
  background: #fff;
}
.i46-pt-ph[data-cat=elc4] { background: #f2fbfe; border-color: #9fdbe8; color: #0e7490; }
.i46-pt-ph[data-cat=elc5] { background: #f3fbf6; border-color: #a5dcb9; color: #15803d; }
/* 分类配色：柔和底色 + 同色系描边，文字色取深色保证对比度 */
.i46-pt-el[data-cat=elc1] { background: #fff3e0; border-color: #f0b45c; --ac: #b45309; }
.i46-pt-el[data-cat=elc2] { background: #fffbe0; border-color: #e6cf5c; --ac: #a16207; }
.i46-pt-el[data-cat=elc3] { background: #eef1ff; border-color: #a5b0f5; --ac: #4338ca; }
.i46-pt-el[data-cat=elc6] { background: #fdf0f7; border-color: #f0a8cf; --ac: #be185c; }
.i46-pt-el[data-cat=elc7] { background: #e9f7ff; border-color: #7ccdf5; --ac: #0369a1; }
.i46-pt-el[data-cat=elc8] { background: #f6f0ff; border-color: #c6a8f0; --ac: #7e22ce; }
.i46-pt-el[data-cat=elc4] { background: #e8fbff; border-color: #6fd3e8; --ac: #0e7490; }
.i46-pt-el[data-cat=elc5] { background: #eafbf0; border-color: #7fd6a0; --ac: #15803d; }
.i46-pt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 12px 0 0; font-size: 12.5px; }
.i46-pt-lg { display: inline-flex; align-items: center; gap: 5px; color: #4b5563; }
.i46-pt-lg i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid #cbd5e1; }
.i46-pt-lg[data-cat=elc1] i { background: #fff3e0; border-color: #f0b45c; }
.i46-pt-lg[data-cat=elc2] i { background: #fffbe0; border-color: #e6cf5c; }
.i46-pt-lg[data-cat=elc3] i { background: #eef1ff; border-color: #a5b0f5; }
.i46-pt-lg[data-cat=elc6] i { background: #fdf0f7; border-color: #f0a8cf; }
.i46-pt-lg[data-cat=elc7] i { background: #e9f7ff; border-color: #7ccdf5; }
.i46-pt-lg[data-cat=elc8] i { background: #f6f0ff; border-color: #c6a8f0; }
.i46-pt-lg[data-cat=elc4] i { background: #e8fbff; border-color: #6fd3e8; }
.i46-pt-lg[data-cat=elc5] i { background: #eafbf0; border-color: #7fd6a0; }
.i46-pt-note { color: #6b7280; }
@media (max-width: 900px) {
  /* 窄屏：18 列摊不开时改为卡内横向滚动（宽表格允许卡内横滚，输入框才必须落进视口） */
  .i46-pt-grid { grid-template-columns: 24px repeat(18, minmax(38px, 1fr)); min-width: 740px; }
}
@media (max-width: 520px) {
  .i46-pt-grid { grid-template-columns: 20px repeat(18, minmax(32px, 1fr)); grid-auto-rows: minmax(38px, auto); gap: 3px; min-width: 660px; }
  .i46-pt-s { font-size: 12.5px; margin-top: 5px; }
  .i46-pt-t { font-size: 9px; }
  .i46-pt-m { font-size: 8px; }
  .i46-pt-n { font-size: 8px; top: 2px; left: 3px; }
}

/* 38.5 元素资料表（#detail 里的 .tb1 与简化版 .tb2）：老表格用「一个汉字一个 <p>」
      竖排标签 + 灰边框，这里统一成设计系统的读法：标签列浅底、竖排标签改横排、值左对齐。 */
#detail .tb1, #detail .tb2 { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
#detail .tb1 *, #detail .tb2 * { box-sizing: border-box; }
#detail .tb1 th, #detail .tb1 td, #detail .tb2 th, #detail .tb2 td {
  border: 1px solid #dbe3f0; padding: 9px 12px; font-size: 13.5px; line-height: 1.75;
  text-align: left; vertical-align: top;
}
#detail .tb1 th, #detail .tb2 th { background: #f7f9ff; color: #334155; font-weight: 600; white-space: nowrap; }
#detail .tb1 th p, #detail .tb2 th p { display: inline; margin: 0; }
#detail .tb1 td, #detail .tb2 td { color: #1f2937; }
#detail .tb1 h2 { font-size: 20px; margin: 0; color: var(--brand, #2563eb); }
#detail .tb1 tr:first-child th { border-top-left-radius: 10px; }
#detail .tb2 tr:last-child th { border-bottom-left-radius: 10px; }
#detail .tb1 img { display: block; margin: 6px auto; max-width: 100%; height: auto; }
@media (max-width: 640px) {
  #detail .tb1 th, #detail .tb1 td, #detail .tb2 th, #detail .tb2 td { padding: 8px 10px; font-size: 13px; }
}

/* 39. 表单组件（.i46-field / .i46-chips / .i46-tip / .i46-note） */
.i46-tip {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--ink-2);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  margin: 0 0 16px;
}
.i46-field { margin: 0 0 12px; }
/* :not(.i46-chip) 是必需的：胶囊式勾选项（favicon 尺寸、邮编选项）也是 <label>，
   被这条规则命中后会从 inline-flex 变成 block，复选框与文字不再垂直居中。 */
.i46-field > label,
.i46-field label:not(.i46-chip) { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; font-weight: 600; }
.i46-field input[type=search],
.i46-field input[type=text],
.i46-field input[type=number],
.i46-field input:not([type]),
.i46-field input[type=file],
.i46-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  min-height: 44px;
  border: 1px solid var(--line, #dbe3f0);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
}
.i46-field input[type=file] { padding: 9px 12px; font-size: 14px; }
.i46-field input[type=search]:focus,
.i46-field input[type=text]:focus,
.i46-field select:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.i46-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.i46-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  background: #eef1f6;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  user-select: none;
}
.i46-chip:hover { background: #e6ebf3; }
.i46-chip input[type=radio],
.i46-chip input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--brand, #2563eb); }
.i46-chip:has(input:checked) { background: var(--brand, #2563eb); color: #fff; }
.i46-chip:has(input:checked):hover { background: var(--brand-dk, #1d4ed8); }
.i46-chip:has(input:checked) input { accent-color: #fff; }
.i46-chip input:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.i46-note { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 8px; min-height: 18px; }
.i46-h2 { font-size: 16px; margin: 22px 0 10px; color: var(--ink); }
.i46-steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.i46-steps code { background: #f1f3f7; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
@media (max-width: 640px) {
  .i46-chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .i46-chip input[type=radio], .i46-chip input[type=checkbox] { width: 18px; height: 18px; }
  .i46-field { margin-bottom: 14px; }
}

/* 40. 桌面档也抵消 Bootstrap .row 的负外边距 */
.i46-main .row {
  margin-left: 0;
  margin-right: 0;
}

/* 41. 搜索框输入联想（is46-ui.js 动态插入 #i46Suggest） */
.i46-suggest {
  position: fixed;
  z-index: 9999;
  max-height: 336px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line, #e3e6ec);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  font-family: var(--font, inherit);
  overscroll-behavior: contain;
}
.i46-suggest[hidden] { display: none; }
.i46-suggest.is-up { transform: translateY(-100%); margin-top: -12px; }
.i46-sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink, #1f2430);
  text-decoration: none;
}
.i46-sug-item:hover,
.i46-sug-item.is-active {
  background: var(--brand-soft, #e8efff);
  color: var(--brand, #2563eb) !important;
}
.i46-sug-item .i46-sug-t { flex: 1 1 auto; min-width: 0; }
.i46-sug-item b { font-weight: 700; }
.i46-sug-item .i46-sug-c {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-3, #8b95a6);
  background: #f1f3f7;
  border-radius: 999px;
  padding: 2px 8px;
}
.i46-sug-item.is-active .i46-sug-c { background: #fff; color: var(--brand, #2563eb); }
.i46-sug-foot {
  margin: 4px 6px 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--line, #e3e6ec);
  font-size: 11.5px;
  color: var(--ink-3, #8b95a6);
}
@media (max-width: 640px) {
  .i46-suggest { max-height: 260px; }
  .i46-sug-item { padding: 10px; font-size: 14px; }
}

/* 42. 栏目加到 12 个后，页头导航会压到搜索框上（内容列有 max-width，宽屏也不会变松），
   所以 ≥1280 一律收紧导航项；≤1279.98 段 12 本来就隐藏桌面搜索框，不受影响。 */
@media (min-width: 1280px) {
  .i46-menu { gap: 1px; }
  .i46-menu > .i46-item > .i46-link { padding: 8px 6px; font-size: 13px; }
  .i46-search { margin-left: 4px; }
}