/* 搬运工具的 UI 兼容层（toolslib）
   工具包页面使用 Bootstrap3 类名（form-control / table / button / input / select / group 等），
   本文件把常用类名映射到本站 UI 变量，避免引入整套 Bootstrap。
   仅被「搬运来的工具页」引用，不影响本站其它页面。 */

.tl-page .form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--tl-text);
    background: var(--tl-bg, #fff);
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    transition: border-color .15s;
    font-family: inherit;
}
.tl-page .form-control:focus {
    outline: none;
    border-color: var(--tl-main);
    box-shadow: 0 0 0 3px var(--tl-soft, rgba(0, 0, 0, .05));
}
.tl-page textarea.form-control {
    min-height: 150px;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
}
.tl-page textarea.form-control.code {
    font-family: ui-monospace, Consolas, Menlo, monospace;
    font-size: .88rem;
}
.tl-page .input,
.tl-page input.input {
    padding: 7px 10px;
    font-size: .9rem;
    color: var(--tl-text);
    background: var(--tl-bg, #fff);
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    font-family: inherit;
    min-width: 120px;
}
.tl-page .select,
.tl-page select.select,
.tl-page select.form-control {
    padding: 7px 10px;
    font-size: .9rem;
    color: var(--tl-text);
    background: var(--tl-bg, #fff);
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
    height: auto;
    width: auto;
    min-width: 92px;
}
.tl-page .button,
.tl-page button.button,
.tl-page a.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: .9rem;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--tl-main) 0%, var(--tl-main2, var(--tl-main)) 100%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .1s;
}
.tl-page .button:hover { filter: brightness(1.07); }
.tl-page .button:active { transform: translateY(1px); }
.tl-page .button i { font-style: normal; }
.tl-page .group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}
.tl-page .group.fullwidth { width: 100%; }
.tl-page .static {
    color: var(--tl-muted);
    font-size: .85rem;
    white-space: nowrap;
}
.tl-page .mt-2 { margin-top: 10px; }
.tl-page .mt1, .tl-page .mt-1 { margin-top: 6px; }
.tl-page .tl-tool table { width: 100%; border-collapse: collapse; }
.tl-page .tl-tool table td, .tl-page .tl-tool table th { padding: 8px 10px; border-bottom: 1px solid var(--tl-line); }
.tl-page .tl-tool table th { background: var(--tl-soft); font-weight: 600; }
.tl-page .tl-tool > .tl-block > p:first-child { margin-top: 0; }
.tl-page .tl-tool .hint, .tl-page .tl-tool .tips { color: var(--tl-muted); font-size: .85rem; }
.tl-page .tl-tool img { max-width: 100%; height: auto; }

/* 夜间模式（站点变量已在 dark-mode 下重定义，这里补齐输入类与按钮） */
html.dark-mode .tl-page .form-control,
html.dark-mode .tl-page .input,
html.dark-mode .tl-page .select { background: var(--soft2, #1d2726); color: #d6e6e2; }

/* ============================================================
   Bootstrap 类名映射（搬运工具 UI 大量使用 btn / btn-* / form-group / row / col-* / table 等）
   ============================================================ */
.tl-page .btn {
    display: inline-block; padding: 7px 14px; margin: 0 4px 4px 0; font-size: .88rem; line-height: 1.5;
    color: #fff; background: linear-gradient(135deg, var(--tl-main) 0%, var(--tl-main2, var(--tl-main)) 100%);
    border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-align: center;
    text-decoration: none; font-family: inherit; transition: filter .15s, transform .1s; vertical-align: middle;
}
.tl-page .btn:hover { filter: brightness(1.07); color: #fff; }
.tl-page .btn:active { transform: translateY(1px); }
.tl-page .btn:disabled, .tl-page .btn.disabled { opacity: .55; cursor: not-allowed; }
.tl-page .btn-success { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.tl-page .btn-primary { background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); }
.tl-page .btn-danger  { background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); }
.tl-page .btn-warning { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
.tl-page .btn-info    { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.tl-page .btn-default { background: var(--tl-bg, #fff); color: var(--tl-text); border-color: var(--tl-line); }
.tl-page .btn-default:hover { color: var(--tl-text); filter: none; background: var(--tl-soft, rgba(0, 0, 0, .04)); }
.tl-page .btn-sm { padding: 4px 10px; font-size: .8rem; }
.tl-page .btn-lg { padding: 10px 20px; font-size: 1rem; }
.tl-page .btn-block { display: block; width: 100%; margin-right: 0; }

.tl-page .form-group { margin-bottom: 12px; }
.tl-page .control-label, .tl-page .form-group > label {
    display: block; margin-bottom: 5px; font-size: .85rem; color: var(--tl-muted); font-weight: 500;
}
.tl-page .form-text, .tl-page .help-block { color: var(--tl-muted); font-size: .8rem; margin-top: 4px; }
.tl-page .row { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.tl-page .row > [class*="col-"] { padding: 0 6px; box-sizing: border-box; }
.tl-page .col-md-12, .tl-page .col-sm-12, .tl-page .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.tl-page .col-md-6, .tl-page .col-sm-6, .tl-page .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.tl-page .col-md-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.tl-page .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.tl-page .col-md-3 { flex: 0 0 25%; max-width: 25%; }
.tl-page .col-md-offset-3 { margin-left: 25%; }
@media (max-width: 680px) {
    .tl-page .col-md-6, .tl-page .col-sm-6, .tl-page .col-xs-6,
    .tl-page .col-md-4, .tl-page .col-md-3, .tl-page .col-md-8 { flex: 0 0 100%; max-width: 100%; }
    .tl-page .col-md-offset-3 { margin-left: 0; }
}

.tl-page .table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .88rem; }
.tl-page .table > tbody > tr > td, .tl-page .table > thead > tr > th,
.tl-page .table > tr > td { padding: 8px 10px; border-bottom: 1px solid var(--tl-line); vertical-align: top; }
.tl-page .table > thead > tr > th { background: var(--tl-soft, rgba(0, 0, 0, .03)); font-weight: 600; }
.tl-page .table-bordered { border: 1px solid var(--tl-line); }
.tl-page .table-bordered > tbody > tr > td, .tl-page .table-bordered > thead > tr > th { border: 1px solid var(--tl-line); }
.tl-page .table-striped > tbody > tr:nth-child(odd) > td { background: rgba(0, 0, 0, .015); }
.tl-page .table td[align="center"], .tl-page .table th[align="center"] { text-align: center; }

.tl-page .text-center { text-align: center; }
.tl-page .text-left { text-align: left; }
.tl-page .text-right { text-align: right; }
.tl-page .small, .tl-page small { font-size: .82rem; color: var(--tl-muted); }
.tl-page .muted { color: var(--tl-muted); }
.tl-page .pull-left { float: left; }
.tl-page .pull-right { float: right; }
.tl-page .clearfix::after { content: ''; display: table; clear: both; }
.tl-page .hidden { display: none !important; }
.tl-page .nowrap { white-space: nowrap; }
.tl-page .resizable { resize: vertical; overflow: auto; }
.tl-page .label {
    display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: .78rem;
    background: var(--tl-soft, rgba(0, 0, 0, .05)); color: var(--tl-text);
}

/* ============================================================
   工具包自带类名（insertSection / outputSection / form-field / cell / word-count 等）
   ============================================================ */
.tl-page .insertSection, .tl-page .outputSection { margin: 10px 0; }
.tl-page .insertSection > p, .tl-page .outputSection > p { margin: 6px 0; color: var(--tl-muted); font-size: .85rem; }
.tl-page .cell { padding: 6px 8px; }
.tl-page .form-block, .tl-page .tool-form { display: block; width: 100%; }
.tl-page .form-field { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.tl-page .form-field > label { margin: 0; color: var(--tl-muted); font-size: .85rem; }
.tl-page .form-btn, .tl-page .operation-btn { margin: 6px 6px 6px 0; }
.tl-page .btn-copy { background: var(--tl-bg, #fff); color: var(--tl-text); border: 1px solid var(--tl-line); }
.tl-page .btn-copy:hover { background: var(--tl-soft); filter: none; color: var(--tl-text); }
.tl-page .word-count { color: var(--tl-muted); font-size: .8rem; }
.tl-page .tool-links a, .tl-page .tool-sub a, .tl-page .links a { color: var(--tl-main); text-decoration: none; }
.tl-page .tool-links a:hover, .tl-page .tool-sub a:hover, .tl-page .links a:hover { text-decoration: underline; }
.tl-page form { margin: 0; }
.tl-page fieldset { border: 1px solid var(--tl-line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.tl-page legend { padding: 0 6px; font-size: .88rem; color: var(--tl-muted); }

/* ============================================================
   基础标签：让搬运来的 UI 与站内排版一致
   ============================================================ */
.tl-page .tl-tool h1, .tl-page .tl-tool h2, .tl-page .tl-tool h3,
.tl-page .tl-tool h4, .tl-page .tl-tool h5, .tl-page .tl-tool h6 {
    color: var(--tl-text); line-height: 1.4; margin: 12px 0 8px; font-weight: 600;
}
.tl-page .tl-tool h1 { font-size: 1.28rem; }
.tl-page .tl-tool h2 { font-size: 1.12rem; }
.tl-page .tl-tool h3 { font-size: 1rem; }
.tl-page .tl-tool h4, .tl-page .tl-tool h5, .tl-page .tl-tool h6 { font-size: .93rem; }
.tl-page .tl-tool p { margin: 8px 0; line-height: 1.75; }
.tl-page .tl-tool ul, .tl-page .tl-tool ol { margin: 8px 0 8px 1.35em; padding: 0; }
.tl-page .tl-tool li { margin: 4px 0; line-height: 1.7; }
.tl-page .tl-tool label { color: var(--tl-text); }
.tl-page .tl-tool a { color: var(--tl-main); }
.tl-page .tl-tool hr { border: 0; border-top: 1px dashed var(--tl-line); margin: 14px 0; }
.tl-page .tl-tool code, .tl-page .tl-tool pre {
    font-family: ui-monospace, Consolas, Menlo, monospace; font-size: .86rem;
    background: var(--tl-soft, rgba(0, 0, 0, .04)); border-radius: 6px; color: var(--tl-text);
}
.tl-page .tl-tool code { padding: 2px 5px; }
.tl-page .tl-tool pre { padding: 10px 12px; overflow: auto; line-height: 1.6; }
.tl-page .tl-tool pre code { padding: 0; background: none; }
.tl-page .tl-tool blockquote {
    margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--tl-main);
    background: var(--tl-soft); color: var(--tl-muted);
}
.tl-page .tl-tool img { max-width: 100%; height: auto; border-radius: 8px; }
.tl-page .tl-tool textarea { line-height: 1.6; }
.tl-page .tl-tool input[type="checkbox"], .tl-page .tl-tool input[type="radio"] {
    width: auto; min-width: 0; margin-right: 4px;
}
/* 工具区里偶发的大块留白与超宽元素 */
.tl-page .tl-tool > .tl-block > br:last-child { display: none; }
.tl-page .tl-tool iframe { max-width: 100%; border: 1px solid var(--tl-line); border-radius: 8px; }
.tl-page .tl-tool canvas { max-width: 100%; }

/* 夜间模式补充 */
html.dark-mode .tl-page .btn-default,
html.dark-mode .tl-page .btn-copy { background: var(--soft2, #1d2726); color: #d6e6e2; border-color: var(--line2, #2a2f38); }
html.dark-mode .tl-page .table > thead > tr > th { background: rgba(255, 255, 255, .04); }
html.dark-mode .tl-page .table-striped > tbody > tr:nth-child(odd) > td { background: rgba(255, 255, 255, .03); }
html.dark-mode .tl-page .tl-tool code, html.dark-mode .tl-page .tl-tool pre { background: rgba(255, 255, 255, .06); }
html.dark-mode .tl-page .label { background: rgba(255, 255, 255, .08); }
html.dark-mode .tl-page .label { background: rgba(255, 255, 255, .08); }

/* ============================================================
   统一动作行（pkg 搬运工具通用）
   ============================================================ */
.tl-page .tl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.tl-page .tl-acts .btn { margin: 0; }
.tl-page .tl-acts .btn-default { background: var(--tl-bg, #fff); color: var(--tl-text); border: 1px solid var(--tl-line); }
.tl-page .tl-acts .btn-default:hover { background: var(--tl-soft); filter: none; color: var(--tl-text); }
html.dark-mode .tl-page .tl-acts .btn-default { background: var(--soft2, #1d2726); color: #d6e6e2; border-color: var(--line2, #2a2f38); }
.tl-page .tl-err { color: #dc2626; }
.tl-page .tl-ok { color: #0f766e; }
html.dark-mode .tl-page .tl-ok { color: #5eead4; }

/* ============================================================
   搬运页补充兼容：panel 卡片 / 裸表单控件 / alert / list-group
   （搬运器产出页面常用 Bootstrap 类名与无 class 的 input、button，
     在此统一映射，避免每个工具页各写一段 <style>）
   ============================================================ */
.tl-page .panel {
    border: 1px solid var(--tl-line);
    border-radius: 12px;
    background: var(--tl-bg, #fff);
    margin: 0 0 14px;
    overflow: hidden;
}
.tl-page .panel-body { padding: 14px 16px; }
.tl-page .panel-body + .panel-body { border-top: 1px dashed var(--tl-line); }
.tl-page .panel-heading {
    padding: 10px 16px;
    border-bottom: 1px solid var(--tl-line);
    background: var(--tl-soft, rgba(0, 0, 0, .03));
    font-weight: 600;
}
.tl-page .panel .result { margin: 14px 0 6px; font-weight: 600; color: var(--tl-text); }
.tl-page .panel > .table { margin: 0; }

/* 裸表单控件（无 class 时也有基本样式） */
.tl-page .tl-tool input[type="text"],
.tl-page .tl-tool input[type="number"],
.tl-page .tl-tool input[type="search"],
.tl-page .tl-tool input[type="url"],
.tl-page .tl-tool input[type="email"],
.tl-page .tl-tool input[type="password"],
.tl-page .tl-tool select,
.tl-page .tl-tool textarea {
    box-sizing: border-box;
    padding: 8px 11px;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--tl-text);
    background: var(--tl-bg, #fff);
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    font-family: inherit;
    max-width: 100%;
}
.tl-page .tl-tool input[type="text"]:focus,
.tl-page .tl-tool input[type="number"]:focus,
.tl-page .tl-tool select:focus,
.tl-page .tl-tool textarea:focus {
    outline: none;
    border-color: var(--tl-main);
    box-shadow: 0 0 0 3px var(--tl-soft, rgba(0, 0, 0, .05));
}
.tl-page .tl-tool textarea { min-height: 120px; resize: vertical; }

/* 裸按钮（无 class 的 button / input[type=button|submit]） */
.tl-page .tl-tool > .tl-block button:not([class]),
.tl-page .tl-tool .panel-body button:not([class]),
.tl-page .tl-tool input[type="button"]:not([class]),
.tl-page .tl-tool input[type="submit"]:not([class]) {
    margin: 8px 0 0;
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--tl-main);
    color: #fff;
    font-size: .93rem;
    font-family: inherit;
    cursor: pointer;
}
.tl-page .tl-tool .panel-body button:not([class]):hover { filter: brightness(1.07); }

/* alert / list-group / 工具类 */
.tl-page .alert {
    margin: 8px 0;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--tl-line);
    background: var(--tl-soft, rgba(0, 0, 0, .03));
    color: var(--tl-text);
    font-size: .88rem;
}
.tl-page .alert-success { background: rgba(15, 118, 110, .08); border-color: rgba(15, 118, 110, .25); }
.tl-page .alert-info { background: rgba(14, 116, 144, .08); border-color: rgba(14, 116, 144, .25); }
.tl-page .alert-warning { background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .25); }
.tl-page .alert-error, .tl-page .alert-danger { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); }
.tl-page .list-group { display: block; margin: 10px 0; }
.tl-page .list-group-item {
    padding: 9px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--tl-line);
    border-radius: 8px;
    background: var(--tl-bg, #fff);
}
.tl-page .hide { display: none !important; }
.tl-page .inline { display: inline; }
.tl-page .checkbox-inline { display: inline-flex; align-items: center; margin: 0 12px 6px 0; }
.tl-page .glyphicon { font-family: inherit; font-style: normal; }
.tl-page .glyphicon-volume-up::before { content: '🔊'; }
html.dark-mode .tl-page .panel { background: var(--soft2, #1d2726); border-color: var(--line2, #2a2f38); }
html.dark-mode .tl-page .panel-heading { background: rgba(255, 255, 255, .04); }
html.dark-mode .tl-page .list-group-item { background: var(--soft2, #1d2726); border-color: var(--line2, #2a2f38); }