/* Tools — Tabs */
.tab-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.tab-btn{
  padding:.5rem 1rem;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--text-dim);cursor:pointer;
  font-size:.85rem;font-family:var(--sans);transition:all .2s;
}
.tab-btn:hover{border-color:var(--accent);color:var(--text)}
.tab-btn.active{border-color:var(--accent);color:var(--accent);background:var(--green-dim)}

/* Tools — Panels & Sections */
.tool-panel{display:none;animation:fadeUp .6s .2s ease both}
.tool-panel.active{display:block}
.tool-section{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}
.tool-section h3{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--accent)}

/* Tools — Form Elements */
.input-group{display:flex;gap:.75rem;margin-bottom:.75rem;align-items:center;flex-wrap:wrap}
.input-group label{font-size:.85rem;color:var(--text-dim);min-width:80px}
input[type="text"],input[type="number"],textarea,select{
  background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-family:var(--mono);font-size:.85rem;
  padding:.5rem .75rem;width:100%;outline:none;transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{min-height:150px;resize:vertical;font-size:.8rem;line-height:1.5}
button{
  padding:.5rem 1.2rem;border:1px solid var(--accent);border-radius:6px;
  background:transparent;color:var(--accent);cursor:pointer;
  font-size:.85rem;font-family:var(--sans);transition:all .2s;
}
button:hover{background:var(--accent);color:#fff}
button:active{transform:scale(.97)}
.btn-row{display:flex;gap:.5rem;margin:.75rem 0}
.result-box{
  background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;
  padding:.75rem 1rem;font-family:var(--mono);font-size:.8rem;
  color:var(--accent);min-height:2.5rem;word-break:break-all;white-space:pre-wrap;
}
.result-box:empty::before{content:'结果将显示在这里...';color:var(--text-dim)}
.hint{font-size:.75rem;color:var(--text-dim);margin-top:.5rem}

/* Tools — Mobile */
@media(max-width:640px){
  .input-group{flex-direction:column;align-items:stretch}
  .input-group label{min-width:auto}
  .tab-btn{font-size:.75rem;padding:.4rem .7rem}
}