/* 全局样式 */
* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {width: 100%; background-color: #f5f5f5; font-family: "Microsoft Yahei", sans-serif;}
.container {width: 100%; max-width: 1200px; margin: 20px auto; padding: 0 15px;}

/* 工具盒子样式 */
.tool-box {background:#fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.08); padding:25px; margin-top:20px;}
.tool-title {font-size:18px; font-weight:600; color:#333; margin-bottom:20px;}

/* 输入区域样式 */
.input-group {display:flex; gap:10px; margin-bottom:15px; flex-wrap:wrap; align-items:center;}
.url-input {flex:1; min-width:200px; padding:10px 14px; border:1px solid #ddd; border-radius:4px; font-size:14px; outline:none;}
.url-input:focus {border-color:#28a745;}
.submit-btn {padding:10px 20px; border:none; border-radius:4px; background:#28a745; color:#fff; cursor:pointer;}
.reset-btn {padding:10px 20px; border:none; border-radius:4px; background:#dc3545; color:#fff; cursor:pointer;}
.submit-btn:hover {background:#218838;}
.reset-btn:hover {background:#bb2d3b;}

/* 表单控件样式 */
.form-control {padding:8px 12px; border:1px solid #ddd; border-radius:4px; font-size:14px; width:100%; margin-top:5px;}
.label {font-size:14px; color:#333; min-width:120px;}
.flex-col {display:flex; flex-direction:column; gap:5px; flex:1; min-width:200px;}
.auto-clear-box {display:flex; align-items:center; gap:5px; margin-left:10px; font-size:14px; color:#666;}
.auto-clear-box input {width:16px; height:16px; cursor:pointer;}
.custom-ua-input {display:none; margin-top:5px;}

/* 提示信息样式 */
.info {background:#e9f7ff; color:#005b96; padding:10px; border-radius:4px; margin:10px 0; font-size:13px;}
.error {color:#dc3545; background:#f8d7da; padding:10px; border-radius:4px; margin:10px 0; font-size:13px;}
.warning {background:#fff3cd; color:#856404; padding:10px; border-radius:4px; margin:10px 0; font-size:13px;}

/* 内容区域样式 */
.code-toolbar {display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.code-btn {padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:14px;}
.btn-copy {background:#6c757d; color:#fff;}
.btn-line {background:#17a2b8; color:#fff;}
.btn-download {background:#007bff; color:#fff;}
.btn-copy:hover {background:#5a6268;}
.btn-line:hover {background:#138496;}
.btn-download:hover {background:#0056b3;}

.code-box {
    background:#1e1e1e;
    color:#d4d4d4;
    padding:15px;
    border-radius:6px;
    overflow-x:auto;
    max-height:650px;
    overflow-y:auto;
    font-size:13px;
    line-height:1.6;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    min-height: 100px;
    margin-bottom: 15px; /* 头部和代码之间的间距 */
}
.text-box {
    background:#f8f9fa;
    border:1px solid #ddd;
    padding:15px;
    border-radius:6px;
    max-height:650px;
    overflow-y:auto;
    font-size:14px;
    line-height:1.8;
    min-height: 100px;
}
.code-box pre {margin:0; white-space:pre;}
.line-numbers {counter-reset:line;}
.line-numbers code {display:block; counter-increment:line;}
.line-numbers code::before {
    content:counter(line);
    display:inline-block;
    width:45px;
    text-align:right;
    padding-right:15px;
    color:#858585;
    user-select:none;
}

/* ========== 红绿搭配高亮样式（作用域隔离） ========== */
/* HTTP头高亮 - 仅作用于headerArea */
#headerArea .html-highlight {
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#headerArea .http-header { color: #34c759; }
#headerArea .http-value { color: #ff5858; }

/* HTML代码高亮 - 仅作用于contentCode */
#contentCode.html-highlight {
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#contentCode .html-tag { color: #34c759; font-weight: 500; }
#contentCode .html-attr { color: #86e191; }
#contentCode .html-value { color: #ff5858; }
#contentCode .html-comment { color: #9fad7a; }
#contentCode .html-doctype { color: #a0a0a0; }
#contentCode .html-text { color: #e0e0e0; }

/* ========== 工具导航 ========== */
.tool-nav-card {
    margin: 20px auto;
    padding: 15px;
    width: 83%;
    max-width: 1920px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    box-sizing: border-box;
}
.tool-nav-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}