/* =========================================================
   FUTURES PROPWATCH
   TOOLS PAGE
   VERSION 2
========================================================= */

:root {

    --tools-bg: #f5f8fb;
    --tools-white: #ffffff;

    --tools-heading: #102c43;
    --tools-text: #25445b;
    --tools-muted: #718798;
    --tools-soft: #91a2af;

    --tools-border: #dce7ee;
    --tools-border-dark: #c9d9e4;

    --tools-blue: #176fe5;
    --tools-blue-dark: #125cc0;

    --tools-green: #159b68;
    --tools-purple: #7358dd;
    --tools-orange: #dd8120;
    --tools-red: #d95860;
    --tools-cyan: #159bb5;
    --tools-yellow: #a57c12;

    --tools-shadow:
        0 8px 30px rgba(26, 61, 86, .045);

    --tools-shadow-hover:
        0 18px 45px rgba(26, 61, 86, .095);

}


/* =========================================================
   BASE
========================================================= */

.fpw-tools-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    color: var(--tools-text);

    background:

        radial-gradient(
            circle at 10% 0%,
            rgba(23, 111, 229, .045),
            transparent 27%
        ),

        radial-gradient(
            circle at 95% 35%,
            rgba(115, 88, 221, .035),
            transparent 28%
        ),

        var(--tools-bg);

}


.fpw-tools-container {

    width:
        min(1180px, calc(100% - 34px));

    margin:
        0 auto;

}


/* =========================================================
   HERO
========================================================= */

.fpw-tools-hero {

    position: relative;

    padding:
        34px 0 60px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(39, 126, 235, .075),
            transparent 31%
        ),

        radial-gradient(
            circle at 90% 50%,
            rgba(116, 89, 221, .055),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #fafdff,
            #f4f8fb
        );

}


.fpw-tools-hero::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -220px;
    top: -230px;

    border-radius: 50%;

    border:
        1px solid rgba(23,111,229,.07);

    pointer-events: none;

}


.fpw-tools-breadcrumb {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 38px;

    color: #8195a5;

    font-size: 10px;

    font-weight: 650;

}


.fpw-tools-breadcrumb a {

    color: #718798;

    text-decoration: none;

    transition:
        color .2s ease;

}


.fpw-tools-breadcrumb a:hover {

    color:
        var(--tools-blue);

}


.fpw-tools-breadcrumb i {

    font-size: 14px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.fpw-tools-hero-content {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(290px, .65fr);

    align-items: center;

    gap: 65px;

}


.fpw-tools-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: #728797;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.5px;

}


.fpw-tools-eyebrow span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #1679e8,
            #7559dd
        );

    box-shadow:
        0 0 0 4px
        rgba(23,111,229,.08);

    animation:
        fpwPulse 2.4s infinite;

}


@keyframes fpwPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px
            rgba(23,111,229,.08);
    }

    50% {
        box-shadow:
            0 0 0 7px
            rgba(23,111,229,.025);
    }

}


.fpw-tools-hero-copy h1 {

    max-width: 700px;

    margin: 0;

    color:
        var(--tools-heading);

    font-size:
        clamp(36px, 4.8vw, 58px);

    line-height:
        1.02;

    letter-spacing:
        -2px;

    font-weight:
        850;

}


.fpw-tools-hero-copy h1 strong {

    display: block;

    color:
        var(--tools-blue);

    font-weight:
        850;

}


.fpw-tools-hero-copy > p {

    max-width: 680px;

    margin:
        19px 0 0;

    color:
        #6d8292;

    font-size:
        13px;

    line-height:
        1.75;

}


.fpw-tools-hero-points {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top:
        20px;

}


.fpw-tools-hero-points span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        7px 9px;

    border:
        1px solid #dce7ed;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.72);

    color:
        #62798a;

    font-size:
        9px;

    font-weight:
        700;

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.fpw-tools-hero-points span:hover {

    transform:
        translateY(-2px);

    border-color:
        #c5dbe9;

}


.fpw-tools-hero-points i {

    color:
        var(--tools-green);

    font-size:
        13px;

}


/* =========================================================
   QUICK CARD
========================================================= */

.fpw-tools-hero-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    padding:
        23px;

    border:
        1px solid #d6e4ed;

    border-radius:
        17px;

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0 15px 45px
        rgba(28,65,91,.065);

    backdrop-filter:
        blur(14px);

    animation:
        fpwHeroCard .6s ease both;

}


@keyframes fpwHeroCard {

    from {

        opacity: 0;

        transform:
            translateY(15px)
            scale(.985);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


.fpw-tools-hero-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,111,229,.25),
            transparent
        );

}


.fpw-tools-hero-card-icon {

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e9f5ff,
            #f1edff
        );

    color:
        var(--tools-blue);

    font-size:
        21px;

}


.fpw-tools-hero-card span {

    display: block;

    margin-bottom: 4px;

    color:
        #8296a5;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        1.1px;

}


.fpw-tools-hero-card strong {

    display: block;

    color:
        #193b55;

    font-size:
        16px;

    line-height:
        1.3;

}


.fpw-tools-hero-card p {

    margin:
        7px 0 0;

    color:
        #718798;

    font-size:
        10.5px;

    line-height:
        1.6;

}


.fpw-tools-quick-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    height:
        39px;

    padding:
        0 12px;

    border:
        1px solid #d7e8f4;

    border-radius:
        8px;

    background:
        #edf6ff;

    color:
        #176fe5;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .22s ease;

}


.fpw-tools-quick-btn:hover {

    background:
        #e2f1ff;

    border-color:
        #bcd9ed;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(23,111,229,.09);

}


.fpw-tools-quick-btn i {

    font-size:
        17px;

    transition:
        transform .22s ease;

}


.fpw-tools-quick-btn:hover i {

    transform:
        translateX(3px);

}


/* =========================================================
   NAVIGATION
========================================================= */

.fpw-tools-navigation {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    border-top:
        1px solid #dce7ee;

    border-bottom:
        1px solid #dce7ee;

    background:
        rgba(248,251,253,.91);

    backdrop-filter:
        blur(16px);

}


.fpw-tools-search-row {

    padding:
        13px 0 10px;

}


.fpw-tools-search {

    position:
        relative;

    width:
        min(100%, 570px);

}


.fpw-tools-search > i {

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #91a3af;

    font-size:
        17px;

    pointer-events:
        none;

}


.fpw-tools-search input {

    width:
        100%;

    height:
        42px;

    padding:
        0 82px 0 40px;

    border:
        1px solid #d6e3eb;

    border-radius:
        9px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #29465c;

    font-family:
        inherit;

    font-size:
        11.5px;

    font-weight:
        600;

    box-shadow:
        0 3px 10px
        rgba(30,65,90,.025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.fpw-tools-search input::placeholder {

    color:
        #9aaab5;

}


.fpw-tools-search input:focus {

    border-color:
        #9fc6e3;

    box-shadow:
        0 0 0 4px
        rgba(23,111,229,.055);

}


.fpw-search-clear {

    position:
        absolute;

    right:
        42px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #879aa8;

    cursor:
        pointer;

}


.fpw-search-clear:hover {

    background:
        #f1f5f8;

    color:
        #526c7e;

}


.fpw-tools-search kbd {

    position:
        absolute;

    right:
        10px;

    top:
        50%;

    transform:
        translateY(-50%);

    padding:
        4px 6px;

    border:
        1px solid #dce5eb;

    border-radius:
        5px;

    background:
        #f5f8fa;

    color:
        #8b9ca8;

    font-family:
        inherit;

    font-size:
        8px;

}


/* =========================================================
   TABS
========================================================= */

.fpw-tools-tabs {

    display:
        flex;

    gap:
        5px;

    overflow-x:
        auto;

    scrollbar-width:
        none;

}


.fpw-tools-tabs::-webkit-scrollbar {

    display:
        none;

}


.fpw-tools-tab {

    position:
        relative;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        40px;

    padding:
        0 11px;

    border:
        1px solid transparent;

    border-bottom:
        2px solid transparent;

    border-radius:
        8px 8px 0 0;

    background:
        transparent;

    color:
        #738898;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        750;

    cursor:
        pointer;

    white-space:
        nowrap;

    transition:
        all .22s ease;

}


.fpw-tools-tab i {

    font-size:
        15px;

}


.fpw-tools-tab b {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        20px;

    height:
        18px;

    padding:
        0 5px;

    border-radius:
        5px;

    background:
        #edf2f6;

    color:
        #7b909f;

    font-size:
        8px;

}


.fpw-tools-tab:hover {

    color:
        var(--tools-blue);

    background:
        rgba(255,255,255,.68);

}


.fpw-tools-tab.active {

    color:
        var(--tools-blue);

    background:
        #ffffff;

    border-color:
        #dce7ee;

    border-bottom-color:
        var(--tools-blue);

    box-shadow:
        0 -2px 10px
        rgba(23,111,229,.025);

}


.fpw-tools-tab.active b {

    background:
        #eaf4ff;

    color:
        #176fe5;

}


/* =========================================================
   CONTENT
========================================================= */

.fpw-tools-content {

    padding:
        29px 0 55px;

}


.fpw-tools-results-bar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        30px;

    margin-bottom:
        16px;

}


.fpw-results-left {

    display:
        flex;

    align-items:
        baseline;

    gap:
        6px;

}


.fpw-results-left strong {

    color:
        var(--tools-blue);

    font-size:
        18px;

    font-weight:
        850;

}


.fpw-results-left span {

    color:
        #7e919f;

    font-size:
        10.5px;

    font-weight:
        600;

}


.fpw-tools-clear-search {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    border:
        0;

    background:
        transparent;

    color:
        #7c909e;

    font-family:
        inherit;

    font-size:
        9.5px;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        color .2s ease;

}


.fpw-tools-clear-search:hover {

    color:
        var(--tools-blue);

}


.fpw-tools-clear-search i {

    font-size:
        13px;

}


/* =========================================================
   GRID
========================================================= */

.fpw-tools-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        14px;

}


.fpw-tool-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        278px;

    padding:
        18px;

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

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        var(--tools-shadow);

    overflow:
        hidden;

    isolation:
        isolate;

    animation:
        fpwCardIn .42s ease both;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;

}


@keyframes fpwCardIn {

    from {

        opacity:
            0;

        transform:
            translateY(12px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.fpw-tool-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        18px;

    right:
        18px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,111,229,.17),
            transparent
        );

    z-index:
        -1;

}


.fpw-tool-card::after {

    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    right:
        -65px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(23,111,229,.025);

    transition:
        transform .4s ease;

    z-index:
        -1;

}


.fpw-tool-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--tools-border-dark);

    box-shadow:
        var(--tools-shadow-hover);

}


.fpw-tool-card:hover::after {

    transform:
        scale(1.7);

}


.fpw-tool-card.featured {

    border-color:
        #c9deec;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbff
        );

}


/* =========================================================
   CARD TOP
========================================================= */

.fpw-tool-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        16px;

}


.fpw-tool-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        20px;

    transition:
        transform .25s ease;

}


.fpw-tool-card:hover .fpw-tool-icon {

    transform:
        scale(1.08)
        rotate(-3deg);

}


.fpw-tool-icon.blue {

    background:
        #edf6ff;

    color:
        #176fe5;

}


.fpw-tool-icon.green {

    background:
        #ebfaf4;

    color:
        #159a68;

}


.fpw-tool-icon.purple {

    background:
        #f1edff;

    color:
        #7358dd;

}


.fpw-tool-icon.orange {

    background:
        #fff5e9;

    color:
        #dc8120;

}


.fpw-tool-icon.red {

    background:
        #fff0f1;

    color:
        #d95860;

}


.fpw-tool-icon.cyan {

    background:
        #e9f9fc;

    color:
        #159bb5;

}


.fpw-tool-icon.yellow {

    background:
        #fff8dc;

    color:
        #a47c13;

}


.fpw-tool-number {

    color:
        #9aacb9;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1px;

}


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

.fpw-tool-card-content {

    flex:
        1;

}


.fpw-tool-card h2 {

    margin:
        0;

    color:
        #193952;

    font-size:
        14.5px;

    line-height:
        1.38;

    font-weight:
        800;

}


.fpw-tool-card p {

    margin:
        8px 0 0;

    color:
        #718697;

    font-size:
        11px;

    line-height:
        1.65;

}


/* =========================================================
   CARD BOTTOM
========================================================= */

.fpw-tool-bottom {

    margin-top:
        17px;

}


.fpw-tool-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-bottom:
        12px;

}


.fpw-tool-tags span {

    padding:
        5px 7px;

    border:
        1px solid #e0e9ef;

    border-radius:
        5px;

    background:
        #f7fafc;

    color:
        #7b8f9e;

    font-size:
        7.5px;

    font-weight:
        750;

}


.fpw-tool-open {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    height:
        36px;

    padding:
        0 10px;

    border:
        1px solid #d7e4ec;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #31536b;

    font-family:
        inherit;

    font-size:
        9.5px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .22s ease;

}


.fpw-tool-open i {

    font-size:
        16px;

    transition:
        transform .22s ease;

}


.fpw-tool-open:hover {

    border-color:
        #b9d4e6;

    background:
        #f3f9ff;

    color:
        #176fe5;

}


.fpw-tool-open:hover i {

    transform:
        translateX(3px);

}


/* =========================================================
   HIDDEN FILTERED CARDS
========================================================= */

.fpw-tool-card[hidden] {

    display:
        none !important;

}


/* =========================================================
   NO RESULTS
========================================================= */

.fpw-tools-no-results {

    padding:
        65px 20px;

    text-align:
        center;

    animation:
        fpwFadeIn .3s ease both;

}


@keyframes fpwFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


.fpw-no-results-icon {

    width:
        54px;

    height:
        54px;

    margin:
        0 auto 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #dce7ed;

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        #9badb9;

    font-size:
        24px;

}


.fpw-tools-no-results h3 {

    margin:
        0 0 5px;

    color:
        #355268;

    font-size:
        15px;

}


.fpw-tools-no-results p {

    margin:
        0;

    color:
        #8295a3;

    font-size:
        10.5px;

}


.fpw-no-results-button {

    margin-top:
        14px;

    padding:
        9px 13px;

    border:
        1px solid #d4e2ea;

    border-radius:
        7px;

    background:
        #ffffff;

    color:
        #4d697d;

    font-family:
        inherit;

    font-size:
        9.5px;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        all .2s ease;

}


.fpw-no-results-button:hover {

    color:
        #176fe5;

    border-color:
        #bcd6e6;

    background:
        #f5faff;

}


/* =========================================================
   ACTIVE TOOL
========================================================= */

.fpw-active-tool {

    position:
        relative;

    margin-top:
        22px;

    border:
        1px solid #cbddea;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 18px 50px
        rgba(29,64,89,.075);

    overflow:
        hidden;

    scroll-margin-top:
        125px;

    animation:
        fpwToolOpen .35s ease both;

}


@keyframes fpwToolOpen {

    from {

        opacity:
            0;

        transform:
            translateY(14px)
            scale(.99);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


.fpw-active-tool[hidden] {

    display:
        none !important;

}


.fpw-active-tool-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        22px;

    border-bottom:
        1px solid #e1e9ef;

    background:
        linear-gradient(
            135deg,
            #f9fcff,
            #f5f8fb
        );

}


.fpw-active-tool-category {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #176fe5;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        1.2px;

}


.fpw-active-tool-header h2 {

    margin:
        0;

    color:
        #183952;

    font-size:
        20px;

    line-height:
        1.3;

    font-weight:
        850;

}


.fpw-active-tool-header p {

    max-width:
        700px;

    margin:
        5px 0 0;

    color:
        #728798;

    font-size:
        11px;

    line-height:
        1.55;

}


.fpw-active-tool-close {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d8e4eb;

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #718697;

    font-size:
        19px;

    cursor:
        pointer;

    transition:
        all .2s ease;

}


.fpw-active-tool-close:hover {

    background:
        #fff1f2;

    color:
        #d4545c;

    transform:
        rotate(5deg);

}


/* =========================================================
   WORKSPACE
========================================================= */

.fpw-tool-workspace {

    padding:
        23px;

}


.fpw-tool-form {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;

}


.fpw-field {

    min-width:
        0;

}


.fpw-field.full {

    grid-column:
        1 / -1;

}


.fpw-field label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #48657a;

    font-size:
        10px;

    font-weight:
        800;

}


.fpw-field input,
.fpw-field select,
.fpw-field textarea {

    width:
        100%;

    min-height:
        40px;

    box-sizing:
        border-box;

    padding:
        0 11px;

    border:
        1px solid #d6e2ea;

    border-radius:
        8px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #26465d;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        600;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.fpw-field textarea {

    min-height:
        90px;

    padding:
        10px;

    resize:
        vertical;

}


.fpw-field input:focus,
.fpw-field select:focus,
.fpw-field textarea:focus {

    border-color:
        #9fc5e3;

    box-shadow:
        0 0 0 3px
        rgba(23,111,229,.06);

}


.fpw-field-help {

    display:
        block;

    margin-top:
        5px;

    color:
        #8b9daa;

    font-size:
        8.5px;

    line-height:
        1.45;

}


/* =========================================================
   ACTIONS
========================================================= */

.fpw-tool-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        17px;

}


.fpw-calculate-btn,
.fpw-secondary-action {

    min-height:
        40px;

    padding:
        0 15px;

    border-radius:
        8px;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .22s ease;

}


.fpw-calculate-btn {

    border:
        1px solid #176fe5;

    background:
        linear-gradient(
            135deg,
            #1979e9,
            #315fdc
        );

    color:
        #ffffff;

    box-shadow:
        0 6px 16px
        rgba(23,111,229,.16);

}


.fpw-calculate-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 9px 21px
        rgba(23,111,229,.22);

}


.fpw-secondary-action {

    border:
        1px solid #d5e2ea;

    background:
        #ffffff;

    color:
        #536e82;

}


.fpw-secondary-action:hover {

    border-color:
        #bcd3e2;

    background:
        #f6faff;

}


/* =========================================================
   RESULT
========================================================= */

.fpw-result-box {

    margin-top:
        18px;

    padding:
        18px;

    border:
        1px solid #d5e5ef;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #f6fbff,
            #f8f9ff
        );

    animation:
        fpwResultIn .3s ease both;

}


@keyframes fpwResultIn {

    from {

        opacity:
            0;

        transform:
            translateY(6px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.fpw-result-label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #7c91a0;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.fpw-result-value {

    color:
        #176fe5;

    font-size:
        27px;

    line-height:
        1.15;

    font-weight:
        850;

}


.fpw-result-sub {

    margin-top:
        5px;

    color:
        #708696;

    font-size:
        9.5px;

    line-height:
        1.55;

}


.fpw-result-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        8px;

    margin-top:
        12px;

}


.fpw-result-stat {

    padding:
        10px;

    border:
        1px solid #dce7ed;

    border-radius:
        8px;

    background:
        #ffffff;

}


.fpw-result-stat span {

    display:
        block;

    color:
        #8799a7;

    font-size:
        8px;

    font-weight:
        750;

}


.fpw-result-stat strong {

    display:
        block;

    margin-top:
        3px;

    color:
        #2c4b61;

    font-size:
        11px;

    font-weight:
        800;

}


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

.fpw-specs-table-wrap,
.fpw-journal-table-wrap {

    overflow-x:
        auto;

    border:
        1px solid #dce7ed;

    border-radius:
        10px;

}


.fpw-specs-table,
.fpw-journal-table {

    width:
        100%;

    border-collapse:
        collapse;

}


.fpw-specs-table {

    min-width:
        650px;

}


.fpw-specs-table th,
.fpw-journal-table th {

    padding:
        10px;

    background:
        #f5f8fa;

    color:
        #728798;

    font-size:
        8.5px;

    text-align:
        left;

    font-weight:
        850;

}


.fpw-specs-table td,
.fpw-journal-table td {

    padding:
        10px;

    border-top:
        1px solid #e4ebef;

    color:
        #355268;

    font-size:
        9.5px;

    font-weight:
        600;

}


/* =========================================================
   INFO CARDS
========================================================= */

.fpw-info-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap:
        10px;

}


.fpw-info-card {

    padding:
        14px;

    border:
        1px solid #dce7ed;

    border-radius:
        10px;

    background:
        #f9fbfc;

    transition:
        transform .2s ease,
        border-color .2s ease;

}


.fpw-info-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #c9dce8;

}


.fpw-info-card strong {

    display:
        block;

    color:
        #284a62;

    font-size:
        11px;

}


.fpw-info-card span {

    display:
        block;

    margin-top:
        5px;

    color:
        #718797;

    font-size:
        9.5px;

    line-height:
        1.5;

}


/* =========================================================
   JOURNAL
========================================================= */

.fpw-journal-summary {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        8px;

    margin-bottom:
        15px;

}


.fpw-journal-stat {

    padding:
        12px;

    border:
        1px solid #dce7ed;

    border-radius:
        9px;

    background:
        #f8fafb;

}


.fpw-journal-stat span {

    display:
        block;

    color:
        #8395a2;

    font-size:
        8px;

    font-weight:
        750;

}


.fpw-journal-stat strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #294a60;

    font-size:
        15px;

}


/* =========================================================
   DELETE JOURNAL
========================================================= */

.fpw-journal-delete {

    border:
        0;

    background:
        transparent;

    color:
        #c65d63;

    cursor:
        pointer;

    font-size:
        15px;

    transition:
        transform .2s ease;

}


.fpw-journal-delete:hover {

    transform:
        scale(1.12);

}


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

.fpw-tools-note {

    padding:
        0 0 65px;

}


.fpw-tools-note-inner {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        17px;

    border:
        1px solid #dce6ed;

    border-radius:
        12px;

    background:
        #ffffff;

}


.fpw-tools-note-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        #edf6ff;

    color:
        #176fe5;

    font-size:
        17px;

}


.fpw-tools-note strong {

    display:
        block;

    color:
        #35536a;

    font-size:
        10.5px;

}


.fpw-tools-note p {

    margin:
        4px 0 0;

    color:
        #7b8e9c;

    font-size:
        9.5px;

    line-height:
        1.6;

}


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

@media (max-width: 1050px) {

    .fpw-tools-hero-content {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .fpw-tools-hero-card {

        max-width:
            520px;

    }


    .fpw-tools-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

    }

}


@media (max-width: 700px) {

    .fpw-tools-container {

        width:
            min(100% - 22px, 600px);

    }


    .fpw-tools-hero {

        padding:
            24px 0 40px;

    }


    .fpw-tools-breadcrumb {

        margin-bottom:
            27px;

    }


    .fpw-tools-hero-copy h1 {

        font-size:
            36px;

        letter-spacing:
            -1.2px;

    }


    .fpw-tools-hero-copy > p {

        font-size:
            12px;

    }


    .fpw-tools-navigation {

        position:
            relative;

    }


    .fpw-tools-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .fpw-tool-card {

        min-height:
            250px;

    }


    .fpw-tool-form {

        grid-template-columns:
            1fr;

    }


    .fpw-field.full {

        grid-column:
            auto;

    }


    .fpw-result-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .fpw-info-grid {

        grid-template-columns:
            1fr;

    }


    .fpw-journal-summary {

        grid-template-columns:
            1fr 1fr;

    }


    .fpw-active-tool-header {

        padding:
            17px;

    }


    .fpw-tool-workspace {

        padding:
            17px;

    }

}


@media (max-width: 460px) {

    .fpw-tools-hero-copy h1 {

        font-size:
            31px;

    }


    .fpw-tools-hero-points {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .fpw-tools-results-bar {

        margin-bottom:
            12px;

    }


    .fpw-result-grid,
    .fpw-journal-summary {

        grid-template-columns:
            1fr;

    }


    .fpw-tool-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .fpw-calculate-btn,
    .fpw-secondary-action {

        width:
            100%;

    }


    .fpw-active-tool-header h2 {

        font-size:
            17px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.fpw-tools-page button:focus-visible,
.fpw-tools-page input:focus-visible,
.fpw-tools-page select:focus-visible,
.fpw-tools-page textarea:focus-visible,
.fpw-tools-page a:focus-visible {

    outline:
        3px solid
        rgba(23,111,229,.15);

    outline-offset:
        2px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fpw-tools-page *,
    .fpw-tools-page *::before,
    .fpw-tools-page *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;

    }

}