/* =========================================================
   THULTHUL — USER WEBSITE
   Design System v1
========================================================= */

:root {
    --tt-purple: #4F46FF;
    --tt-purple-light: #7C3AED;
    --tt-purple-dark: #372FCB;

    --tt-black: #070708;
    --tt-surface: #101014;
    --tt-surface-2: #17171C;

    --tt-white: #FFFFFF;
    --tt-text: #F5F5F7;
    --tt-muted: #A1A1AA;
    --tt-border: rgba(255, 255, 255, 0.10);

    --tt-gradient:
        linear-gradient(
            135deg,
            #4F46FF 0%,
            #7C3AED 100%
        );

    --tt-radius-sm: 10px;
    --tt-radius-md: 18px;
    --tt-radius-lg: 28px;

    --tt-container: 1240px;

    --tt-nav-height: 82px;

    --tt-transition:
        250ms cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--tt-black);
    color: var(--tt-text);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

::selection {
    background: var(--tt-purple);
    color: white;
}


/* =========================================================
   GLOBAL
========================================================= */

.tt-container {
    width: min(
        calc(100% - 48px),
        var(--tt-container)
    );

    margin-inline: auto;
}

.tt-section {
    padding: 120px 0;
}


/* =========================================================
   NAVBAR
========================================================= */

.tt-navbar {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: var(--tt-nav-height);

    z-index: 100;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        linear-gradient(
            to bottom,
            rgba(7, 7, 8, 0.82),
            rgba(7, 7, 8, 0)
        );

    backdrop-filter: blur(10px);
}

.tt-nav-inner {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* LOGO */

.tt-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.tt-logo-mark {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 35% 30%,
            #7C3AED,
            #4F46FF 55%,
            #241F9A
        );

    box-shadow:
        0 0 28px
        rgba(79, 70, 255, 0.35);
}

.tt-logo-mark span {
    font-size: 17px;
    font-weight: 900;
    color: white;
}

.tt-logo-text {
    display: flex;
    gap: 3px;
}

.tt-logo-text .purple {
    color: var(--tt-purple);
}

.tt-logo-text .white {
    color: white;
}


/* NAV LINKS */

.tt-nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.tt-nav-link {
    position: relative;

    color: #D4D4D8;

    font-size: 13px;
    font-weight: 500;

    transition:
        color var(--tt-transition);
}

.tt-nav-link:hover {
    color: white;
}

.tt-nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -8px;

    height: 2px;

    border-radius: 10px;

    background: var(--tt-gradient);

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform var(--tt-transition);
}

.tt-nav-link:hover::after {
    transform: scaleX(1);
}


/* NAV ACTION */

.tt-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-nav-login {
    padding: 10px 16px;

    font-size: 13px;
    font-weight: 600;

    color: #E4E4E7;

    transition:
        color var(--tt-transition);
}

.tt-nav-login:hover {
    color: white;
}


/* =========================================================
   BUTTONS
========================================================= */

.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;

    padding:
        0 21px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--tt-transition),
        box-shadow var(--tt-transition),
        background var(--tt-transition);
}

.tt-btn:hover {
    transform: translateY(-2px);
}

.tt-btn-primary {
    color: white;

    background:
        var(--tt-gradient);

    box-shadow:
        0 10px 30px
        rgba(79, 70, 255, 0.22);
}

.tt-btn-primary:hover {
    box-shadow:
        0 14px 40px
        rgba(79, 70, 255, 0.38);
}

.tt-btn-outline {
    color: white;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    background:
        rgba(255, 255, 255, 0.03);
}

.tt-btn-outline:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   MOBILE NAV
========================================================= */

.tt-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    color: white;

    background:
        rgba(255, 255, 255, 0.07);

    cursor: pointer;
}


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

.tt-hero {
    position: relative;

    min-height:
        min(860px, 100vh);

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(79, 70, 255, 0.15),
            transparent 32%
        ),

        radial-gradient(
            circle at 20% 80%,
            rgba(124, 58, 237, 0.07),
            transparent 28%
        ),

        var(--tt-black);
}


/* ambient glow */

.tt-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: 2%;
    top: 18%;

    border-radius: 50%;

    background:
        rgba(79, 70, 255, 0.08);

    filter: blur(90px);

    pointer-events: none;
}


/* HERO CONTENT */

.tt-hero-content {
    position: relative;
    z-index: 2;

    width: 52%;

    padding-top: 70px;
}

.tt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 22px;

    color: #C4B5FD;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tt-eyebrow-line {
    width: 25px;
    height: 1px;

    background:
        var(--tt-purple);
}


.tt-hero-title {
    margin: 0;

    max-width: 760px;

    font-size:
        clamp(58px, 7vw, 104px);

    line-height: 0.93;

    letter-spacing: -0.065em;

    font-weight: 800;
}

.tt-hero-title .gradient {
    display: block;

    color: transparent;

    background:
        var(--tt-gradient);

    background-clip: text;
    -webkit-background-clip: text;
}


.tt-hero-description {
    max-width: 540px;

    margin:
        30px 0 0;

    color: var(--tt-muted);

    font-size: 16px;
    line-height: 1.75;
}


.tt-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 34px;
}


/* HERO STATS */

.tt-hero-meta {
    display: flex;
    align-items: center;
    gap: 28px;

    margin-top: 48px;
}

.tt-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tt-meta-number {
    color: white;

    font-size: 18px;
    font-weight: 750;
}

.tt-meta-label {
    color: #71717A;

    font-size: 10px;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* =========================================================
   HERO IMAGE AREA
========================================================= */

.tt-hero-visual {
    position: absolute;

    top: 0;
    right: 0;

    width: 54%;
    height: 100%;

    z-index: 1;

    /*
        IMAGE PLACEHOLDER

        Put the generated hero image here later.

        Recommended:
        width: 100%;
        height: 100%;
        object-fit: cover;
    */

    background:
        linear-gradient(
            90deg,
            var(--tt-black) 0%,
            rgba(7, 7, 8, 0.72) 18%,
            rgba(7, 7, 8, 0.08) 55%,
            rgba(7, 7, 8, 0.2) 100%
        );
}

.tt-hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.88;
}


/* image fade */

.tt-hero-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            var(--tt-black) 0%,
            transparent 38%
        ),

        linear-gradient(
            0deg,
            var(--tt-black) 0%,
            transparent 28%
        );
}


/* =========================================================
   HERO FLOATING LABEL
========================================================= */

.tt-hero-card {
    position: absolute;

    right: 8%;
    bottom: 12%;

    z-index: 4;

    min-width: 185px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius:
        var(--tt-radius-md);

    background:
        rgba(15, 15, 19, 0.66);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.32);
}

.tt-hero-card-label {
    color: #A1A1AA;

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.tt-hero-card-title {
    margin-top: 5px;

    color: white;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.tt-scroll-indicator {
    position: absolute;

    left: 50%;
    bottom: 28px;

    z-index: 5;

    transform:
        translateX(-50%);

    color: #71717A;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tt-scroll-line {
    width: 1px;
    height: 32px;

    margin: 8px auto 0;

    background:
        linear-gradient(
            to bottom,
            var(--tt-purple),
            transparent
        );
}


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

@media (max-width: 1000px) {

    .tt-nav-links {
        display: none;
    }

    .tt-menu-button {
        display: grid;
        place-items: center;
    }

    .tt-hero-content {
        width: 60%;
    }

    .tt-hero-visual {
        width: 58%;
    }

    .tt-hero-title {
        font-size:
            clamp(52px, 8vw, 82px);
    }
}


@media (max-width: 760px) {

    .tt-container {
        width:
            min(
                calc(100% - 32px),
                var(--tt-container)
            );
    }

    .tt-navbar {
        height: 72px;
    }

    .tt-nav-actions .tt-nav-login {
        display: none;
    }

    .tt-hero {
        min-height: 820px;

        align-items: flex-end;
    }

    .tt-hero-content {
        width: 100%;

        padding:
            0 0 70px;
    }

    .tt-hero-title {
        font-size:
            clamp(50px, 14vw, 76px);

        letter-spacing: -0.07em;
    }

    .tt-hero-description {
        max-width: 460px;

        font-size: 14px;
    }

    .tt-hero-actions {
        flex-wrap: wrap;
    }

    .tt-hero-visual {
        top: 72px;
        bottom: auto;

        width: 100%;
        height: 58%;

        background: transparent;
    }

    .tt-hero-visual::after {
        background:
            linear-gradient(
                to bottom,
                transparent 35%,
                var(--tt-black) 88%
            );
    }

    .tt-hero-card {
        right: 5%;
        bottom: 18%;
    }

    .tt-hero-meta {
        margin-top: 34px;
        gap: 20px;
    }

    .tt-scroll-indicator {
        display: none;
    }
}


@media (max-width: 480px) {

    .tt-logo-text {
        font-size: 17px;
    }

    .tt-logo-mark {
        width: 34px;
        height: 34px;
    }

    .tt-btn {
        min-height: 46px;

        padding: 0 18px;

        font-size: 12px;
    }

    .tt-hero {
        min-height: 780px;
    }

    .tt-hero-description {
        line-height: 1.65;
    }

    .tt-hero-meta {
        gap: 16px;
    }

    .tt-meta-number {
        font-size: 15px;
    }

    .tt-meta-label {
        font-size: 8px;
    }

    .tt-hero-card {
        display: none;
    }
}
/* =========================================================
   GOALS SECTION
========================================================= */

.tt-goals {
    position: relative;

    padding: 130px 0;

    background:
        var(--tt-black);

    overflow: hidden;
}


/* SECTION HEADING */

.tt-section-heading {
    max-width: 650px;

    margin-bottom: 52px;
}

.tt-section-heading h2 {
    margin: 0;

    font-size:
        clamp(38px, 5vw, 64px);

    line-height: 1.02;

    letter-spacing: -0.055em;

    font-weight: 750;
}

.tt-section-heading h2 span {
    display: block;

    color: var(--tt-muted);
}

.tt-section-heading p {
    margin: 18px 0 0;

    color: #71717A;

    font-size: 14px;

    line-height: 1.7;
}


/* GOAL GRID */

.tt-goal-grid {
    display: grid;

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

    gap: 16px;
}


/* CARD */

.tt-goal-card {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    border-radius:
        var(--tt-radius-lg);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        var(--tt-surface);

    isolation: isolate;

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition);
}

.tt-goal-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(79, 70, 255, 0.45);
}


/* IMAGE */

.tt-goal-image {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        #15151A;
}

.tt-goal-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.72;

    transition:
        transform 600ms
        cubic-bezier(.2,.8,.2,1),
        opacity 400ms ease;
}

.tt-goal-card:hover
.tt-goal-image img {
    transform:
        scale(1.06);

    opacity: 0.86;
}


/* OVERLAY */

.tt-goal-overlay {
    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            to top,
            rgba(7, 7, 8, 0.98) 0%,
            rgba(7, 7, 8, 0.72) 42%,
            rgba(7, 7, 8, 0.05) 100%
        );

    transition:
        background 400ms ease;
}

.tt-goal-card:hover
.tt-goal-overlay {
    background:
        linear-gradient(
            to top,
            rgba(7, 7, 8, 0.98) 0%,
            rgba(7, 7, 8, 0.62) 45%,
            rgba(79, 70, 255, 0.08) 100%
        );
}


/* CONTENT */

.tt-goal-content {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 27px;
}

.tt-goal-number {
    display: block;

    margin-bottom: 12px;

    color:
        #A1A1AA;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.tt-goal-content h3 {
    margin: 0;

    color: white;

    font-size: 28px;

    line-height: 1;

    letter-spacing: -0.035em;
}

.tt-goal-content p {
    max-width: 270px;

    margin:
        12px 0 0;

    color: #A1A1AA;

    font-size: 12px;

    line-height: 1.6;
}


/* ARROW */

.tt-goal-arrow {
    display: flex;

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

    width: 42px;
    height: 42px;

    margin-top: 20px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 18px;

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}

.tt-goal-card:hover
.tt-goal-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(4px);

    border-color:
        var(--tt-purple);
}


/* =========================================================
   GOALS — RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .tt-goals {
        padding: 100px 0;
    }

    .tt-goal-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .tt-goal-card {
        min-height: 390px;
    }
}


@media (max-width: 480px) {

    .tt-goals {
        padding: 80px 0;
    }

    .tt-section-heading {
        margin-bottom: 34px;
    }

    .tt-section-heading h2 {
        font-size: 40px;
    }

    .tt-goal-card {
        min-height: 360px;
    }

    .tt-goal-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .tt-goal-content h3 {
        font-size: 25px;
    }
}
/* =========================================================
   FEATURED WORKOUTS
========================================================= */

.tt-workouts {
    padding: 120px 0;

    background:
        #0B0B0E;
}


/* HEADER */

.tt-workouts-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 52px;
}

.tt-workouts-header
.tt-section-heading {
    margin-bottom: 0;
}


/* GRID */

.tt-workout-grid {
    display: grid;

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

    gap: 16px;
}


/* CARD */

.tt-workout-card {
    position: relative;

    min-height: 320px;

    padding: 24px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        linear-gradient(
            145deg,
            #15151A,
            #0D0D10
        );

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


/* PURPLE LIGHT */

.tt-workout-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(79,70,255,0.13);

    filter: blur(45px);

    transition:
        transform 500ms ease;
}

.tt-workout-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(79,70,255,0.42);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.28);
}

.tt-workout-card:hover::before {
    transform:
        scale(1.5);
}


/* TOP */

.tt-workout-card-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.tt-workout-level {
    padding:
        7px 10px;

    border-radius:
        999px;

    background:
        rgba(79,70,255,0.12);

    border:
        1px solid
        rgba(79,70,255,0.2);

    color:
        #B8B4FF;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.tt-workout-arrow {
    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.06);

    color: white;

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}

.tt-workout-card:hover
.tt-workout-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}


/* BODY */

.tt-workout-card-body {
    position: relative;
    z-index: 2;
}

.tt-workout-card-body h3 {
    margin: 0;

    max-width: 300px;

    color: white;

    font-size: 27px;

    line-height: 1.05;

    letter-spacing: -0.04em;
}

.tt-workout-card-body p {
    max-width: 310px;

    margin:
        14px 0 0;

    color:
        #85858D;

    font-size: 12px;

    line-height: 1.65;
}


/* META */

.tt-workout-card-meta {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 8px;

    color:
        #71717A;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.tt-workout-card-meta span {
    padding:
        8px 10px;

    border-radius:
        8px;

    background:
        rgba(255,255,255,0.035);
}


/* EMPTY */

.tt-workout-empty {
    grid-column: 1 / -1;

    padding: 50px;

    text-align: center;

    color: #71717A;

    border:
        1px dashed
        rgba(255,255,255,0.12);

    border-radius:
        var(--tt-radius-lg);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tt-workouts {
        padding: 100px 0;
    }

    .tt-workouts-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 36px;
    }

    .tt-workout-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .tt-workout-grid {
        grid-template-columns:
            1fr;
    }

    .tt-workout-card {
        min-height: 280px;
    }

    .tt-workout-card-body h3 {
        font-size: 25px;
    }
}
/* =========================================================
   NUTRITION
========================================================= */

.tt-nutrition {
    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background:
        var(--tt-black);
}


/* LAYOUT */

.tt-nutrition-layout {
    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    align-items: center;

    gap: 80px;
}


/* CONTENT */

.tt-nutrition-content h2 {
    margin: 0;

    max-width: 560px;

    font-size:
        clamp(44px, 5vw, 70px);

    line-height: 0.98;

    letter-spacing: -0.06em;

    font-weight: 750;
}

.tt-nutrition-content h2 span {
    display: block;

    color:
        var(--tt-muted);
}

.tt-nutrition-content > p {
    max-width: 470px;

    margin:
        24px 0 0;

    color:
        #85858D;

    font-size: 14px;

    line-height: 1.75;
}

.tt-nutrition-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


/* VISUAL */

.tt-nutrition-visual {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    border-radius:
        32px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background:
        #111114;
}

.tt-nutrition-visual img {
    width: 100%;
    height: 100%;

    min-height: 540px;

    object-fit: cover;

    opacity: 0.82;
}


/* IMAGE OVERLAY */

.tt-nutrition-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(7,7,8,0.15),
            rgba(7,7,8,0.55)
        ),

        linear-gradient(
            to top,
            rgba(7,7,8,0.65),
            transparent 45%
        );
}


/* FLOATING STAT */

.tt-nutrition-stat {
    position: absolute;

    left: 24px;
    bottom: 24px;

    z-index: 2;

    min-width: 165px;

    padding: 17px 18px;

    border-radius:
        18px;

    border:
        1px solid
        rgba(255,255,255,0.12);

    background:
        rgba(10,10,13,0.72);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.3);
}

.tt-nutrition-stat span {
    display: block;

    color:
        #8B8B94;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;
}

.tt-nutrition-stat strong {
    display: inline-block;

    margin-top: 4px;

    color: white;

    font-size: 27px;

    letter-spacing: -0.04em;
}

.tt-nutrition-stat small {
    margin-left: 4px;

    color:
        #8B8B94;

    font-size: 9px;
}


/* FEATURES */

.tt-nutrition-features {
    display: grid;

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

    margin-top: 70px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}

.tt-nutrition-feature {
    position: relative;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 18px;

    min-height: 120px;

    padding:
        22px 24px;

    border-right:
        1px solid
        rgba(255,255,255,0.08);

    transition:
        background var(--tt-transition);
}

.tt-nutrition-feature:last-child {
    border-right: 0;
}

.tt-nutrition-feature:hover {
    background:
        rgba(79,70,255,0.05);
}

.tt-feature-number {
    align-self: start;

    color:
        #56565E;

    font-size: 10px;

    font-weight: 700;
}

.tt-nutrition-feature h3 {
    margin: 0;

    color: white;

    font-size: 17px;

    letter-spacing: -0.02em;
}

.tt-nutrition-feature p {
    margin: 5px 0 0;

    color:
        #71717A;

    font-size: 11px;

    line-height: 1.5;
}

.tt-feature-arrow {
    color:
        #71717A;

    transition:
        color var(--tt-transition),
        transform var(--tt-transition);
}

.tt-nutrition-feature:hover
.tt-feature-arrow {
    color:
        var(--tt-purple);

    transform:
        translateX(4px);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tt-nutrition {
        padding: 100px 0;
    }

    .tt-nutrition-layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .tt-nutrition-visual {
        min-height: 480px;
    }

    .tt-nutrition-visual img {
        min-height: 480px;
    }

    .tt-nutrition-features {
        grid-template-columns: 1fr;
    }

    .tt-nutrition-feature {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,0.08);
    }

    .tt-nutrition-feature:last-child {
        border-bottom: 0;
    }
}


@media (max-width: 480px) {

    .tt-nutrition {
        padding: 80px 0;
    }

    .tt-nutrition-content h2 {
        font-size: 43px;
    }

    .tt-nutrition-visual,
    .tt-nutrition-visual img {
        min-height: 400px;
    }

    .tt-nutrition-stat {
        left: 16px;
        bottom: 16px;
    }

    .tt-nutrition-feature {
        padding:
            20px 12px;
    }
}
/* =========================================================
   WHY THULTHUL / METHOD
========================================================= */

.tt-why {
    position: relative;

    padding: 140px 0;

    background:
        #0B0B0E;

    overflow: hidden;
}


/* subtle center glow */

.tt-why::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 300px;

    left: 50%;
    top: 30%;

    transform:
        translateX(-50%);

    background:
        rgba(79,70,255,0.055);

    filter:
        blur(100px);

    pointer-events: none;
}


/* HEADER */

.tt-why-header {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin-bottom: 75px;
}

.tt-why-header h2 {
    margin: 0;

    font-size:
        clamp(44px, 6vw, 76px);

    line-height: 0.98;

    letter-spacing: -0.06em;

    font-weight: 750;
}

.tt-why-header h2 span {
    display: block;

    color:
        var(--tt-muted);
}

.tt-why-header p {
    max-width: 520px;

    margin:
        22px 0 0;

    color:
        #85858D;

    font-size: 14px;

    line-height: 1.75;
}


/* METHOD GRID */

.tt-method {
    position: relative;
    z-index: 2;

    display: grid;

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

    border-top:
        1px solid
        rgba(255,255,255,0.09);

    border-bottom:
        1px solid
        rgba(255,255,255,0.09);
}


/* ITEM */

.tt-method-item {
    position: relative;

    min-height: 340px;

    padding:
        28px 26px;

    border-right:
        1px solid
        rgba(255,255,255,0.09);

    transition:
        background var(--tt-transition);
}

.tt-method-item:last-child {
    border-right: 0;
}

.tt-method-item:hover {
    background:
        rgba(79,70,255,0.045);
}


/* NUMBER */

.tt-method-number {
    color:
        #52525B;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


/* ICON */

.tt-method-icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin-top: 72px;

    border-radius: 14px;

    color:
        #C4B5FD;

    background:
        rgba(79,70,255,0.09);

    border:
        1px solid
        rgba(79,70,255,0.16);

    font-size: 18px;

    transition:
        transform var(--tt-transition),
        background var(--tt-transition);
}

.tt-method-item:hover
.tt-method-icon {
    transform:
        translateY(-4px);

    background:
        rgba(79,70,255,0.18);
}


/* TEXT */

.tt-method-item h3 {
    margin:
        22px 0 0;

    color: white;

    font-size: 24px;

    letter-spacing: -0.035em;
}

.tt-method-item p {
    max-width: 220px;

    margin:
        10px 0 0;

    color:
        #71717A;

    font-size: 11px;

    line-height: 1.7;
}


/* BOTTOM LINE */

.tt-why-bottom {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 26px;

    color:
        #52525B;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.tt-why-line {
    flex: 1;

    height: 1px;

    background:
        rgba(255,255,255,0.07);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tt-why {
        padding: 105px 0;
    }

    .tt-method {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .tt-method-item:nth-child(2) {
        border-right: 0;
    }

    .tt-method-item:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(255,255,255,0.09);
    }

    .tt-method-item {
        min-height: 300px;
    }
}


@media (max-width: 550px) {

    .tt-why {
        padding: 85px 0;
    }

    .tt-why-header {
        margin-bottom: 50px;
    }

    .tt-why-header h2 {
        font-size: 43px;
    }

    .tt-method {
        grid-template-columns:
            1fr;
    }

    .tt-method-item,
    .tt-method-item:nth-child(2) {
        min-height: 260px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,0.09);
    }

    .tt-method-item:last-child {
        border-bottom: 0;
    }

    .tt-method-icon {
        margin-top: 45px;
    }

    .tt-why-bottom {
        display: none;
    }
}
/* =========================================================
   FINAL CTA
========================================================= */

.tt-final-cta {
    padding: 100px 0 120px;

    background:
        #0B0B0E;
}


.tt-final-cta-box {
    position: relative;

    min-height: 500px;

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

    overflow: hidden;

    padding: 70px 40px;

    border-radius: 34px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(79,70,255,0.20),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #14141A,
            #0C0C0F
        );
}


/* ambient glow */

.tt-final-cta-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(79,70,255,0.12);

    filter:
        blur(90px);

    pointer-events: none;
}


/* CONTENT */

.tt-final-cta-content {
    position: relative;
    z-index: 2;

    max-width: 720px;

    text-align: center;
}

.tt-final-cta-content .tt-eyebrow {
    justify-content: center;
}


.tt-final-cta-content h2 {
    margin: 0;

    font-size:
        clamp(48px, 7vw, 86px);

    line-height: 0.96;

    letter-spacing: -0.065em;

    font-weight: 800;
}

.tt-final-cta-content h2 span {
    display: block;

    color:
        transparent;

    background:
        var(--tt-gradient);

    background-clip: text;
    -webkit-background-clip: text;
}


.tt-final-cta-content p {
    max-width: 480px;

    margin:
        24px auto 0;

    color:
        #85858D;

    font-size: 14px;

    line-height: 1.7;
}


.tt-final-cta-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


/* =========================================================
   FOOTER
========================================================= */

.tt-footer {
    padding:
        75px 0 28px;

    background:
        #070708;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


/* MAIN */

.tt-footer-main {
    display: grid;

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

    gap: 60px;

    padding-bottom: 70px;
}


/* BRAND */

.tt-footer-brand p {
    max-width: 250px;

    margin:
        18px 0 0;

    color:
        #71717A;

    font-size: 11px;

    line-height: 1.7;
}


/* COLUMN */

.tt-footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}

.tt-footer-title {
    margin-bottom: 8px;

    color:
        #E4E4E7;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.tt-footer-column a {
    color:
        #71717A;

    font-size: 11px;

    transition:
        color var(--tt-transition);
}

.tt-footer-column a:hover {
    color:
        white;
}


/* BOTTOM */

.tt-footer-bottom {
    display: flex;

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

    padding-top: 25px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);

    color:
        #52525B;

    font-size: 9px;
}


.tt-footer-legal {
    display: flex;

    gap: 22px;
}

.tt-footer-legal a {
    color:
        #52525B;

    transition:
        color var(--tt-transition);
}

.tt-footer-legal a:hover {
    color:
        #A1A1AA;
}


/* =========================================================
   CTA + FOOTER RESPONSIVE
========================================================= */

@media (max-width: 800px) {

    .tt-final-cta {
        padding:
            70px 0 90px;
    }

    .tt-final-cta-box {
        min-height: 450px;

        padding:
            60px 24px;

        border-radius: 26px;
    }

    .tt-footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 30px;
    }

    .tt-footer-brand {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 500px) {

    .tt-final-cta-content h2 {
        font-size: 46px;
    }

    .tt-final-cta-content p {
        font-size: 13px;
    }

    .tt-final-cta-actions {
        flex-direction: column;
    }

    .tt-final-cta-actions .tt-btn {
        width: 100%;
    }

    .tt-footer {
        padding-top: 60px;
    }

    .tt-footer-main {
        grid-template-columns:
            1fr 1fr;

        gap: 40px 20px;
    }

    .tt-footer-brand {
        grid-column:
            1 / -1;
    }

    .tt-footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }
}
/* =========================================================
   PUBLIC WORKOUT LIBRARY
========================================================= */

.tt-navbar-solid {
    position: fixed;

    background:
        rgba(7, 7, 8, 0.88);

    backdrop-filter:
        blur(18px);
}


.tt-workout-library {
    min-height: 100vh;

    background:
        var(--tt-black);
}


/* HERO */

.tt-library-hero {
    padding:
        190px 0 90px;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(79,70,255,0.12),
            transparent 32%
        );
}

.tt-library-eyebrow {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color:
        #A5A1FF;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.15em;
}

.tt-library-eyebrow span {
    width: 25px;
    height: 1px;

    background:
        var(--tt-purple);
}


.tt-library-hero h1 {
    margin: 0;

    max-width: 800px;

    font-size:
        clamp(55px, 8vw, 100px);

    line-height: 0.92;

    letter-spacing: -0.07em;

    font-weight: 800;
}

.tt-library-hero h1 span {
    display: block;

    color:
        transparent;

    background:
        var(--tt-gradient);

    background-clip: text;
    -webkit-background-clip: text;
}


.tt-library-hero p {
    max-width: 540px;

    margin:
        28px 0 0;

    color:
        #85858D;

    font-size: 15px;

    line-height: 1.7;
}


/* CONTROLS */

.tt-library-controls {
    padding:
        0 0 55px;
}


.tt-workout-filters {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding:
        10px;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        18px;

    background:
        #101014;
}


.tt-search-box {
    flex: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 12px;
}


.tt-search-box span {
    color:
        #71717A;

    font-size: 21px;
}


.tt-search-box input {
    width: 100%;

    border: 0;
    outline: 0;

    color: white;

    background: transparent;

    font-size: 13px;
}


.tt-search-box input::placeholder {
    color:
        #52525B;
}


.tt-filter-group {
    display: flex;

    align-items: center;

    gap: 8px;
}


.tt-filter-group select {
    height: 46px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        10px;

    outline: none;

    color:
        #D4D4D8;

    background:
        #17171C;

    font-size: 11px;
}


.tt-filter-group .tt-btn {
    height: 46px;
}


/* RESULTS */

.tt-library-results {
    padding:
        30px 0 130px;
}


.tt-results-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 38px;
}


.tt-results-header > div > span {
    color:
        #71717A;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.tt-results-header h2 {
    margin:
        8px 0 0;

    color: white;

    font-size: 30px;

    letter-spacing: -0.04em;
}


.tt-results-count {
    color:
        #71717A;

    font-size: 10px;
}


/* GRID */

.tt-library-grid {
    display: grid;

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

    gap: 16px;
}


/* CARD */

.tt-library-card {
    position: relative;

    min-height: 370px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            #15151A,
            #0D0D10
        );

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


.tt-library-card::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(79,70,255,0.10);

    filter:
        blur(55px);

    transition:
        transform 500ms ease;
}


.tt-library-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(79,70,255,0.38);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.28);
}


.tt-library-card:hover::before {
    transform:
        scale(1.5);
}


/* CARD TOP */

.tt-library-card-top,
.tt-library-card-body,
.tt-library-card-bottom {
    position: relative;

    z-index: 2;
}


.tt-library-card-top {
    display: flex;

    justify-content: space-between;
}


.tt-featured-badge {
    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        #C4B5FD;

    background:
        rgba(79,70,255,0.10);

    border:
        1px solid
        rgba(79,70,255,0.18);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


.tt-card-index {
    color:
        #52525B;

    font-size: 10px;

    font-weight: 700;
}


/* BODY */

.tt-card-goal {
    color:
        #A5A1FF;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.tt-library-card-body h3 {
    max-width: 330px;

    margin:
        10px 0 0;

    color: white;

    font-size: 30px;

    line-height: 1;

    letter-spacing: -0.045em;
}


.tt-library-card-body p {
    max-width: 320px;

    margin:
        14px 0 0;

    color:
        #71717A;

    font-size: 11px;

    line-height: 1.65;
}


/* BOTTOM */

.tt-library-card-bottom {
    display: flex;

    align-items: flex-end;

    gap: 14px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.tt-library-card-bottom > div:not(.tt-library-arrow) {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.tt-library-card-bottom strong {
    color:
        #E4E4E7;

    font-size: 12px;
}


.tt-library-card-bottom span {
    color:
        #52525B;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.08em;
}


.tt-library-arrow {
    display: flex;

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

    width: 40px;
    height: 40px;

    margin-left: auto;

    border-radius: 50%;

    color: white;

    background:
        rgba(255,255,255,0.06);

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}


.tt-library-card:hover
.tt-library-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}


/* EMPTY */

.tt-library-empty {
    grid-column:
        1 / -1;

    padding:
        100px 20px;

    text-align: center;

    border:
        1px dashed
        rgba(255,255,255,0.10);

    border-radius:
        26px;
}


.tt-library-empty > span {
    color:
        #71717A;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.tt-library-empty h3 {
    margin:
        12px 0 0;

    color: white;

    font-size: 25px;
}


.tt-library-empty p {
    margin:
        8px 0 24px;

    color:
        #71717A;

    font-size: 12px;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tt-library-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .tt-workout-filters {
        align-items: stretch;

        flex-direction: column;
    }

    .tt-filter-group {
        width: 100%;
    }

    .tt-filter-group select {
        flex: 1;
    }
}


@media (max-width: 600px) {

    .tt-library-hero {
        padding:
            145px 0 70px;
    }

    .tt-library-hero h1 {
        font-size: 56px;
    }

    .tt-library-grid {
        grid-template-columns:
            1fr;
    }

    .tt-filter-group {
        flex-wrap: wrap;
    }

    .tt-filter-group select,
    .tt-filter-group .tt-btn {
        flex: 1;
    }

    .tt-results-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }
}
/* =========================================================
   NAVBAR — SYSTEM
========================================================= */

.tt-navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--tt-nav-height);

    z-index: 1000;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

    background:
        rgba(7,7,8,0.72);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* NAV ACTIVE */

.tt-nav-link.active {
    color: white;
}

.tt-nav-link.active::after {
    transform: scaleX(1);
}


/* PROFILE */

.tt-nav-profile {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;

    background:
        var(--tt-gradient);

    font-size: 12px;
    font-weight: 700;
}


/* MOBILE BUTTON */

.tt-menu-button {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    display: none;

    flex-direction: column;

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

    gap: 5px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 50%;

    color: white;

    background:
        rgba(255,255,255,0.05);

    cursor: pointer;
}

.tt-menu-button span {
    display: block;

    width: 15px;
    height: 1.5px;

    border-radius: 10px;

    background: white;

    transition:
        transform 250ms ease,
        opacity 250ms ease;
}


/* MOBILE MENU */

.tt-mobile-menu {
    position: absolute;

    top: 100%;
    left: 0;

    width: 100%;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    background:
        rgba(7,7,8,0.97);

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    transition:
        max-height 350ms ease,
        opacity 250ms ease;
}

.tt-mobile-menu.open {
    max-height: 600px;

    opacity: 1;
}

.tt-mobile-menu-inner {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding:
        18px 24px 25px;
}

.tt-mobile-link {
    padding:
        15px 5px;

    color:
        #A1A1AA;

    font-size: 14px;
    font-weight: 600;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.tt-mobile-link:hover {
    color: white;
}

.tt-mobile-divider {
    height: 12px;
}

.tt-mobile-cta {
    margin-top: 8px;

    width: 100%;
}


/* MOBILE */

@media (max-width: 1000px) {

    .tt-nav-links {
        display: none;
    }

    .tt-nav-dashboard {
        display: none;
    }

    .tt-menu-button {
        display: flex;
    }

    .tt-nav-actions {
        gap: 8px;
    }
}


@media (max-width: 480px) {

    .tt-nav-login {
        display: none;
    }

    .tt-logo-text {
        font-size: 17px;
    }

    .tt-logo-mark {
        width: 34px;
        height: 34px;
    }
}
/* =========================================================
   SYSTEM MESSAGES
========================================================= */

.tt-messages {
    position: fixed;

    top: 100px;
    right: 24px;

    z-index: 2000;

    width: min(
        380px,
        calc(100% - 32px)
    );

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.tt-message {
    display: flex;

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

    gap: 14px;

    padding: 14px 15px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 14px;

    background:
        rgba(17,17,20,0.94);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.30);

    animation:
        ttMessageIn 300ms ease;
}


.tt-message-content {
    display: flex;

    align-items: center;

    gap: 10px;
}


.tt-message-icon {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background:
        rgba(79,70,255,0.18);

    font-size: 12px;

    font-weight: 700;
}


.tt-message-text {
    color:
        #E4E4E7;

    font-size: 11px;

    line-height: 1.5;
}


.tt-message-close {
    width: 28px;
    height: 28px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    padding: 0;

    border-radius: 50%;

    color:
        #71717A;

    background:
        transparent;

    font-size: 19px;

    cursor: pointer;

    transition:
        color 200ms ease,
        background 200ms ease;
}


.tt-message-close:hover {
    color: white;

    background:
        rgba(255,255,255,0.07);
}


/* MESSAGE TYPES */

.tt-message-success .tt-message-icon {
    background:
        rgba(34,197,94,0.14);

    color:
        #86EFAC;
}


.tt-message-error .tt-message-icon {
    background:
        rgba(239,68,68,0.14);

    color:
        #FCA5A5;
}


.tt-message-warning .tt-message-icon {
    background:
        rgba(245,158,11,0.14);

    color:
        #FCD34D;
}


/* ANIMATION */

@keyframes ttMessageIn {

    from {
        opacity: 0;

        transform:
            translateY(-10px)
            translateX(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            translateX(0);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .tt-messages {
        top: 84px;
        right: 16px;
        left: 16px;

        width: auto;
    }

}

/* =========================================================
   WORKOUT CARD COMPONENT
========================================================= */

.tt-workout-card-badges {
    display: flex;

    align-items: center;

    gap: 6px;
}


.tt-premium-badge {
    display: inline-flex;

    align-items: center;

    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        #DDD6FE;

    background:
        linear-gradient(
            135deg,
            rgba(79,70,255,0.22),
            rgba(124,58,237,0.16)
        );

    border:
        1px solid
        rgba(124,58,237,0.32);

    font-size: 8px;

    font-weight: 800;

    letter-spacing:
        0.10em;
}


.tt-workout-card-meta {
    display: flex;

    align-items: center;

    gap: 7px;
}


.tt-workout-card-meta > span:not(.tt-workout-arrow) {
    padding:
        7px 9px;

    border-radius:
        8px;

    color:
        #71717A;

    background:
        rgba(255,255,255,0.035);

    font-size: 9px;

    font-weight: 600;
}


.tt-workout-arrow {
    display: flex;

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

    width: 40px;
    height: 40px;

    margin-left: auto;

    border-radius: 50%;

    color: white;

    background:
        rgba(255,255,255,0.06);

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}


.tt-workout-card:hover
.tt-workout-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}

/* =========================================================
   DIET CARD
========================================================= */

.tt-diet-card {
    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        #111114;

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


.tt-diet-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(79,70,255,0.38);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.28);
}


/* TOP */

.tt-diet-card-top {
    position: absolute;

    top: 16px;
    left: 16px;
    right: 16px;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.tt-diet-badges {
    display: flex;

    gap: 6px;
}


/* IMAGE */

.tt-diet-image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background:
        #18181C;
}


.tt-diet-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(7,7,8,0.18),
            transparent 40%,
            rgba(7,7,8,0.55)
        );
}


.tt-diet-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 600ms
        cubic-bezier(.2,.8,.2,1);
}


.tt-diet-card:hover
.tt-diet-image img {
    transform:
        scale(1.06);
}


.tt-diet-image-placeholder {
    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at center,
            rgba(79,70,255,0.16),
            transparent 55%
        );
}


.tt-diet-image-placeholder span {
    color:
        #52525B;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


/* BODY */

.tt-diet-card-body {
    padding:
        23px 23px 18px;
}


.tt-diet-card-body h3 {
    margin:
        8px 0 0;

    color:
        white;

    font-size:
        25px;

    line-height: 1.05;

    letter-spacing:
        -0.04em;
}


.tt-diet-card-body p {
    margin:
        11px 0 0;

    color:
        #71717A;

    font-size:
        11px;

    line-height:
        1.65;
}


/* BOTTOM */

.tt-diet-card-bottom {
    display: flex;

    align-items: flex-end;

    gap: 15px;

    margin:
        0 23px;

    padding:
        17px 0 21px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.tt-diet-card-bottom > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.tt-diet-card-bottom strong {
    color:
        #E4E4E7;

    font-size:
        12px;
}


.tt-diet-card-bottom span:not(.tt-diet-arrow) {
    color:
        #52525B;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.tt-diet-arrow {
    width: 38px;
    height: 38px;

    display: flex;

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

    margin-left: auto;

    flex-shrink: 0;

    border-radius:
        50%;

    color:
        white;

    background:
        rgba(255,255,255,0.06);

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}


.tt-diet-card:hover
.tt-diet-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}
/* =========================================================
   EXERCISE CARD
========================================================= */

.tt-exercise-card {
    display: block;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        #111114;

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


.tt-exercise-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(79,70,255,0.35);

    box-shadow:
        0 25px 65px
        rgba(0,0,0,0.25);
}


/* IMAGE */

.tt-exercise-image {
    position: relative;

    height: 245px;

    overflow: hidden;

    background:
        #17171C;
}


.tt-exercise-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 600ms
        cubic-bezier(.2,.8,.2,1);
}


.tt-exercise-card:hover
.tt-exercise-image img {
    transform:
        scale(1.06);
}


.tt-exercise-placeholder {
    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(79,70,255,0.15),
            transparent 58%
        );
}


.tt-exercise-placeholder span {
    color:
        #52525B;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15em;
}


/* OVERLAY */

.tt-exercise-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7,7,8,0.65),
            transparent 55%
        );
}


/* TYPE */

.tt-exercise-type {
    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        7px 10px;

    border-radius:
        999px;

    color:
        #DDD6FE;

    background:
        rgba(7,7,8,0.68);

    border:
        1px solid
        rgba(255,255,255,0.10);

    backdrop-filter:
        blur(10px);

    font-size: 8px;

    font-weight: 700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* CONTENT */

.tt-exercise-content {
    padding:
        20px 20px 21px;
}


.tt-exercise-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.tt-exercise-heading h3 {
    margin: 0;

    color:
        white;

    font-size:
        20px;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;
}


.tt-exercise-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    border-radius:
        50%;

    color:
        #A1A1AA;

    background:
        rgba(255,255,255,0.05);

    transition:
        background var(--tt-transition),
        color var(--tt-transition),
        transform var(--tt-transition);
}


.tt-exercise-card:hover
.tt-exercise-arrow {
    color: white;

    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}


.tt-exercise-content p {
    margin:
        10px 0 0;

    color:
        #71717A;

    font-size:
        11px;

    line-height:
        1.6;
}


/* META */

.tt-exercise-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 17px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.tt-exercise-meta span {
    padding:
        6px 8px;

    border-radius:
        7px;

    color:
        #71717A;

    background:
        rgba(255,255,255,0.035);

    font-size:
        8px;

    font-weight:
        600;

    text-transform:
        uppercase;
}


/* RESPONSIVE */

@media (max-width: 600px) {

    .tt-exercise-image {
        height: 220px;
    }

}
/* =========================================================
   CALCULATOR CARD
========================================================= */

.tt-calculator-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 250px;

    padding: 24px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        linear-gradient(
            145deg,
            #15151A,
            #0D0D10
        );

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


.tt-calculator-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(79,70,255,0.10);

    filter:
        blur(45px);

    transition:
        transform 500ms ease;
}


.tt-calculator-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(79,70,255,0.35);

    box-shadow:
        0 25px 65px
        rgba(0,0,0,0.25);
}


.tt-calculator-card:hover::before {
    transform:
        scale(1.4);
}


/* TOP */

.tt-calculator-card-top {
    position: relative;
    z-index: 2;

    display: flex;

    justify-content: space-between;
}


.tt-calculator-number {
    color:
        #52525B;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


.tt-calculator-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    color:
        #A1A1AA;

    background:
        rgba(255,255,255,0.05);

    transition:
        background var(--tt-transition),
        color var(--tt-transition),
        transform var(--tt-transition);
}


.tt-calculator-card:hover
.tt-calculator-arrow {
    color: white;

    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}


/* ICON */

.tt-calculator-icon {
    position: relative;
    z-index: 2;

    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    margin-top: 42px;

    border-radius: 14px;

    color:
        #C4B5FD;

    background:
        rgba(79,70,255,0.09);

    border:
        1px solid
        rgba(79,70,255,0.16);

    font-size: 20px;

    font-weight: 500;
}


/* CONTENT */

.tt-calculator-content {
    position: relative;
    z-index: 2;

    margin-top: auto;
}


.tt-calculator-content h3 {
    margin: 0;

    color: white;

    font-size: 22px;

    line-height: 1.1;

    letter-spacing:
        -0.035em;
}


.tt-calculator-content p {
    max-width: 280px;

    margin:
        9px 0 0;

    color:
        #71717A;

    font-size: 10px;

    line-height: 1.6;
}


/* LABEL */

.tt-calculator-label {
    position: relative;
    z-index: 2;

    margin-top: 18px;

    color:
        #52525B;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.14em;
}
/* =========================================================
   PROGRESS CARD
========================================================= */

.tt-progress-card {
    padding: 22px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        #111114;
}


/* HEADER */

.tt-progress-card-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.tt-progress-label {
    display: block;

    color:
        #52525B;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.tt-progress-card-header h3 {
    margin:
        7px 0 0;

    color:
        #E4E4E7;

    font-size: 17px;

    letter-spacing:
        -0.025em;
}


.tt-progress-period {
    padding:
        6px 9px;

    border-radius:
        7px;

    color:
        #71717A;

    background:
        rgba(255,255,255,0.04);

    font-size: 8px;
}


/* VALUE */

.tt-progress-value {
    display: flex;

    align-items: baseline;

    gap: 7px;

    margin-top: 28px;
}


.tt-progress-value strong {
    color:
        white;

    font-size: 36px;

    line-height: 1;

    letter-spacing:
        -0.05em;
}


.tt-progress-value span {
    color:
        #71717A;

    font-size: 11px;
}


/* CHANGE */

.tt-progress-change {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 10px;

    color:
        #71717A;

    font-size: 9px;

    font-weight: 600;
}


.tt-progress-change.positive {
    color:
        #86EFAC;
}


.tt-progress-change.negative {
    color:
        #FCA5A5;
}


/* BAR */

.tt-progress-track {
    width: 100%;
    height: 5px;

    margin-top: 22px;

    overflow: hidden;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.06);
}


.tt-progress-fill {
    height: 100%;

    border-radius:
        inherit;

    background:
        var(--tt-gradient);

    transition:
        width 500ms ease;
}


/* FOOTER */

.tt-progress-footer {
    margin-top: 11px;

    color:
        #52525B;

    font-size: 8px;

    line-height: 1.5;
}
/* =========================================================
   EMPTY STATE
========================================================= */

.tt-empty-state {
    width: 100%;

    min-height: 320px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 50px 25px;

    text-align: center;

    border:
        1px dashed
        rgba(255,255,255,0.10);

    border-radius:
        var(--tt-radius-lg);

    background:
        rgba(255,255,255,0.015);
}


/* ICON */

.tt-empty-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 16px;

    color:
        #A5A1FF;

    background:
        rgba(79,70,255,0.08);

    border:
        1px solid
        rgba(79,70,255,0.14);

    font-size: 18px;
}


/* LABEL */

.tt-empty-label {
    color:
        #52525B;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.14em;
}


/* TITLE */

.tt-empty-state h3 {
    margin:
        10px 0 0;

    color:
        #E4E4E7;

    font-size:
        24px;

    letter-spacing:
        -0.035em;
}


/* DESCRIPTION */

.tt-empty-state p {
    max-width: 400px;

    margin:
        9px 0 22px;

    color:
        #71717A;

    font-size:
        11px;

    line-height:
        1.65;
}
/* =========================================================
   GOAL CARD
========================================================= */

.tt-goal-card {
    position: relative;

    display: block;

    height: 440px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        var(--tt-radius-lg);

    background:
        #111114;

    isolation: isolate;

    transition:
        transform var(--tt-transition),
        border-color var(--tt-transition),
        box-shadow var(--tt-transition);
}


.tt-goal-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(79,70,255,0.32);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,0.30);
}


/* IMAGE */

.tt-goal-card-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: -2;

    transition:
        transform 700ms
        cubic-bezier(.2,.8,.2,1);
}


.tt-goal-card:hover
.tt-goal-card-image {
    transform:
        scale(1.06);
}


/* PLACEHOLDER */

.tt-goal-card-placeholder {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(79,70,255,0.18),
            transparent 50%
        ),

        #15151A;
}


/* OVERLAY */

.tt-goal-card-overlay {
    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            rgba(7,7,8,0.12),
            rgba(7,7,8,0.18) 35%,
            rgba(7,7,8,0.88) 100%
        );
}


/* CONTENT */

.tt-goal-card-content {
    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 22px;
}


/* TOP */

.tt-goal-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.tt-goal-card-number {
    color:
        rgba(255,255,255,0.55);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


.tt-goal-card-arrow {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    color: white;

    background:
        rgba(7,7,8,0.42);

    border:
        1px solid
        rgba(255,255,255,0.12);

    backdrop-filter:
        blur(10px);

    transition:
        background var(--tt-transition),
        transform var(--tt-transition);
}


.tt-goal-card:hover
.tt-goal-card-arrow {
    background:
        var(--tt-purple);

    transform:
        translateX(3px);
}


/* BOTTOM */

.tt-goal-card-bottom {
    max-width: 330px;
}


.tt-goal-card-eyebrow {
    color:
        #C4B5FD;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.tt-goal-card-bottom h3 {
    margin:
        8px 0 0;

    color: white;

    font-size:
        clamp(28px, 3vw, 38px);

    line-height: 1;

    letter-spacing:
        -0.045em;
}


.tt-goal-card-bottom p {
    margin:
        11px 0 0;

    color:
        rgba(255,255,255,0.62);

    font-size: 11px;

    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 600px) {

    .tt-goal-card {
        height: 380px;
    }

}
/* =========================================================
   PAGINATION
========================================================= */

.tt-pagination {
    display: flex;

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

    gap: 8px;

    margin-top: 55px;
}


.tt-pagination-pages {
    display: flex;

    align-items: center;

    gap: 5px;
}


.tt-pagination-page,
.tt-pagination-arrow {
    width: 38px;
    height: 38px;

    display: flex;

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

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 10px;

    color:
        #71717A;

    background:
        rgba(255,255,255,0.025);

    font-size: 10px;

    transition:
        color var(--tt-transition),
        background var(--tt-transition),
        border-color var(--tt-transition),
        transform var(--tt-transition);
}


.tt-pagination-page:hover,
.tt-pagination-arrow:hover {
    color: white;

    border-color:
        rgba(79,70,255,0.30);

    background:
        rgba(79,70,255,0.08);
}


.tt-pagination-page.active {
    color: white;

    border-color:
        rgba(79,70,255,0.35);

    background:
        var(--tt-purple);
}


.tt-pagination-arrow:hover {
    transform:
        translateY(-2px);
}


.tt-pagination-arrow.disabled {
    opacity: 0.3;

    pointer-events: none;
}


@media (max-width: 480px) {

    .tt-pagination {
        margin-top: 40px;
    }

    .tt-pagination-page,
    .tt-pagination-arrow {
        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   WORKOUT DROPDOWN
========================================================= */

.tt-nav-dropdown {
    position: relative;
}


/* BUTTON */

.tt-nav-dropdown-toggle {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 0;

    margin: 0;

    border: 0;

    outline: none;

    background: transparent;

    cursor: pointer;

    color: #D4D4D8;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    line-height: 1;
}


.tt-nav-dropdown-toggle:hover {
    color: white;
}


/* IMPORTANT:
   normal nav underline disable
*/

.tt-nav-dropdown-toggle::after {
    display: none !important;
}


/* ARROW */

.tt-nav-chevron {
    font-size: 13px;

    color: #A1A1AA;

    transition:
        transform 180ms ease,
        color 180ms ease;
}


.tt-nav-dropdown.open
.tt-nav-chevron {
    color: white;

    transform:
        rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.tt-nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 14px);

    left: 50%;

    width: 285px;

    padding: 8px;

    transform:
        translateX(-50%)
        translateY(-8px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 16px;

    background:
        rgba(17,17,20,0.98);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.45);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;

    z-index: 5000;
}


/* OPEN STATE */

.tt-nav-dropdown.open
.tt-nav-dropdown-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   MENU ITEMS
========================================================= */

.tt-nav-dropdown-item {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 12px;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background 180ms ease,
        transform 180ms ease;
}


.tt-nav-dropdown-item:hover {
    background:
        rgba(255,255,255,0.06);

    transform:
        translateX(2px);
}


/* ICON */

.tt-dropdown-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 10px;

    color: #C4B5FD;

    background:
        rgba(79,70,255,0.10);

    border:
        1px solid
        rgba(79,70,255,0.15);

    font-size: 11px;

    font-weight: 800;
}


/* TEXT */

.tt-dropdown-content {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.tt-dropdown-content strong {
    color: #F5F5F7;

    font-size: 12px;

    font-weight: 650;
}


.tt-dropdown-content small {
    color: #71717A;

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   MOBILE
========================================================= */

.tt-mobile-workout-group {
    display: flex;

    flex-direction: column;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}


.tt-mobile-workout-heading {
    padding:
        15px 5px 10px;

    color: #F5F5F7;

    font-size: 14px;

    font-weight: 650;
}


.tt-mobile-sub-link {
    display: block;

    padding:
        10px 5px 10px 18px;

    color: #85858D;

    font-size: 13px;

    text-decoration: none;

    border-radius: 8px;
}


.tt-mobile-sub-link:hover {
    color: white;

    background:
        rgba(255,255,255,0.04);
}

/* =========================================================
   TOOLS DROPDOWN — WIDE / 2 COLUMN
========================================================= */

#ttToolsDropdown {
    position: relative;
}


/* ---------------------------------------------------------
   WIDE TOOLS MENU
--------------------------------------------------------- */

#ttToolsDropdownMenu.tt-tools-nav-menu {

    width: 620px;

    max-width: calc(100vw - 40px);

    max-height: calc(100vh - 95px);

    overflow-y: auto;

    overflow-x: hidden;

    padding: 10px;

    display: none;

    grid-template-columns: 1fr 1fr;

    gap: 4px;

    box-sizing: border-box;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(79,70,255,.65)
        transparent;
}


/* OPEN STATE */

#ttToolsDropdown.open
#ttToolsDropdownMenu.tt-tools-nav-menu {

    display: grid;
}


/* ---------------------------------------------------------
   SCROLLBAR — CHROME
--------------------------------------------------------- */

#ttToolsDropdownMenu.tt-tools-nav-menu::-webkit-scrollbar {

    width: 5px;
}


#ttToolsDropdownMenu.tt-tools-nav-menu::-webkit-scrollbar-track {

    background: transparent;
}


#ttToolsDropdownMenu.tt-tools-nav-menu::-webkit-scrollbar-thumb {

    background: rgba(79,70,255,.65);

    border-radius: 10px;
}


/* ---------------------------------------------------------
   TOOL ITEM
--------------------------------------------------------- */

#ttToolsDropdownMenu .tt-nav-dropdown-item {

    min-width: 0;

    width: 100%;

    box-sizing: border-box;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

#ttToolsDropdownMenu .tt-dropdown-icon {

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        rgba(79,70,255,.10);

    border:
        1px solid rgba(79,70,255,.25);

    color: #8b84ff;

    font-size: 11px;

    font-weight: 800;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

#ttToolsDropdownMenu .tt-dropdown-content {

    min-width: 0;

    flex: 1;
}


#ttToolsDropdownMenu .tt-dropdown-content strong {

    display: block;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    color: #eeeeef;

    font-size: 12px;

    line-height: 1.3;
}


#ttToolsDropdownMenu .tt-dropdown-content small {

    display: block;

    margin-top: 3px;

    color: #686870;

    font-size: 9px;

    line-height: 1.35;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

#ttToolsDropdownMenu .tt-nav-dropdown-item:hover {

    background:
        rgba(255,255,255,.045);
}


#ttToolsDropdownMenu .tt-nav-dropdown-item:hover
.tt-dropdown-icon {

    background:
        rgba(79,70,255,.18);

    border-color:
        rgba(79,70,255,.45);

    color: #a39eff;
}


/* ---------------------------------------------------------
   ALL TOOLS — FULL WIDTH
--------------------------------------------------------- */

#ttToolsDropdownMenu .tt-nav-dropdown-item:first-child {

    grid-column: 1 / -1;

    margin-bottom: 3px;

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

    border-bottom:
        1px solid rgba(255,255,255,.06);

    border-radius: 9px;
}


/* ---------------------------------------------------------
   DESKTOP POSITION
--------------------------------------------------------- */

@media (min-width: 901px) {

    #ttToolsDropdownMenu.tt-tools-nav-menu {

        position: absolute;

        top: calc(100% + 10px);

        left: 50%;

        transform: translateX(-50%);

        z-index: 9999;
    }

}


/* ---------------------------------------------------------
   MEDIUM SCREEN
--------------------------------------------------------- */

@media (max-width: 1100px) {

    #ttToolsDropdownMenu.tt-tools-nav-menu {

        width: 540px;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    #ttToolsDropdownMenu.tt-tools-nav-menu {

        position: static;

        width: 100%;

        max-width: none;

        max-height: none;

        overflow: visible;

        display: none;

        grid-template-columns: 1fr;
    }

    #ttToolsDropdown.open
    #ttToolsDropdownMenu.tt-tools-nav-menu {

        display: grid;
    }

    #ttToolsDropdownMenu
    .tt-nav-dropdown-item:first-child {

        grid-column: auto;
    }

}

/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.tt-nav-profile-dropdown {

    position: relative;

    display: flex;

    align-items: center;
}


/* =========================================================
   PROFILE BUTTON
========================================================= */

.tt-nav-profile {

    width: 40px;

    height: 40px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 50%;

    background: #4f46ff;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.tt-nav-profile:hover {

    transform: translateY(-1px);

    box-shadow:
        0 8px 24px rgba(79,70,255,.28);
}


/* =========================================================
   MENU
========================================================= */

.tt-profile-menu {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    z-index: 10000;

    width: 260px;

    padding: 8px;

    display: none;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 12px;

    background:
        #151518;

    box-shadow:
        0 20px 50px rgba(0,0,0,.45);

    box-sizing: border-box;
}


.tt-nav-profile-dropdown.open
.tt-profile-menu {

    display: block;
}


/* =========================================================
   PROFILE HEADER
========================================================= */

.tt-profile-menu-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;
}


.tt-profile-menu-avatar {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #4f46ff;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;
}


.tt-profile-menu-user {

    min-width: 0;
}


.tt-profile-menu-user strong {

    display: block;

    color: #f1f1f3;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.tt-profile-menu-user small {

    display: block;

    margin-top: 3px;

    color: #6d6d76;

    font-size: 9px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   DIVIDER
========================================================= */

.tt-profile-menu-divider {

    height: 1px;

    margin: 5px 4px;

    background:
        rgba(255,255,255,.07);
}


/* =========================================================
   MENU ITEMS
========================================================= */

.tt-profile-menu-item {

    width: 100%;

    min-height: 42px;

    padding: 8px 10px;

    display: flex;

    align-items: center;

    gap: 11px;

    box-sizing: border-box;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #d5d5d9;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    text-align: left;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.tt-profile-menu-item:hover {

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

    color: #ffffff;
}


/* =========================================================
   ICON
========================================================= */

.tt-profile-menu-icon {

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(79,70,255,.25);

    border-radius: 7px;

    background:
        rgba(79,70,255,.08);

    color: #817aff;

    font-size: 9px;

    font-weight: 800;
}


/* =========================================================
   LOGOUT
========================================================= */

.tt-profile-logout-form {

    margin: 0;

    padding: 0;
}


.tt-profile-logout {

    color: #b9b9c0;
}


.tt-profile-logout:hover {

    color: #ffffff;

    background:
        rgba(255,255,255,.05);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .tt-nav-profile-dropdown {

        display: none;
    }

}

/* =========================================================
   GLOBAL NAVBAR OFFSET
   Navbar is fixed, so page content must start below it.
========================================================= */

#main-content {
    padding-top: var(--tt-nav-height);
}


/* =========================================================
   MOBILE NAVBAR OFFSET
========================================================= */

@media (max-width: 760px) {

    #main-content {
        padding-top: 72px;
    }

}