/* ========================================
   a.css —— 工具站公共样式
   由各工具页内联 <style> 中的相同 CSS 提取而来
   页面私有样式请保留在页面内 <style> 中
   ======================================== */

/* ===== 头部导航 ===== */
.header-inner>div>ul,.header-inner>div>button{ float:right }

/* ===== 板块卡片 ===== */
.panel {
    background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 24px; overflow: hidden;
    transition: background .2s, border-color .2s;
}
.panel-head {
    background: var(--panel-head-bg); border-bottom: 1px solid var(--border);
    padding: 10px 16px; font-weight: 600; font-size: 15px;
}
.panel-body { padding: 16px; }

/* ===== 工具板块：按钮行 ===== */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin:5px 10px; justify-content: space-between;}
.btn-row label { margin: 0 2px 0 0; color: var(--muted); }
.btn-row select {
    padding: 5px 8px; border: 1px solid var(--select-border); border-radius: 4px;
    background: var(--select-bg); color: var(--select-color); font-size: 12px;
}

/* ===== 工具按钮 ===== */
.pure-button { border-radius: 4px; font-size: 12px; padding: 6px 14px; }
.tbtn{align-items:center;display:inline-flex;gap:6px;line-height:1.4;margin-left:5px}
.tbtn i{display:inline-block;font-size:14px;vertical-align:middle}
.tbtn.tbtn-nobg{gap:0}

.tbtn-info { background: #17a2b8; color: #fff; }
.tbtn-info:hover { background: #138496; }
.tbtn-secondary { background: var(--tbtn-bg); color: #fff; }
.tbtn-secondary:hover { background: var(--tbtn-bg-hover); }
.tbtn-warning { background: #ffc107; color: #212529; }
.tbtn-warning:hover { background: #e0a800; }
.tbtn-format { background: rgba(46, 184, 103,1.0); color:rgb(255,255,255); }
.tbtn-format:hover { background: rgba(46, 184, 103,0.8); }
.tbtn-clear{background: rgba(0,0,0,.08); color: var(--text-tbtn);}
.tbtn-clear:hover { background: #e0a800;color: var(--text-tbtn-hover); }
.tbtn-nobg{background:transparent;padding: 6px;gap: 0;color: var(--text);}
.tbtn-nobg:hover{background:transparent; color: #8447ff}
.tbtn-nobg i{ font-size:20px!important; }

.hidden { display: none !important; }

/* ===== 工具板块：输入 / 输出左右显示 ===== */
.editor-row { margin: 0 -5px; border-top: 1px solid var(--editor-border);}
.editor-row .col { padding: 0; box-sizing: border-box; }
.editor-row textarea {
    width: 100%; height: 460px; resize: vertical; box-sizing: border-box;
    font-family: Consolas, "Courier New", Monospace; font-size: 12px; line-height: 1.5;
    padding: 10px 10px 10px 15px;
    border:none;
    background: var(--editor-bg); color: var(--editor-text);
    transition: background .2s, color .2s, border-color .2s;
}
.editor-row textarea::placeholder { color: var(--muted); opacity: 1; }
.editor-row textarea:focus{outline: none;}
.editor-row pre {
    width: 100%; height: 460px; margin: 0; overflow: auto; box-sizing: border-box;
    background: var(--editor-bg);
    transition: background .2s, border-color .2s;
}
.editor-row code[class*="language-"] {
    font-family: Consolas, "Courier New", Monospace; font-size: 12px; line-height: 1.5;
    white-space: pre; word-break: break-all; background: none; color: var(--editor-text);
}
.editor-row .nodata{text-align: center; padding-top:200px}

/* 语法高亮样式 */
.hl-comment{color:var(--hl-comment)}
.hl-tagname{color:var(--hl-tagname)}
.hl-punct{color:var(--hl-punct)}
.hl-attr{color:var(--hl-attr)}
.hl-string{color:var(--hl-string)}
.hl-tpl{color:var(--hl-tpl);font-weight:bold}
.hl-keyword{color:var(--hl-tpl);font-weight:bold}
.hl-number{color:#e74c3c}

/* 滚动条 */
.editor-row textarea::-webkit-scrollbar,
.editor-row pre::-webkit-scrollbar {
  width:8px;
  height:8px;
}
.editor-row textarea::-webkit-scrollbar-track,
.editor-row pre::-webkit-scrollbar-track {
  background:var(--scrollbar-track);
}
.editor-row textarea::-webkit-scrollbar-thumb,
.editor-row pre::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
.editor-row textarea,
.editor-row pre {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===== 全屏状态（浏览器内部局部全屏：fixed 悬浮铺满视口，非 F11）===== */
body.fs-open { overflow: hidden; }
#toolPanel.fs-on {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    margin: 0; border: none; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column; background: var(--panel-bg);
}
#toolPanel.fs-on .panel-head { flex-shrink: 0; }
#toolPanel.fs-on .panel-body {
    flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
#toolPanel.fs-on .editor-row { flex: 1; display: flex; flex-flow: row nowrap; min-height: 0; }
#toolPanel.fs-on .editor-row .col {
    flex: 1 1 0; display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden;
}
/* 输入/输出区：height:0 + flex-grow:1 强制约束高度，内容多时出现滚动条 */
#toolPanel.fs-on .editor-row textarea,
#toolPanel.fs-on .editor-row pre {
    flex: 1 1 0; height: 0; min-height: 0; overflow: auto; resize: none;
}

/* ===== Split.js 拖拽分割条 ===== */
.gutter {
    background-color: var(--border);
    background-clip: padding-box;
    cursor: col-resize;
    transition: background-color .15s;
}
.gutter:hover,
.gutter.gutter-horizontal.active { background-color: var(--link); }
.gutter.gutter-horizontal { width: 6px; margin: 0 -3px; }

/* 小屏（<768px）：Split 销毁，两列堆叠为两行 */
@media (max-width: 767.98px) {
    .editor-row { flex-direction: column; }
    .editor-row .col { width: 100%; flex: 0 0 auto; }
    .editor-row textarea,
    .editor-row pre { height: 260px; }
    /* 全屏时小屏：上下各占一半高度 */
    #toolPanel.fs-on .editor-row { flex-direction: column; }
    #toolPanel.fs-on .editor-row .col { flex: 1 1 0; width: 100%; min-height: 0; }
}

.pr20 { padding: 0 20px 0 0; box-sizing: border-box;}/* 蓝色高光 */
.marker-blue { padding: 0em 0em; background-image: linear-gradient(90deg, rgb(145 87 255 / 65%), rgb(182 142 255 / 43%)); background-repeat: no-repeat; background-size: 100% 0.5em; background-position: 0 calc(100% - 0em); -webkit-box-decoration-break: clone; box-decoration-break: clone;}/* FAQ 手风琴样式 兼容IE11 */
.faq-wrap { max-width: 720px; margin: 0; padding: 0;}
.faq-title-h2 { font-size: 16px; text-align: left; margin-bottom: 20px; color: var(--text);}
.faq-item { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; overflow: hidden; background-color: var(--panel-bg);}
.faq-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; background-color: var(--panel-head-bg); cursor: pointer;}
.faq-header:hover { background-color: var(--bg);}
.faq-question { font-size: 12px; color: var(--text); margin: 0; padding-right: 10px;}/* 图标容器 */
.faq-icon-wrap { flex-shrink: 0; color: #444; font-size: 12px;}
.faq-panel { max-height: 0; overflow: hidden; transition: none;}
.faq-item.open .faq-panel { max-height: 1200px; transition: max-height 0.35s ease;}
.faq-answer { padding: 8px 10px; font-size: 12px; color: #555; line-height: 1.65;}/* ===== tool tab switch ===== */
.tool-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border,#e3e3e3); padding-bottom: .6rem;}
.tool-tab { padding: .4rem 1rem; border: 1px solid var(--border,#e3e3e3); border-radius: 999px; background: var(--panel-head-bg,#f4f5f7); color: var(--text,#333); font-size: .88rem; cursor: pointer; transition: all .18s ease;}
.tool-tab:hover { border-color: var(--link,#0366d6); color: var(--link,#0366d6);}
.tool-tab.active { color: #fff; background: linear-gradient(135deg, var(--link,#0366d6), #024ea6); border-color: transparent; box-shadow: 0 2px 10px rgba(3,102,214,.3);}
.tool-tab-panel { display: none;}
.tool-tab-panel.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .55rem;}
.tool-tab-panel .link-item { display: block; margin: 0;}
.tool-tab-panel a { display: flex; align-items: center; gap: .5rem; padding: .58rem .75rem; border: 1px solid var(--border,#e3e3e3); border-radius: 8px; background: var(--panel-bg,#fff); color: var(--text,#333); font-size: .88rem; line-height: 1.3; text-decoration: none; transition: all .18s ease; overflow: hidden; max-width: 100%;}
.tool-tab-panel a i { font-size: 1.05rem; color: var(--link,#0366d6); width: 1.25em; text-align: center; flex-shrink: 0; transition: transform .18s ease, color .18s ease;}
.tool-tab-panel a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;}
.tool-tab-panel a:hover { border-color: var(--link,#0366d6); color: var(--link,#0366d6); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(3,102,214,.16);}
.tool-tab-panel a:hover i { transform: scale(1.15);}/* ===== tool-content 折叠展开 ===== */
.tool-content-wrap { position: relative;}
.tool-content.collapsed { max-height: 669px; overflow: hidden;}
.tool-content.expanded { max-height: none;}
.tool-content-more { position: relative; margin-top: -140px; padding: 130px 0 20px; background: linear-gradient(180deg, transparent, var(--panel-bg,#fff) 72%); text-align: center; z-index: 1;}
.tool-content-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem 1.4rem; border: none; border-radius: 999px; color: #fff; font-size: .9rem; cursor: pointer; background: linear-gradient(135deg, var(--link,#0366d6), #024ea6); box-shadow: 0 2px 10px rgba(3,102,214,.3); transition: transform .15s ease, box-shadow .15s ease;}
.tool-content-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(3,102,214,.4);}

/* ===== 工具分类导航条（工具相关页面顶部） ===== */
.tool-cat-nav {
    background: var(--panel-bg);
    /*border-bottom: 1px solid var(--border);*/
    border-radius: 6px;
    /*box-shadow: 0 4px 14px rgba(0, 0, 0, .06);*/
    margin-bottom: 1.4rem;
    padding: 1.5rem 1rem;
}
.tool-cat-nav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: .1rem 16px;
}
.tool-cat-nav a {
    display: inline-flex;
    align-items: center;
    padding: .34rem .95rem;
    font-size: .88rem;
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    transition: all .18s ease;
}
.tool-cat-nav a:hover {
    color: var(--link);
    border-color: var(--link);
    background: var(--panel-head-bg);
    transform: translateY(-1px);
}
.tool-cat-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--link), #024ea6);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(3, 102, 214, .35);
    transform: translateY(-1px);
}