/* ==========================================================================
 * 久思工具箱 - 独立样式（不改动主站 styles.css）
 * 依赖 styles.css 里的全局变量与 topbar/footer/tool-icon 等基础类
 * ========================================================================== */

/* ---- 工具箱首页卡片栅格 ---- */
.toolbox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tbox-card{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink)}
.tbox-card:hover{border-color:#a8c7f1;box-shadow:0 6px 18px rgba(23,105,209,.09)}
.tbox-card .tool-icon{width:44px;height:44px;font-size:17px}
.tbox-card h3{margin:2px 0 0;font-size:16px;line-height:1.3}
.tbox-card p{margin:0;color:var(--muted);font-size:12.5px;flex:1}
.tbox-tag{font-size:11px;color:var(--blue);background:#f1f6ff;border-radius:4px;padding:3px 7px;align-self:flex-start;font-weight:650}

/* ---- 工具页通用布局 ---- */
.tmain{padding:36px 0 80px;max-width:1000px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-top:16px}
.tcard h1{font-size:30px;margin:0 0 6px;line-height:1.2}
.tsub{color:var(--muted);margin:0 0 20px;font-size:14px}

/* ---- 表单 ---- */
.tform{display:grid;gap:14px}
.tform label{display:grid;gap:6px;font-size:13px;font-weight:650;color:var(--ink)}
.tform input,.tform textarea,.tform select{border:1px solid #becbd6;border-radius:6px;padding:10px;font:inherit;background:#fff;color:var(--ink);width:100%;box-sizing:border-box}
.tform input:focus,.tform textarea:focus,.tform select:focus{outline:2px solid #a8c7f1;outline-offset:0;border-color:var(--blue)}
.tform textarea{min-height:120px;resize:vertical;line-height:1.6}
.tform textarea.tall{min-height:200px}
.tform small{font-weight:400;color:var(--muted)}
.trow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tactions .primary-button,.tactions .outline-button{cursor:pointer}

/* ---- 统计卡 ---- */
.tstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:16px}
.tstats div{background:#f7f9fb;border:1px solid var(--line);border-radius:6px;padding:12px}
.tstats strong{display:block;font-size:22px;word-break:break-all}
.tstats span{font-size:11px;color:var(--muted)}

/* ---- 生成结果条目 ---- */
.toutput{margin-top:16px;display:grid;gap:10px}
.titem{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:#fbfdff;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.titem p{margin:0;font-size:14px;line-height:1.7;word-break:break-word;flex:1;white-space:pre-wrap}
.titem small{display:block;color:var(--muted);font-size:11px;margin-top:6px}
.tcopy{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--ink);font:inherit}
.tcopy:hover{border-color:var(--blue);color:var(--blue)}
.tcopy.ok{border-color:#0b7d68;color:#0b7d68;background:#e6f7f2}

/* ---- 提示与告警 ---- */
.tnote{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.7}
.twarn{font-size:12px;color:#a46306;background:#fff8e8;border:1px solid #f0ddb0;border-radius:6px;padding:9px 12px;margin:12px 0 0;line-height:1.7}
.tdanger{font-size:12px;color:#a23d3d;background:#fff4f4;border:1px solid #e7bcbc;border-radius:6px;padding:9px 12px;margin:12px 0 0;line-height:1.7}

/* ---- 底部说明文档（SEO 内容区）---- */
.tdoc{font-size:14px;color:var(--muted);line-height:1.85}
.tdoc h2{font-size:18px;color:var(--ink);margin:0 0 10px}
.tdoc h3{font-size:15px;color:var(--ink);margin:18px 0 6px}
.tdoc p,.tdoc li{margin:0 0 8px}
.tdoc ul,.tdoc ol{padding-left:20px;margin:0}
.tdoc strong{color:var(--ink)}

/* ---- 文本对比高亮（去重工具）---- */
.duphl{background:#ffe3b8;border-radius:3px;padding:0 1px}
.dupbox{border:1px solid var(--line);border-radius:6px;background:#fbfdff;padding:12px 14px;font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;margin-top:10px}
.dupbox:empty{display:none}

/* ---- 图片压缩工具 ---- */
.tfile-drop{border:2px dashed #b9c7d4;border-radius:var(--radius);background:#f7fafc;padding:26px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer}
.tfile-drop:hover{border-color:var(--blue);color:var(--blue)}
.tfile-drop input{display:none}
.timg-list{display:grid;gap:12px;margin-top:14px}
.timg-row{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:10px;background:#fff}
.timg-row img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#f0f0f0}
.timg-meta{min-width:0}
.timg-meta strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timg-meta small{color:var(--muted);font-size:11px}
.timg-meta .tsize-ok{color:#0b7d68;font-weight:700}
.timg-meta .tsize-bad{color:#a23d3d;font-weight:700}

/* ---- 响应式 ---- */
@media(max-width:900px){.toolbox-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .toolbox-grid{grid-template-columns:1fr}
  .tcard{padding:18px}
  .tcard h1{font-size:24px}
  .timg-row{grid-template-columns:56px 1fr}
  .timg-row img{width:56px;height:56px}
}

/* ---- AI 工具（BYO API）---- */
.tai-panel{border:1px solid #cfe0f4;background:#f7fbff;border-radius:6px;padding:12px 16px;margin-bottom:16px}
.tai-panel summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--blue)}
.tai-out{margin-top:16px;border:1px solid var(--line);border-radius:6px;background:#fbfdff;padding:14px 16px;font-size:14px;line-height:1.9;white-space:pre-wrap;word-break:break-word;min-height:120px;max-height:520px;overflow:auto}
.tai-out:empty::before{content:"生成结果会流式出现在这里…";color:var(--muted);font-size:12px}
.tai-meta{font-size:11px;color:var(--muted);margin-top:8px}