/* ============================================================
   /tools/ 工具页主题
   只在这 17 个静态工具页加载，位置固定在 bang.css 之后。
   作用：把从旧模板带来的 bootstrap 组件（card / input-group /
   form-control / table / alert / btn）收敛到帮计算的设计语言，
   并补上工具页缺的排版节奏与移动端排布。
   不碰 bang.css，所以站点头尾、导航、页脚不受影响。
   ============================================================ */

/* 页面容器：与 .wrap 同宽，留出上下呼吸 */
.runoob-page-content{max-width:1120px;margin:0 auto;padding:26px 24px 44px}
.runoob-page-content > .row{margin-left:0;margin-right:0}
.runoob-page-content .row + .row{margin-top:20px}

/* 卡片 */
.runoob-page-content .card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;margin:0}
.runoob-page-content .card-header{
  background:var(--bg-soft);border-bottom:1px solid var(--border);
  padding:14px 20px}
.runoob-page-content .card-header form.form-inline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;width:100%}
.runoob-page-content .card-header h1,
.runoob-page-content .card-header h2,
.runoob-page-content .card-header h3,
.runoob-page-content .card-header h4{
  flex:1 1 auto;margin:0;font-size:19px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:9px;line-height:1.4}
.runoob-page-content .card-header h1 i,
.runoob-page-content .card-header h2 i,
.runoob-page-content .card-header h3 i,
.runoob-page-content .card-header h4 i{color:var(--teal);font-size:17px}
.runoob-page-content .card-body{padding:22px 20px}

/* 卡片内的白色内衬面板（旧模板用 border shadow-sm bg-white rounded 拼出来的） */
.runoob-page-content .card-body .border.shadow-sm{
  border:1px solid var(--border)!important;border-radius:var(--r-sm);
  background:var(--surface);box-shadow:none!important;padding:18px 16px}

/* 输入 */
.runoob-page-content .form-control{
  height:44px;border:1.5px solid var(--border-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-size:16px;line-height:1.4;
  padding:0 14px;transition:border-color .15s,box-shadow .15s}
.runoob-page-content .form-control:focus{
  border-color:var(--teal);outline:none;
  box-shadow:0 0 0 4px rgba(13,148,136,.12)}
.runoob-page-content .form-control::placeholder{color:var(--text-3)}
.runoob-page-content .input-group-text{
  min-width:126px;min-height:44px;justify-content:center;background:var(--bg-soft);
  border:1.5px solid var(--border-2);color:var(--text);font-weight:600;font-size:14px}
.runoob-page-content .input-group-lg > .form-control{height:48px;font-size:17px}
.runoob-page-content .input-group-lg .input-group-text{font-size:15px}
.runoob-page-content .input-group > .form-control{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* 没有前缀色块时（后缀单位那种），输入框左侧要自己带圆角 */
.runoob-page-content .input-group > .form-control:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.runoob-page-content .input-group-prepend .input-group-text{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.runoob-page-content .input-group-append .input-group-text{border-radius:0 var(--r-sm) var(--r-sm) 0}
.runoob-page-content .form-group.mb-3,.runoob-page-content .mb-3{margin-bottom:14px!important}

/* 按钮：清除类动作不再用警示红，主操作用青绿 */
.runoob-page-content .btn{
  border-radius:10px;font-size:14px;font-weight:600;padding:8px 15px;
  min-height:44px;                                   /* 触控目标不低于 44px */
  border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);
  transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.5}
.runoob-page-content .btn:hover{
  border-color:var(--teal);color:var(--teal-strong);background:var(--teal-bg)}
.runoob-page-content .btn:focus{box-shadow:0 0 0 3px rgba(13,148,136,.15);outline:none}
.runoob-page-content .btn-primary,.runoob-page-content .btn-success{
  background:var(--teal);border-color:var(--teal);color:#fff}
.runoob-page-content .btn-primary:hover,.runoob-page-content .btn-success:hover{
  background:var(--teal-strong);border-color:var(--teal-strong);color:#fff}
.runoob-page-content .btn-danger{background:var(--surface);border-color:var(--border-2);color:var(--text-2)}
.runoob-page-content .btn-lg{font-size:16px;padding:11px 22px;border-radius:12px}

/* 提示条 */
.runoob-page-content .alert{
  border-radius:var(--r-sm);font-size:14px;padding:12px 14px;border:1px solid;margin-bottom:14px}
.runoob-page-content .alert-danger{
  background:#fef2f2;border-color:#fecaca;color:#b91c1c}

/* 校验轻提示：替代阻塞式 alert() 与把 NaN 印到结果行 */
.tool-hint{display:none}
.tool-hint.is-on{
  display:block;background:var(--teal-bg);border:1px solid var(--teal-line);
  color:var(--teal-strong);border-radius:var(--r-sm);padding:10px 14px;
  font-size:14px;margin-bottom:14px}

/* 正文排版 */
.runoob-page-content .card-body h2{
  font-size:18px;font-weight:800;margin:24px 0 10px;
  padding-left:12px;border-left:3px solid var(--teal);line-height:1.5}
.runoob-page-content .card-body h2:first-child{margin-top:2px}
.runoob-page-content .card-body h3{font-size:16px;font-weight:700;margin:20px 0 8px}
.runoob-page-content .card-body p{font-size:15px;line-height:1.9;color:var(--text-2);margin:0 0 12px}
.runoob-page-content .card-body ul,
.runoob-page-content .card-body ol{margin:0 0 14px 22px;color:var(--text-2);font-size:15px;line-height:1.9}
.runoob-page-content .card-body li{margin:2px 0}
.runoob-page-content .card-body a{color:var(--teal-strong);text-decoration:none}
.runoob-page-content .card-body a:hover{text-decoration:underline}
.runoob-page-content .card-body code,
.runoob-page-content .card-body pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--bg-soft);border:1px solid var(--border-2);border-radius:8px}
.runoob-page-content .card-body code{padding:1px 6px;font-size:13.5px}

/* 表格：与站点 .data-table 同观感 */
.runoob-page-content .table{
  width:100%;border-collapse:collapse;font-size:14px;margin:14px 0;background:var(--surface)}
.runoob-page-content .table th,
.runoob-page-content .table td{
  padding:11px 14px;border:1px solid var(--border);color:var(--text-2);text-align:left}
.runoob-page-content .table th{background:var(--bg-soft);color:var(--text);font-weight:700}
.runoob-page-content .table tbody tr:hover{background:var(--bg-soft)}
/* 宽表（sdhs 的换算矩阵）在窄屏下横向滚动，而不是被压成一团 */
.runoob-page-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.runoob-page-content .table-scroll .table{min-width:560px}

/* 工具页里常见的“结果/输出”块 */
.runoob-page-content .result,
.runoob-page-content .showresult,
.runoob-page-content .output{
  background:var(--teal-bg);border:1px solid var(--teal-line);border-radius:var(--r-sm);
  padding:14px 16px;font-size:15px;color:var(--text);word-break:break-all}

/* 需要隐藏的初始态（替代内联 style="display:none"，jQuery 的 show/hide 仍能覆盖） */
.is-hidden{display:none}

/* 工具目录页 /tools/index.html：分组标题 + 卡片式链接网格 */
.tool-hub-title{font-size:24px;font-weight:800;color:var(--text);margin:0 0 4px}
.tool-hub-sub{font-size:14px;color:var(--text-2);margin:0 0 22px}
.runoob-page-content .runoob-item{margin-top:26px}
.runoob-page-content .runoob-item:first-of-type{margin-top:0}
.runoob-page-content .runoob-item-name{
  font-size:16px;font-weight:800;color:var(--text);
  padding-bottom:10px;margin-bottom:14px;border-bottom:2px solid var(--teal);
  display:flex;align-items:center;gap:8px}
.runoob-page-content .runoob-item-name i{color:var(--teal);font-size:15px}
.runoob-page-content .nav-moredata ul{list-style:none;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:0;padding:0;line-height:1.7}
.runoob-page-content .nav-moredata li.lia{
  width:auto;max-width:none;flex:none;margin:0;              /* style.css 给 li 写了 width:25% 与 margin，在网格里会变成窄条 */
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;transition:.15s}
.runoob-page-content .nav-moredata li.lia:hover{
  border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px);
  background:var(--surface);font-weight:400}
.runoob-page-content a.runoob-custom-link{
  font-size:16px;font-weight:700;color:var(--text);line-height:1.5;
  display:block!important;padding:0;overflow:visible;text-overflow:clip;word-break:normal}
.runoob-page-content a.runoob-custom-link:hover{color:var(--teal-strong);text-decoration:none}
.runoob-page-content p.desc{font-size:13.5px;color:var(--text-2);margin:6px 0 0;line-height:1.7}

/* 旧模板用内联 margin 撑出来的区块间距 */
.runoob-page-content .tool-section{margin:20px 0}

/* ------------------------------------------------------------
   第二轮：换算器页面里 bootstrap 语义色与旧站点残留色的收敛
   （实测线上计算值：badge 是橙底、text-primary 是 #007bff 蓝、
    text-secondary 有两种（#325d88 / #8e8c84）、结果行 56px 大红字）
   ------------------------------------------------------------ */

/* 正文里的强调色统一走站点 token，不再用 bootstrap 蓝/橙 */
.runoob-page-content .text-primary{color:var(--text)!important}
.runoob-page-content .text-secondary{color:var(--text-2)!important}
.runoob-page-content .text-danger{color:var(--teal-strong)!important}

/* 字段标签：原来靠内联 font-size:16px 撑，统一到这里 */
.runoob-page-content .card-body label{font-size:15.5px;font-weight:700;color:var(--text-2)}
.runoob-page-content .form-group.font-weight-bold.text-secondary{
  font-size:16px;font-weight:800;color:var(--text);
  border-bottom:1px solid var(--border)!important;padding-bottom:9px;margin-bottom:16px}
.runoob-page-content .form-group.font-weight-bold.text-secondary i{color:var(--teal);margin-right:2px}

/* 单位徽标：橙底 → 青绿浅底 */
.runoob-page-content .badge{
  display:inline-block;padding:2px 10px;border-radius:999px;
  background:var(--teal-bg);border:1px solid var(--teal-line);
  color:var(--teal-strong);font-size:12.5px;font-weight:700;line-height:1.7;vertical-align:middle}

/* 下拉框：与输入框同高同边框，右侧留出自带箭头的位 */
.runoob-page-content select.form-control{padding-right:36px;background-color:var(--surface);cursor:pointer}
.runoob-page-content select.form-control:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.12)}

/* 主操作按钮（转换）：outline 语义在这里就是页面上唯一的主按钮，给实心青绿 */
.runoob-page-content .btn-outline-primary{
  background:var(--teal);border-color:var(--teal);color:#fff}
.runoob-page-content .btn-outline-primary:hover{
  background:var(--teal-strong);border-color:var(--teal-strong);color:#fff}
/* 交换方向的小方按钮：保持中性，但给足触控面积 */
.runoob-page-content .btn-outline-dark{
  background:var(--surface);border-color:var(--border-2);color:var(--text-2);
  padding:6px 10px;min-width:44px}

/* ------------------------------------------------------------
   区块节奏：卡片内「块与块」的间距走同一套刻度
   （旧模板里这些间距是各页自己用 mb、p 之类的工具类拼出来的，不统一）
   ------------------------------------------------------------ */
.runoob-page-content .card + .card{margin-top:20px}
.runoob-page-content .card-body > .form-row + .form-row{margin-top:20px}
.runoob-page-content .card-body > .form-group + .form-group{margin-top:16px}
.runoob-page-content .card-body .form-row > [class*="col-"]{margin-bottom:14px}
.runoob-page-content .card-body .form-row > [class*="col-"]:last-child{margin-bottom:0}
/* 分组小标题（“公　制 / 常用 / 不常用 / 结果”）与其上文的距离 */
.runoob-page-content .form-group.font-weight-bold.text-secondary{margin-top:22px}
.runoob-page-content .form-group.font-weight-bold.text-secondary:first-child{margin-top:0}

/* 结果行：原来是 display-4 的 56px 大红字 */
.runoob-page-content #resultDesc{
  font-size:22px;font-weight:800;color:var(--teal-strong);
  text-align:center;margin:26px 0 6px;line-height:1.6;word-break:break-word}
.runoob-page-content #resultDesc .font-weight-lighter{font-weight:800;color:inherit}

/* 密度换算表：隐藏的排序键与小数位间隔（原来是 18+17 个内联 style） */
.runoob-page-content .sortkey{display:none}
.runoob-page-content .num-gap{margin-left:.25em}
.runoob-page-content .nowrap{white-space:nowrap}

/* 每行一个面板的老写法（border border-secondary shadow）：深灰描边 + 8px 重投影，
   与站点的轻描边不一致；统一收成 --border，投影去掉（卡片本身已有 --shadow-sm） */
.runoob-page-content .card-body .border-secondary{border-color:var(--border)!important}
.runoob-page-content .card-body .shadow{box-shadow:none!important}

/* 移动端：前缀长标签换到输入框上方当字段标签；后缀短单位与按钮保持在同一行，
   否则 cdhs 那种「每单位一行」的页面会被拆成三行、整页长到没法用 */
@media(max-width:640px){
  /* 汉堡钮只在移动端出现：bang.css 用 display:none + 媒体查询控制，
     这里只补命中区，且必须写在媒体查询内——写在外面会把桌面端的按钮也显示出来 */
  header .nav-toggle{min-width:44px;min-height:44px;padding:0;display:inline-flex;
    align-items:center;justify-content:center}
  .runoob-page-content{padding:18px 16px 36px}
  .runoob-page-content .input-group{flex-wrap:wrap}
  /* 输入框给到 80px 下限，让「输入 + 单位 + 换算」在 390 宽下仍占一行 */
  .runoob-page-content .input-group > .form-control{flex:1 1 80px;min-width:0;width:auto}
  .runoob-page-content .input-group .btn{padding:8px 12px}
  .runoob-page-content .input-group-prepend{width:100%}
  .runoob-page-content .input-group-prepend .input-group-text{
    width:100%;min-width:0;justify-content:flex-start;border-bottom:0;
    border-radius:var(--r-sm) var(--r-sm) 0 0}
  .runoob-page-content .input-group-prepend + .form-control{
    flex:1 1 100%;width:100%;border-radius:0 0 var(--r-sm) var(--r-sm)}
  .runoob-page-content .input-group-append{width:auto;flex:0 0 auto}
  .runoob-page-content .input-group-append .input-group-text{
    width:auto;min-width:0;padding:0 14px;border-bottom:1.5px solid var(--border-2);
    border-radius:0 var(--r-sm) var(--r-sm) 0}
  .runoob-page-content .input-group .btn{flex:0 0 auto}
  .runoob-page-content .card-header h1,
  .runoob-page-content .card-header h2,
  .runoob-page-content .card-header h3,
  .runoob-page-content .card-header h4{font-size:17px}
  .runoob-page-content .card-header .btn{margin-left:0}
}

/* 工具页说明区（怎么用 / 换算公式 / 对照表 / 简介） */
.runoob-page-content #about .card-header h3,
.runoob-page-content .card-header h3{font-size:16px;font-weight:800;color:var(--text);margin:0}
.runoob-page-content .card-body ol{counter-reset:step;list-style:none;margin:0 0 14px;padding:0}
.runoob-page-content .card-body ol li{position:relative;padding:0 0 0 30px;margin:7px 0;
  font-size:15px;line-height:1.85;color:var(--text-2)}
.runoob-page-content .card-body ol li::before{content:counter(step);counter-increment:step;
  position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--teal-bg);border:1px solid var(--teal-line);color:var(--teal-strong);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.runoob-page-content .note{font-size:13.5px;color:var(--text-3);background:var(--bg-soft);
  border-left:3px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 14px;margin:12px 0 0}

/* ============================================================
   独立工具页（md5 / sanjiaoxing / shuzi / zsvg）的说明区
   这几页没有 .runoob-page-content 外壳，所以单独写一份，
   观感与 11 个换算器页的 #about 卡保持一致。
   ============================================================ */
.tool-about{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);margin:22px 0 0}
.tool-about>.hd{background:var(--bg-soft);border-bottom:1px solid var(--border-2);
  border-radius:var(--r) var(--r) 0 0;padding:13px 20px}
.tool-about>.hd h3{font-size:16px;font-weight:800;color:var(--text);margin:0;line-height:1.4}
.tool-about>.bd{padding:4px 20px 20px}
.tool-about h2{font-size:18px;font-weight:800;margin:24px 0 10px;
  padding-left:12px;border-left:3px solid var(--teal);line-height:1.5}
.tool-about h2:first-child{margin-top:14px}
.tool-about p{font-size:15px;line-height:1.9;color:var(--text-2);margin:0 0 12px}
.tool-about ul{margin:0 0 14px 22px;padding:0;color:var(--text-2);font-size:15px;line-height:1.9}
.tool-about ol{counter-reset:step;list-style:none;margin:0 0 14px;padding:0}
.tool-about ol li{position:relative;padding:0 0 0 30px;margin:7px 0;
  font-size:15px;line-height:1.85;color:var(--text-2)}
.tool-about ol li::before{content:counter(step);counter-increment:step;
  position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--teal-bg);border:1px solid var(--teal-line);color:var(--teal-strong);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tool-about table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0;background:var(--surface)}
.tool-about th,.tool-about td{padding:11px 14px;border:1px solid var(--border);
  color:var(--text-2);text-align:left;vertical-align:top;line-height:1.7;word-break:break-word}
.tool-about th{background:var(--bg-soft);color:var(--text);font-weight:700}
.tool-about tbody tr:hover{background:var(--bg-soft)}
.tool-about code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--bg-soft);border:1px solid var(--border-2);border-radius:8px;
  padding:1px 6px;font-size:13.5px}
.tool-about .note{font-size:13.5px;color:var(--text-3);background:var(--bg-soft);
  border-left:3px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 14px;margin:12px 0 0}
.tool-about .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.tool-about .table-scroll table{min-width:520px}
@media(max-width:640px){
  .tool-about>.bd{padding:2px 14px 16px}
  .tool-about th,.tool-about td{padding:9px 10px;font-size:13.5px}
  .tool-about ol li{padding-left:26px}
}