/* ---------------------------------------------------------------------------------------

* 2025-08-08 更多在线工具尽在 tuyuanma.com
* 
* 兔源码网站制作，Discuz导航模板
* 
* 站长交流群：493651246  作者QQ：3197813386

--------------------------------------------------------------------------------------- */

.tool-content-body{border:1px solid #006abe;border-radius:4px;padding:1em;}
.tool-content-body .input-section{background-color:#ffffff;border-radius:12px;box-shadow:0 3px 15px #ebebeb;padding:1.2rem;}
.tool-content-body .input-section h1{text-align:center;font-family:inherit;font-weight:500;line-height:1.1;font-size:36px;border-bottom:1px solid rgb(240,240,240);margin-bottom:1rem;padding-bottom:1rem;}
.tool-content-body .input-section .input-group{display:flex;flex-direction:column;gap:1rem;}
.tool-content-body .input-section strong{font-size:1.1rem;color:#333;padding:0.3rem 0;display:inline-block;font-weight:600;}
.tool-content-body .input-section .input-control{display:flex;gap:0.8rem;align-items:center;width:100%;}
.tool-content-body .input-section .input-control input{flex:1;padding:0.9rem 1.2rem;border:1px solid #ebebeb;box-sizing:border-box;border-radius:8px;font-size:1rem;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background-color:#fafafa;}
.tool-content-body .input-section .input-control input::placeholder{color:#b0b0b0;font-size:0.95rem;}
.tool-content-body .input-section .input-control input:focus{outline:none;border-color:#2d8cf0;background-color:#ffffff;box-shadow:0 0 0 3px rgba(45,140,240,0.1);}
.tool-content-body .input-section .input-control button{padding:0.9rem 1.8rem;background-color:#2d8cf0;color:white;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap;}
.tool-content-body .input-section .input-control button:hover{background-color:#1e78e5;transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,140,240,0.2);}
.tool-content-body .input-section .input-control button:active{transform:translateY(0);box-shadow:0 2px 8px rgba(45,140,240,0.2);}

.tool-content-body #result table{width:100%;border-collapse:separate;background-color:#ffffff;border-radius:12px;box-shadow:0 3px 15px #ebebeb;margin:1rem 0;padding:1.2rem;}
.tool-content-body #result th{line-height:3;width:33.3333333%;background-color:#ebebeb;border-radius:4px;text-align:center;font-size:16px;}
.tool-content-body #result td{text-align:center;vertical-align:middle;}
.tool-content-body #result img{max-width:200px;width:100%;margin-top:1.8em;height:auto;border-radius:4px;transition:all .3s ease;cursor:pointer;}

.tool-content-body .panel{padding:1.5rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #ebebeb;}
.tool-content-body .panel .panel-heading{font-size:1.2rem;font-weight:600;color:#333;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #ebebeb;}
.tool-content-body .panel .panel-body p{color:#666;line-height:1.8;}
.tool-content-body .panel .panel-heading a,.tool-content-body .panel .panel-body a{text-decoration:none;}
.tool-content-body .panel .panel-body .xiazai {margin:10px 0;display:flex;gap:10px;flex-wrap:wrap;}
.tool-content-body .panel .panel-body .xiazai .kuake {background-color:#0d53ff;width:10%;line-height:3;text-align:center;color:#fff;border-radius:4px;}
.tool-content-body .panel .panel-body .xiazai .baidu {background-color:#06a7ff;width:10%;line-height:3;text-align:center;color:#fff;border-radius:4px;}
.tool-content-body .panel .panel-body .xiazai .uc {background-color:#12161a;width:10%;line-height:3;text-align:center;color:#fff;border-radius:4px;}
.tool-content-body .panel .panel-body .xiazai .kuake:hover,.tool-content-body .panel .panel-body .xiazai .baidu:hover,.tool-content-body .panel .panel-body .xiazai .uc:hover{opacity:.8;}

.img-zoom-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:center;}
.img-zoom-modal .img-zoom-content{max-width:90%;max-height:90%;position:relative;}
.img-zoom-modal .img-zoom-content img{max-width:100%;max-height:80vh;}
.img-zoom-modal .img-zoom-content .img-zoom-close{position:absolute;top:-30px;right:-30px;color:white;font-size:24px;cursor:pointer;}

@media (max-width:768px){
  .tool-content-body{padding:.5rem;}
  .tool-content-body .input-section h1{font-size:20px;}
  .tool-content-body .input-section .input-control{flex-direction:column;gap:.9rem;}
  .tool-content-body .input-section .input-control input{width:100%;padding:.85rem 1rem;}
  .tool-content-body .input-section .input-control button{width:100%;padding:.85rem 1rem;justify-content:center;}
  .tool-content-body #result thead{border-spacing:.5rem;display:none;}
  .tool-content-body #result table{padding:.5rem 0;border-collapse:initial;}
  .tool-content-body #result img{margin-top:0em;}
  .tool-content-body #result td{display:block;width:100%;}
  .tool-content-body #result td:nth-child(1):before{content:"QQ头像";display:block;margin-bottom:.5rem;border-radius:4px;text-align:center;font-size:16px;}
  .tool-content-body #result td:nth-child(2):before{content:"QQ邮箱头像";display:block;margin-bottom:.5rem;border-radius:4px;text-align:center;font-size:16px;}
  .tool-content-body #result td:nth-child(3):before{content:"QQ空间头像";display:block;margin-bottom:.5rem;border-radius:4px;text-align:center;font-size:16px;}
  .tool-content-body .panel .panel-body .xiazai{justify-content:center;align-items:center;}
  .tool-content-body .panel .panel-body .xiazai .kuake,.tool-content-body .panel .panel-body .xiazai .baidu,.tool-content-body .panel .panel-body .xiazai .uc{width:30%;}
}