/* ==========================================
   万能工具箱 SaaS 工具公共样式
========================================== */


.tool-page {

    width:100%;

    max-width:1000px;

    margin:0 auto;

}




/* 顶部介绍 */

.tool-hero {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:26px 28px;

    margin-bottom:18px;

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

    border:1px solid #e2e8f0;

    border-radius:18px;

    box-shadow:
    0 8px 28px rgba(15,23,42,.06);

}



.tool-hero-main {

    display:flex;

    align-items:center;

    gap:18px;

}



.tool-icon {


    width:58px;

    height:58px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:16px;


    font-size:28px;


    background:#eef2ff;


    border:1px solid #e0e7ff;

}





.tool-eyebrow {


    font-size:12px;

    font-weight:700;

    color:#64748b;

}



.tool-title {


    margin:5px 0;


    font-size:27px;

    font-weight:750;

    color:#172033;

}



.tool-desc {


    color:#64748b;

    font-size:14px;

}



.tool-badge {


    padding:8px 14px;

    border-radius:999px;

    background:#f0fdf4;

    border:1px solid #bbf7d0;

    color:#15803d;

    font-size:12px;

}





/* 主卡片 */


.tool-card {


    background:#fff;


    border:1px solid #e5e7eb;


    border-radius:18px;


    overflow:hidden;


    box-shadow:
    0 8px 30px rgba(15,23,42,.06);


}



.tool-card-header {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:22px 26px;


    border-bottom:1px solid #eef0f3;


}



.tool-card-title {


    font-size:17px;

    font-weight:700;

}



.tool-card-subtitle {


    margin-top:5px;

    font-size:13px;

    color:#94a3b8;

}




.tool-step {


    padding:6px 12px;


    border-radius:999px;


    background:#f8fafc;


    border:1px solid #e2e8f0;


    font-size:12px;


}



.tool-card-body {


    padding:26px;

}




.tool-field {


    margin-bottom:22px;

}



.tool-label {


    display:block;

    margin-bottom:9px;

    font-size:13px;

    font-weight:700;

    color:#334155;

}





.tool-input,


.tool-select {


    width:100%;

    height:44px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid #dfe5ec;

    background:#fff;

}





.tool-section {


    margin-top:20px;

    padding:16px;


    background:#f8fafc;


    border:1px solid #eef2f7;


    border-radius:12px;


}





.tool-color-list {


    display:flex;

    gap:12px;

}



.tool-color {


    width:48px;

    height:34px;


    border-radius:8px;


    border:1px solid #ddd;


}



.tool-color.active {


    outline:3px solid #5b6ee1;


}





.tool-action-row {


    display:flex;

    justify-content:flex-end;


    margin-top:25px;


}



.tool-primary-btn {


    height:44px;

    padding:0 30px;


    border:none;


    border-radius:10px;


    background:
    linear-gradient(
        135deg,
        #5b6ee1,
        #6d5bd0
    );


    color:#fff;


    font-weight:700;


    cursor:pointer;


}





.tool-status {


    margin-top:20px;


    padding:15px;


    background:#f8fafc;


    border:1px solid #e8edf3;


    border-radius:12px;


    color:#475569;


}





.tool-notice {


    margin-top:18px;


    padding:14px;


    display:flex;

    gap:10px;


    background:#f8fafc;


    border:1px solid #e9eef4;


    border-radius:11px;


    color:#64748b;


    font-size:12px;


}