/* =========================================================
   UNIVERSAL TOOL ARTICLE
   USED BY ALL TOOLS
========================================================= */


/* =========================================================
   TOOL CONTENT COMPONENT
========================================================= */

#tool-content-component {
    width: 100%;

    margin-top: 40px;
}


/* =========================================================
   TOOL CONTENT LAYOUT
========================================================= */

.tool-content-layout {
    display: flex;

    align-items: flex-start;

    gap: 28px;

    width: 100%;
}


/* =========================================================
   POPULAR TOOLS SIDEBAR
========================================================= */

.popular-tools {
    width: 280px;

    min-width: 280px;

    flex-shrink: 0;

    position: sticky;

    top: 20px;
}


.popular-box {
    padding: 24px;
}


.popular-title {
    margin-bottom: 22px;

    color: var(--text);

    font-size: 22px;

    line-height: 1.3;

    font-weight: 800;
}


.popular-links {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.popular-links a {
    display: inline-block;

    width: max-content;

    color: var(--text);

    font-size: 15px;

    line-height: 1.5;

    font-weight: 600;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.popular-links a:hover {
    color: var(--primary);

    transform:
        translateX(4px);
}


.view-all-tools {
    display: inline-block;

    margin-top: 24px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;
}


.view-all-tools:hover {
    color: var(--primary-dark);
}


/* =========================================================
   MAIN TOOL CONTENT
========================================================= */

.tool-content-section {
    flex: 1;

    min-width: 0;
}


.tool-main-content {
    width: 100%;
}


/* =========================================================
   TOOL CONTENT CARD
========================================================= */

.tool-content-box {
    width: 100%;

    box-sizing: border-box;

    padding: 34px;

    background: var(--card);

    border:
        1px solid var(--border);

    border-radius: 24px;

    box-shadow:
        0 10px 35px rgba(18, 38, 63, .05);

    overflow: hidden;
}


/* =========================================================
   TOOL PAGE HEADER
========================================================= */

.tool-page-header {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding-bottom: 24px;

    margin-bottom: 24px;

    border-bottom:
        1px solid var(--border);
}


/* =========================================================
   TOOL PAGE ICON
========================================================= */

.tool-page-icon {
    width: 60px;

    height: 60px;

    min-width: 60px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .08);
}


.tool-page-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}


/* =========================================================
   TOOL PAGE TITLE
========================================================= */

.tool-page-title {
    margin:
        0 0 10px;

    color: var(--text);

    font-size: 42px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -1px;
}


/* =========================================================
   TOOL PAGE DESCRIPTION
========================================================= */

.tool-page-description {
    margin: 0;

    max-width: 760px;

    color: var(--text-light);

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   TOOL CATEGORY
========================================================= */

.tool-page-categories {
    margin-bottom: 40px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.6;
}


.tool-page-categories a {
    color: var(--primary);

    font-weight: 700;

    text-decoration: none;
}


.tool-page-categories a:hover {
    text-decoration: underline;
}


/* =========================================================
   TOOL ARTICLE
========================================================= */

.tool-article {
    color: var(--text);

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 20px;
}


.tool-article h2 {
    font-size: 30px;

    line-height: 1.3;

    margin:
        40px 0 18px;

    color: var(--text);

    font-weight: 800;
}


.tool-article h2:first-child {
    margin-top: 0;
}


.tool-article h3 {
    font-size: 22px;

    line-height: 1.35;

    margin:
        30px 0 14px;

    color: var(--text);

    font-weight: 800;
}


.tool-article p {
    margin-bottom: 18px;

    color: var(--text);

    line-height: 1.9;
}


.tool-article ul,
.tool-article ol {
    padding-left: 24px;

    margin:
        14px 0 24px;

    color: var(--text);
}


.tool-article li {
    margin-bottom: 10px;

    line-height: 1.8;
}


.tool-article a {
    color: var(--primary);

    font-weight: 600;

    text-decoration: none;
}


.tool-article a:hover {
    text-decoration: underline;

    color: var(--primary-dark);
}


/* =========================================================
   ARTICLE IMAGE
========================================================= */

.tool-article img {
    display: block;

    max-width: 100%;

    height: auto;

    margin:
        28px auto;
}


/* =========================================================
   FORMULA BOX
========================================================= */

.formula-box {
    margin:
        22px 0;

    padding:
        18px 20px;

    background:
        var(--bg-soft);

    border:
        1px solid var(--border);

    border-left:
        4px solid var(--primary);

    border-radius:
        12px;

    overflow-x:
        auto;
}


.formula-box code {
    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:
        15px;

    line-height:
        1.7;

    color:
        var(--text);

    white-space:
        nowrap;
}


/* =========================================================
   TOOL CODE BOX
========================================================= */

.tool-code {
    margin:
        22px 0;

    padding:
        18px 20px;

    background:
        var(--bg-soft);

    border:
        1px solid var(--border);

    border-left:
        4px solid var(--primary);

    border-radius:
        12px;

    overflow-x:
        auto;
}


.tool-code code {
    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:
        14px;

    line-height:
        1.7;

    color:
        var(--text);

    white-space:
        pre-wrap;
}


/* =========================================================
   TOOL NOTE
========================================================= */

.tool-note {
    margin-top:
        28px;

    padding:
        18px 20px;

    background:
        var(--bg-soft);

    border:
        1px solid var(--border);

    border-radius:
        12px;

    color:
        var(--text);

    font-size:
        14px;

    line-height:
        1.8;
}


.tool-note strong {
    color:
        var(--text);
}


/* =========================================================
   ARTICLE TABLE
========================================================= */

.tool-article table {
    width:
        100%;

    margin:
        24px 0 28px;

    border-collapse:
        collapse;

    background:
        var(--card);

    border:
        1px solid var(--border);

    font-size:
        14px;
}


.tool-article th,
.tool-article td {
    padding:
        13px 14px;

    border:
        1px solid var(--border);

    text-align:
        left;

    vertical-align:
        top;
}


.tool-article th {
    background:
        var(--bg-soft);

    color:
        var(--text);

    font-weight:
        800;
}


.tool-article td {
    color:
        var(--text);

    line-height:
        1.65;
}


/* =========================================================
   HOW TO USE
========================================================= */

.tool-content-block {
    margin-top:
        42px;
}


.tool-content-block h2 {
    margin:
        0 0 20px;

    color:
        var(--text);

    font-size:
        30px;

    line-height:
        1.3;

    font-weight:
        800;
}


.tool-guide-list {
    padding-left:
        24px;
}


.tool-guide-list li {
    margin-bottom:
        13px;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   CREDITS
========================================================= */

.tool-credits {
    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;
}


.credit-item {
    padding:
        16px 0;

    border-bottom:
        1px solid var(--border);
}


.credit-item:last-child {
    border-bottom:
        none;
}


.credit-item a {
    color:
        var(--primary);

    font-weight:
        700;

    text-decoration:
        none;
}


.credit-item span {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text);

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================================
   SHARE
========================================================= */

.tool-share {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        40px;

    padding-top:
        25px;

    border-top:
        1px solid var(--border);

    flex-wrap:
        wrap;
}


.share-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    height:
        44px;

    padding:
        0 16px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        var(--card);

    color:
        var(--text);

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.share-btn:hover {
    background:
        var(--bg-soft);

    color:
        var(--primary);

    border-color:
        rgba(29,114,255,.25);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .tool-content-layout {
        flex-direction:
            column;
    }


    .popular-tools {
        width:
            100%;

        min-width:
            100%;

        position:
            relative;

        top:
            auto;
    }

}


@media (max-width: 768px) {

    .tool-content-box {
        padding:
            24px;

        border-radius:
            20px;
    }


    .tool-page-header {
        gap:
            14px;
    }


    .tool-page-title {
        font-size:
            34px;
    }


    .tool-page-description {
        font-size:
            15px;
    }


    .tool-article {
        font-size:
            15px;
    }


    .tool-article p {
        font-size:
            15px;
    }


    .tool-article h2,
    .tool-content-block h2 {
        font-size:
            24px;
    }

}


@media (max-width: 480px) {

    .tool-content-box {
        padding:
            20px;
    }


    .tool-page-header {
        flex-direction:
            column;
    }


    .tool-page-title {
        font-size:
            28px;
    }


    .tool-article h2,
    .tool-content-block h2 {
        font-size:
            22px;
    }


    .tool-article p {
        font-size:
            14px;
    }


    .share-btn {
        width:
            100%;

        justify-content:
            center;
    }

}