/* =====================================================
   万能工具箱 - 工具页面统一 SaaS 样式
   tool-page.css
===================================================== */



/* ===============================
   页面容器
================================ */

.tool-wrapper{

    max-width:1000px;

    margin:0 auto;

    padding-bottom:40px;

}



/* ===============================
   工具顶部 Hero
================================ */

.tool-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:30px;

    padding:28px 30px;

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #ffffff
    );

    border-radius:22px;

    border:1px solid #dbeafe;

}



.tool-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:#2563eb;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    box-shadow:
    0 10px 25px rgba(37,99,235,.25);

}



.tool-header h1{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:#1e293b;

}



.tool-header p{

    margin-top:8px;

    margin-bottom:0;

    color:#64748b;

    font-size:15px;

}



/* ===============================
   工具卡片
================================ */

.tool-card{


    background:white;


    border-radius:22px;


    padding:32px;


    margin-bottom:25px;


    border:

    1px solid #e2e8f0;


    box-shadow:

    0 8px 25px rgba(15,23,42,.08);


    transition:.2s;


}



.tool-card:hover{


    box-shadow:


    0 12px 35px rgba(15,23,42,.12);


}





/* ===============================
   卡片标题
================================ */


.card-title{


    font-size:20px;


    font-weight:700;


    color:#1e293b;


}



.card-desc{


    margin-top:8px;


    margin-bottom:22px;


    color:#64748b;


    font-size:14px;


}





/* ===============================
   输入框
================================ */

textarea{


    width:100%;


    box-sizing:border-box;


    padding:18px;


    border-radius:16px;


    border:

    1px solid #cbd5e1;


    background:#f8fafc;


    font-size:15px;


}



textarea:focus{


    outline:none;


    background:white;


    border-color:#2563eb;


    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);


}




input[type=file]{


    padding:12px;


    border-radius:12px;


    border:

    1px solid #cbd5e1;


    background:#f8fafc;


}





/* ===============================
   设置区域
================================ */

.setting-row{


    margin:25px 0;


}



.setting-item label{


    display:block;


    margin-bottom:10px;


    font-weight:600;


    color:#334155;


}



select{


    width:220px;


    padding:12px 15px;


    border-radius:12px;


    border:

    1px solid #cbd5e1;


    background:white;


    font-size:15px;


}





/* ===============================
   按钮
================================ */

button{


    border:none;


    cursor:pointer;


    font-size:15px;


    font-weight:600;


    transition:.2s;


}



.btn-primary{


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );


    color:white;


    padding:14px 35px;


    border-radius:14px;


    box-shadow:

    0 8px 20px rgba(37,99,235,.25);


}



.btn-primary:hover{


    transform:

    translateY(-2px);


}



.btn-success{


    background:

    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );


    color:white;


    padding:13px 32px;


    border-radius:14px;


}





/* ===============================
   二维码 / 图片预览区域
================================ */


.preview-box{


    display:flex;


    justify-content:center;


    align-items:center;


    padding:35px;


    margin-top:25px;


    background:#f8fafc;


    border-radius:20px;


    border:

    1px solid #e2e8f0;


}




.qr-preview{


    padding:35px;


    background:white;


    border-radius:20px;


    border:

    1px solid #e2e8f0;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


}





/* ===============================
   响应式
================================ */

@media(max-width:768px){


    .tool-header{


        padding:20px;


    }


    .tool-icon{


        width:55px;

        height:55px;

        font-size:28px;


    }


    .tool-header h1{


        font-size:24px;


    }


    .tool-card{


        padding:20px;


    }


}