@charset "UTF-8";

.tools-parent-container *,
.tools-parent-container *::before,
.tools-parent-container *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tools-parent-container .tool-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.tools-parent-container .tool-wrapper .confirm-overlay,
.tools-parent-container .tool-wrapper .particle-burst {
    position: fixed;
}

.tools-parent-container {
    --primary-bg: #f5f4ed;
    --secondary-bg: #ffc62f;
    --accent-dark: #e6a800;
    --accent-deeper: #cc9500;
    --accent-light: #ffe680;
    --accent-lighter: #fff4cc;
    --accent-cream: #fdf6e3;
    --text-dark: #3a2e00;
    --text-medium: #5c4a00;
    --text-light: #8a7430;
    --text-on-yellow: #4a3800;
    --shadow-yellow: rgba(255, 198, 47, 0.35);
    --shadow-dark: rgba(58, 46, 0, 0.12);
    --border-yellow: rgba(255, 198, 47, 0.5);
    --danger: #d32f2f;
    --danger-bg: #fdecea;
    --success: #2e7d32;
    --success-bg: #e8f5e9;
    --info-blue: #1565c0;
    --info-bg: #e3f2fd;
    --warning-orange: #e65100;
    --warning-bg: #fff3e0;
    --fs-26-60: clamp(26px, 2.5297vw + 11.43px, 60px) !important;
    --fs-20-42: clamp(20px, 1.636vw + 10.5766px, 42px) !important;
    --fs-16-32: clamp(16px, 9.15px + 1.19vw, 32px) !important;
    --fs-12-24: clamp(12px, 6.8576px + 0.8928vw, 24px) !important;
    --fs-12-20: clamp(12px, 0.595vw + 8.57px, 20px) !important;
    --fs-12-18: clamp(12px, 0.44vw + 9.43px, 18px) !important;
    --fs-12-16: clamp(12px, 10.29px + 0.297vw, 16px) !important;
    --fs-10-16: clamp(10px, 8.525px + 0.3703vw, 16px) !important;
    --space-xs: clamp(4px, 3.4px + 0.15vw, 8px);
    --space-sm: clamp(8px, 6.8px + 0.3vw, 14px);
    --space-md: clamp(12px, 9.15px + 0.6vw, 20px);
    --space-lg: clamp(16px, 12px + 0.9vw, 28px);
    --space-xl: clamp(20px, 14px + 1.2vw, 40px);
    --space-2xl: clamp(28px, 18px + 1.8vw, 56px);
    --radius: clamp(10px, 8px + 0.5vw, 18px);
    --radius-sm: clamp(6px, 5px + 0.3vw, 12px);
    --radius-lg: clamp(14px, 10px + 0.8vw, 24px);
    /* Framer Motion style spring curves */
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --spring-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --spring-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --spring-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.3, 0.7, 1);
}

.tools-parent-container {
    scroll-behavior: smooth;
}

.tools-parent-container {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    background: var(--primary-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    font-size: var(--fs-12-16);
}

.tools-parent-container {
    /* Animated Background Pattern */
}

.tools-parent-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 25%, rgba(255, 198, 47, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(255, 198, 47, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(230, 168, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: bgPulse 12s ease-in-out infinite;
}

@keyframes bgPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.tools-parent-container {
    /* Floating Geometric Shapes */
}

.tools-parent-container .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.tools-parent-container .shape {
    position: absolute;
    border-radius: 50%;
    background: var(--secondary-bg);
    opacity: 0.18;
    animation: shapeFloat linear infinite;
    box-shadow: 0 0 15px rgba(255, 198, 47, 0.3);
}

.tools-parent-container .shape.diamond {
    border-radius: 4px;
    transform: rotate(45deg);
}

@keyframes shapeFloat {
    0% {
        bottom: -10%;
        transform: translateY(0) rotate(0deg) scale(0.3);
        opacity: 0;
    }

    10% {
        opacity: 0.18;
    }

    85% {
        opacity: 0.12;
    }

    100% {
        bottom: 110%;
        transform: translateY(0) rotate(360deg) scale(1);
        opacity: 0;
    }
}

.tools-parent-container {
    /* ═══════════════════════════════════════════
             FRAMER MOTION STYLE ANIMATION SYSTEM
             ═══════════════════════════════════════════ */
    /* Initial hidden state for all animated elements */
}

.tools-parent-container .fm-hidden {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
    filter: blur(8px);
}

.tools-parent-container .fm-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    transition: opacity 0.8s var(--spring-smooth), transform 0.9s var(--spring-bounce), filter 0.6s var(--spring-gentle);
}

.tools-parent-container {
    /* Staggered children animation */
}

.tools-parent-container .fm-stagger>* {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(4px);
    transition: opacity 0.6s var(--spring-smooth), transform 0.7s var(--spring-bounce), filter 0.5s ease-out;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(1) {
    transition-delay: 0.05s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(2) {
    transition-delay: 0.12s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(3) {
    transition-delay: 0.19s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(4) {
    transition-delay: 0.26s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(5) {
    transition-delay: 0.33s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(6) {
    transition-delay: 0.4s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(7) {
    transition-delay: 0.47s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(8) {
    transition-delay: 0.54s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(9) {
    transition-delay: 0.61s;
}

.tools-parent-container .fm-stagger.fm-active>*:nth-child(10) {
    transition-delay: 0.68s;
}

.tools-parent-container .fm-stagger.fm-active>* {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

.tools-parent-container {
    /* Slide from left */
}

.tools-parent-container .fm-slide-left {
    opacity: 0;
    transform: translateX(-80px) scale(0.9);
    filter: blur(6px);
}

.tools-parent-container .fm-slide-left.fm-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
    transition: opacity 0.7s var(--spring-smooth), transform 0.85s var(--spring-bounce), filter 0.5s ease-out;
}

.tools-parent-container {
    /* Slide from right */
}

.tools-parent-container .fm-slide-right {
    opacity: 0;
    transform: translateX(80px) scale(0.9);
    filter: blur(6px);
}

.tools-parent-container .fm-slide-right.fm-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
    transition: opacity 0.7s var(--spring-smooth), transform 0.85s var(--spring-bounce), filter 0.5s ease-out;
}

.tools-parent-container {
    /* Scale pop animation */
}

.tools-parent-container .fm-scale-pop {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
    filter: blur(10px);
}

.tools-parent-container .fm-scale-pop.fm-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
    transition: opacity 0.5s var(--spring-smooth), transform 0.8s var(--spring-snappy), filter 0.4s ease-out;
}

.tools-parent-container {
    /* Rotate in */
}

.tools-parent-container .fm-rotate-in {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8) translateY(30px);
    filter: blur(5px);
}

.tools-parent-container .fm-rotate-in.fm-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1) translateY(0);
    filter: blur(0px);
    transition: opacity 0.6s var(--spring-smooth), transform 0.9s var(--spring-elastic), filter 0.5s ease-out;
}

.tools-parent-container {
    /* Flip in Y */
}

.tools-parent-container .fm-flip-y {
    opacity: 0;
    transform: perspective(800px) rotateY(40deg) scale(0.9);
    filter: blur(4px);
}

.tools-parent-container .fm-flip-y.fm-visible {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg) scale(1);
    filter: blur(0px);
    transition: opacity 0.7s var(--spring-smooth), transform 1s var(--spring-bounce), filter 0.5s ease-out;
}

.tools-parent-container {
    /* Morphing glow entrance */
}

.tools-parent-container .fm-glow-in {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(6px);
    box-shadow: 0 0 0 rgba(255, 198, 47, 0);
}

.tools-parent-container .fm-glow-in.fm-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    box-shadow: 0 0 40px rgba(255, 198, 47, 0.25), 0 0 80px rgba(255, 198, 47, 0.1);
    transition: opacity 0.7s var(--spring-smooth), transform 0.85s var(--spring-bounce), filter 0.5s ease-out, box-shadow 1.2s var(--spring-gentle);
}

.tools-parent-container {
    /* Elastic bounce */
}

.tools-parent-container .fm-elastic {
    opacity: 0;
    transform: translateY(100px) scale(0.6);
}

.tools-parent-container .fm-elastic.fm-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s var(--spring-smooth), transform 1s var(--spring-snappy);
}

.tools-parent-container {
    /* Text reveal character by character wrapper */
}

.tools-parent-container .fm-text-reveal {
    overflow: hidden;
}

.tools-parent-container .fm-text-reveal .fm-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(-80deg);
    transition: opacity 0.4s var(--spring-smooth), transform 0.6s var(--spring-bounce);
}

.tools-parent-container .fm-text-reveal.fm-active .fm-char {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

.tools-parent-container {
    /* Hover spring effects */
}

.tools-parent-container .fm-hover-spring {
    transition: transform 0.5s var(--spring-bounce), box-shadow 0.4s var(--spring-gentle);
}

.tools-parent-container .fm-hover-spring:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 50px var(--shadow-yellow), 0 0 0 3px rgba(255, 198, 47, 0.3) !important;
}

.tools-parent-container .fm-hover-spring:active {
    transform: translateY(-2px) scale(0.98) !important;
    transition-duration: 0.15s;
}

.tools-parent-container {
    /* Magnetic hover for icons */
}

.tools-parent-container .fm-magnetic {
    transition: transform 0.4s var(--spring-elastic);
    will-change: transform;
}

.tools-parent-container {
    /* Parallax tilt effect */
}

.tools-parent-container .fm-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s var(--spring-gentle);
}

.tools-parent-container {
    /* Layout animation placeholder */
}

.tools-parent-container .fm-layout-animate {
    transition: all 0.6s var(--spring-bounce);
}

.tools-parent-container {
    /* Number counter animation */
}

.tools-parent-container .fm-counter {
    display: inline-block;
    transition: transform 0.3s var(--spring-bounce);
}

.tools-parent-container .fm-counter.counting {
    animation: counterBounce 0.15s var(--spring-snappy);
}

@keyframes counterBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15) translateY(-3px);
    }

    100% {
        transform: scale(1);
    }
}

.tools-parent-container {
    /* Presence animation for mounting/unmounting */
}

.tools-parent-container .fm-presence-enter {
    animation: presenceEnter 0.6s var(--spring-bounce) both;
}

@keyframes presenceEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
        filter: blur(8px);
    }

    60% {
        opacity: 1;
        filter: blur(0px);
    }

    80% {
        transform: scale(1.03) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

.tools-parent-container .fm-presence-exit {
    animation: presenceExit 0.4s var(--spring-smooth) both;
}

@keyframes presenceExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
        filter: blur(6px);
    }
}

.tools-parent-container {
    /* Drag-style spring animation */
}

.tools-parent-container .fm-drag-spring {
    cursor: grab;
    transition: transform 0.5s var(--spring-bounce);
}

.tools-parent-container .fm-drag-spring:active {
    cursor: grabbing;
    transform: scale(0.96);
    transition-duration: 0.1s;
}

.tools-parent-container {
    /* Shimmer loading skeleton */
}

.tools-parent-container .fm-shimmer {
    position: relative;
    overflow: hidden;
}

.tools-parent-container .fm-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 198, 47, 0.15) 30%, rgba(255, 198, 47, 0.3) 50%, rgba(255, 198, 47, 0.15) 70%, transparent 100%);
    animation: shimmerSlide 2s ease-in-out infinite;
}

@keyframes shimmerSlide {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.tools-parent-container {
    /* Morph shape animation */
}

.tools-parent-container .fm-morph {
    animation: morphShape 8s ease-in-out infinite;
}

@keyframes morphShape {

    0%,
    100% {
        border-radius: var(--radius-lg);
    }

    25% {
        border-radius: 50% var(--radius-lg) var(--radius-lg) 50%;
    }

    50% {
        border-radius: var(--radius-lg) 50% var(--radius-lg) 50%;
    }

    75% {
        border-radius: 50% var(--radius-lg) 50% var(--radius-lg);
    }
}

.tools-parent-container {
    /* Breathing glow effect */
}

.tools-parent-container .fm-breathe {
    animation: breatheGlow 3s ease-in-out infinite;
}

@keyframes breatheGlow {

    0%,
    100% {
        box-shadow: 0 4px 20px var(--shadow-dark), 0 0 0 1px rgba(255, 198, 47, 0.1);
    }

    50% {
        box-shadow: 0 8px 40px var(--shadow-yellow), 0 0 0 3px rgba(255, 198, 47, 0.2), 0 0 60px rgba(255, 198, 47, 0.08);
    }
}

.tools-parent-container {
    /* Gradient border animation */
}

.tools-parent-container .fm-gradient-border {
    position: relative;
    z-index: 1;
}

.tools-parent-container .fm-gradient-border::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-dark), var(--accent-light), var(--secondary-bg));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradientRotate 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes gradientRotate {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.tools-parent-container {
    /* Wave text animation */
}

.tools-parent-container .fm-wave-text .fm-wave-char {
    display: inline-block;
    animation: waveTextFloat 2s ease-in-out infinite;
}

@keyframes waveTextFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.tools-parent-container {
    /* Smooth height transition for collapsibles */
}

.tools-parent-container .fm-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.7s var(--spring-bounce), opacity 0.5s var(--spring-smooth);
    opacity: 0;
}

.tools-parent-container .fm-collapse.fm-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tools-parent-container .fm-collapse>div {
    overflow: hidden;
}

.tools-parent-container {
    /* Spotlight hover effect */
}

.tools-parent-container .fm-spotlight {
    position: relative;
    overflow: hidden;
}

.tools-parent-container .fm-spotlight::before {
    content: "";
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 198, 47, 0.15), transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.tools-parent-container .fm-spotlight:hover::before {
    opacity: 1;
}

.tools-parent-container {
    /* Typewriter cursor */
}

.tools-parent-container .fm-typewriter-cursor::after {
    content: "|";
    animation: cursorBlink 0.8s steps(1) infinite;
    color: var(--accent-dark);
    font-weight: 300;
    margin-left: 2px;
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.tools-parent-container {
    /* 3D card tilt hover */
}

.tools-parent-container .fm-3d-hover {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.4s var(--spring-gentle);
}

.tools-parent-container .fm-3d-hover .fm-3d-inner {
    transition: transform 0.4s var(--spring-gentle);
    transform-style: preserve-3d;
}

.tools-parent-container {
    /* Progress reveal */
}

.tools-parent-container .fm-progress-reveal {
    width: 0%;
    transition: width 1.2s var(--spring-smooth);
}

.tools-parent-container .fm-progress-reveal.fm-active {
    width: 100%;
}

.tools-parent-container {
    /* Container */
}

.tools-parent-container .container {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--space-md);
    position: relative;
    z-index: 1;
}

.tools-parent-container {
    /* Header */
}

.tools-parent-container header {
    text-align: center;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.tools-parent-container .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.tools-parent-container .logo-icon {
    width: clamp(44px, 38px + 1.2vw, 64px);
    height: clamp(44px, 38px + 1.2vw, 64px);
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-dark));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-12-24);
    color: var(--text-on-yellow);
    box-shadow: 0 4px 20px var(--shadow-yellow), 0 0 0 3px rgba(255, 198, 47, 0.2);
    animation: logoFloat 4s ease-in-out infinite, logoGlow 3s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(2deg);
    }

    75% {
        transform: translateY(3px) rotate(-1deg);
    }
}

@keyframes logoGlow {

    0%,
    100% {
        box-shadow: 0 4px 20px var(--shadow-yellow), 0 0 0 3px rgba(255, 198, 47, 0.2);
    }

    50% {
        box-shadow: 0 6px 30px rgba(255, 198, 47, 0.5), 0 0 0 6px rgba(255, 198, 47, 0.15), 0 0 60px rgba(255, 198, 47, 0.1);
    }
}

.tools-parent-container h1 {
    font-size: var(--fs-20-42);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.tools-parent-container .subtitle {
    color: var(--text-light);
    font-size: var(--fs-12-18);
    margin-top: var(--space-xs);
}

.tools-parent-container {
    /* Cards */
}

.tools-parent-container .card {
    background: var(--accent-cream);
    border: 2px solid var(--border-yellow);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 4px 20px var(--shadow-dark), 0 0 0 1px rgba(255, 198, 47, 0.1);
    margin-bottom: var(--space-md);
    position: relative;
    overflow: hidden;
}

.tools-parent-container .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-dark), var(--secondary-bg));
    background-size: 200% 100%;
    animation: shimmerBar 3s ease-in-out infinite;
}

@keyframes shimmerBar {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.tools-parent-container .card-title {
    font-size: var(--fs-12-20);
    font-weight: 700;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-dark);
}

.tools-parent-container .card-title .icon {
    width: clamp(32px, 28px + 0.8vw, 42px);
    height: clamp(32px, 28px + 0.8vw, 42px);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-12-18);
    flex-shrink: 0;
    transition: transform 0.5s var(--spring-bounce);
}

.tools-parent-container .icon-body {
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-light));
    color: var(--text-on-yellow);
}

.tools-parent-container .icon-climate {
    background: linear-gradient(135deg, #ffb347, var(--secondary-bg));
    color: var(--text-on-yellow);
}

.tools-parent-container .icon-activity {
    background: linear-gradient(135deg, var(--accent-dark), var(--secondary-bg));
    color: var(--text-on-yellow);
}

.tools-parent-container .icon-sun {
    background: linear-gradient(135deg, var(--secondary-bg), #ffe066);
    color: var(--text-on-yellow);
}

.tools-parent-container {
    /* Form Grid */
}

.tools-parent-container .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.tools-parent-container .form-group {
    position: relative;
}

.tools-parent-container .form-group label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-10-16);
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tools-parent-container {
    /* Tooltips */
}

.tools-parent-container .tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(16px, 14px + 0.3vw, 22px);
    height: clamp(16px, 14px + 0.3vw, 22px);
    border-radius: 50%;
    background: var(--secondary-bg);
    color: var(--text-on-yellow);
    font-size: var(--fs-10-16);
    cursor: help;
    position: relative;
    border: 1px solid var(--accent-dark);
    transition: all 0.4s var(--spring-bounce);
    font-weight: 700;
}

.tools-parent-container .tooltip-trigger:hover {
    background: var(--accent-dark);
    transform: scale(1.1);
}

.tools-parent-container .tooltip-trigger .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    /* ✅ Question mark se exactly start hoga */
    transform: translateY(12px) scale(0.9);
    background: var(--text-dark);
    color: var(--primary-bg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--fs-10-16);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(58, 46, 0, 0.3);
    border: 2px solid var(--secondary-bg);
    transition: all 0.45s var(--spring-bounce);
    z-index: 100;
    filter: blur(4px);
    /* ✅ Responsive width with auto wrap */
    width: max-content;
    max-width: clamp(200px, 50vw, 320px);
    white-space: normal;
    word-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 640px) {
    .tools-parent-container .tooltip-trigger .tooltip-text {
        left: 50%;
        transform: translateX(-50%) translateY(12px) scale(0.9);
        width: max-content;
    }

    .tools-parent-container .tooltip-trigger:hover .tooltip-text {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .tools-parent-container .tooltip-trigger .tooltip-text::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .tools-parent-container .disclaimer-footer {
        padding: var(--space-md) var(--space-lg);
        margin-top: var(--space-xl);
    }

    .tools-parent-container .disclaimer-footer p {
        text-align: left;
        font-size: var(--fs-10-16);
    }
}

@media (min-width: 641px) {
    .tools-parent-container .form-grid .form-group:nth-child(2n) .tooltip-trigger .tooltip-text {
        left: auto;
        right: 0;
        transform: translateY(12px) scale(0.9);
    }

    .tools-parent-container .form-grid .form-group:nth-child(2n) .tooltip-trigger:hover .tooltip-text {
        transform: translateY(0) scale(1);
    }

    .tools-parent-container .form-grid .form-group:nth-child(2n) .tooltip-trigger .tooltip-text::after {
        left: auto;
        right: 12px;
    }

    .tools-parent-container {
        /* Last form group - Right aligned */
    }

    .tools-parent-container .form-grid .form-group:last-child .tooltip-trigger .tooltip-text {
        left: auto;
        right: 0;
        transform: translateY(12px) scale(0.9);
    }

    .tools-parent-container .form-grid .form-group:last-child .tooltip-trigger:hover .tooltip-text {
        transform: translateY(0) scale(1);
    }

    .tools-parent-container .form-grid .form-group:last-child .tooltip-trigger .tooltip-text::after {
        left: auto;
        right: 12px;
    }
}

.tools-parent-container .form-group:last-child .tooltip-trigger .tooltip-text {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(12px) scale(0.9);
}

.tools-parent-container .form-group:last-child .tooltip-trigger:hover .tooltip-text {
    transform: translateX(0) translateY(0) scale(1);
}

.tools-parent-container .tooltip-trigger .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    /* ✅ Question mark ke niche arrow */
    transform: translateX(0);
    border: 6px solid transparent;
    border-top-color: var(--text-dark);
}

.tools-parent-container .tooltip-trigger:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

.tools-parent-container {
    /* Inputs */
}

.tools-parent-container .input-wrapper {
    position: relative;
    display: flex;
    gap: 0;
}

.tools-parent-container .input-wrapper input,
.tools-parent-container .input-wrapper select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--primary-bg);
    border: 2px solid var(--border-yellow);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-size: var(--fs-12-16);
    transition: all 0.45s var(--spring-bounce);
    outline: none;
    -moz-appearance: textfield;
    font-family: inherit;
}

.tools-parent-container .input-wrapper input::-webkit-outer-spin-button,
.tools-parent-container .input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tools-parent-container .input-wrapper input::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}

.tools-parent-container .input-wrapper input:focus,
.tools-parent-container .input-wrapper select:focus {
    border-color: var(--accent-dark);
    background: var(--accent-lighter);
    box-shadow: 0 0 0 4px rgba(255, 198, 47, 0.2), 0 4px 20px var(--shadow-yellow);
    transform: scale(1.02) translateY(-2px);
}

.tools-parent-container .input-wrapper.has-unit input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.tools-parent-container .unit-toggle {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-yellow);
    border-left: 1px solid rgba(255, 198, 47, 0.3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    overflow: hidden;
    min-width: clamp(42px, 36px + 1vw, 58px);
    background: var(--primary-bg);
}

.tools-parent-container .unit-toggle button {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: var(--fs-10-16);
    font-weight: 700;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    transition: all 0.4s var(--spring-bounce);
    letter-spacing: 0.3px;
}

.tools-parent-container .unit-toggle button.active {
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-dark));
    color: var(--text-on-yellow);
    transform: scale(1.05);
}

.tools-parent-container .unit-toggle button:hover:not(.active) {
    background: var(--accent-lighter);
    transform: scale(1.08);
}

.tools-parent-container .input-wrapper select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c4a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-sm) center;
    padding-right: var(--space-xl);
}

.tools-parent-container select option {
    background: var(--primary-bg);
    color: var(--text-dark);
}

.tools-parent-container {
    /* Errors */
}

.tools-parent-container .error-message {
    font-size: var(--fs-10-16);
    color: var(--danger);
    margin-top: var(--space-xs);
    display: none;
    align-items: center;
    gap: var(--space-xs);
}

.tools-parent-container .error-message.visible {
    display: flex;
    animation: errorSpringIn 0.6s var(--spring-snappy) both;
}

@keyframes errorSpringIn {
    0% {
        transform: translateX(-20px) scale(0.8);
        opacity: 0;
        filter: blur(4px);
    }

    60% {
        transform: translateX(6px) scale(1.05);
    }

    80% {
        transform: translateX(-2px) scale(0.98);
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

.tools-parent-container .input-wrapper.error input,
.tools-parent-container .input-wrapper.error select {
    border-color: var(--danger);
    background: var(--danger-bg);
    animation: inputShake 0.5s var(--spring-bounce);
}

@keyframes inputShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(3px);
    }
}

.tools-parent-container .input-wrapper.valid input,
.tools-parent-container .input-wrapper.valid select {
    border-color: var(--success);
    animation: inputValidPop 0.4s var(--spring-bounce);
}

@keyframes inputValidPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.tools-parent-container {
    /* Sun Toggle */
}

.tools-parent-container .sun-toggle-group {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.tools-parent-container .sun-option {
    flex: 1;
    min-width: 70px;
}

.tools-parent-container .sun-option input {
    display: none;
}

.tools-parent-container .sun-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs);
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-yellow);
    background: var(--primary-bg);
    cursor: pointer;
    transition: all 0.45s var(--spring-bounce);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.tools-parent-container .sun-option label .sun-icon {
    font-size: var(--fs-12-24);
    color: var(--accent-dark);
    transition: transform 0.5s var(--spring-snappy), color 0.3s;
}

.tools-parent-container .sun-option label .sun-label {
    font-size: var(--fs-10-16);
    color: var(--text-medium);
    transition: all 0.3s var(--spring-gentle);
}

.tools-parent-container .sun-option input:checked+label {
    border-color: var(--accent-dark);
    background: linear-gradient(135deg, var(--accent-lighter), var(--accent-light));
    transform: scale(1.06) translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow-yellow);
}

.tools-parent-container .sun-option input:checked+label .sun-icon {
    transform: scale(1.3) rotate(20deg);
    color: var(--accent-deeper);
}

.tools-parent-container .sun-option input:checked+label .sun-label {
    color: var(--text-dark);
    font-weight: 700;
}

.tools-parent-container .sun-option label:hover {
    border-color: var(--secondary-bg);
    background: var(--accent-lighter);
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 6px 20px var(--shadow-yellow);
}

.tools-parent-container .optional-badge {
    font-size: var(--fs-10-16);
    background: var(--accent-lighter);
    padding: 2px var(--space-sm);
    border-radius: 20px;
    font-weight: 600;
    color: var(--text-medium);
    border: 1px solid var(--border-yellow);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.tools-parent-container {
    /* Actions */
}

.tools-parent-container .actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.tools-parent-container .btn {
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-12-18);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.45s var(--spring-bounce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 130px;
    font-family: inherit;
}

.tools-parent-container .btn-primary {
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-dark));
    color: var(--text-on-yellow);
    box-shadow: 0 4px 20px var(--shadow-yellow);
}

.tools-parent-container .btn-primary:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 12px 40px rgba(255, 198, 47, 0.5), 0 0 60px rgba(255, 198, 47, 0.15);
}

.tools-parent-container .btn-primary:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}

.tools-parent-container .btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s;
}

.tools-parent-container .btn-primary:hover::after {
    left: 100%;
}

.tools-parent-container .btn-secondary {
    background: var(--primary-bg);
    color: var(--text-medium);
    border: 2px solid var(--border-yellow);
}

.tools-parent-container .btn-secondary:hover {
    background: var(--accent-lighter);
    color: var(--text-dark);
    border-color: var(--accent-dark);
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 24px var(--shadow-yellow);
}

.tools-parent-container .btn-secondary:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}

.tools-parent-container .btn.loading .btn-text {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s var(--spring-smooth);
}

.tools-parent-container .btn .spinner {
    display: none;
    width: clamp(16px, 14px + 0.3vw, 24px);
    height: clamp(16px, 14px + 0.3vw, 24px);
    border: 3px solid rgba(74, 56, 0, 0.2);
    border-top-color: var(--text-on-yellow);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    position: absolute;
}

.tools-parent-container .btn.loading .spinner {
    display: block;
    animation: spin 0.6s linear infinite, spinnerPop 0.4s var(--spring-bounce);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinnerPop {
    0% {
        transform: scale(0) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.tools-parent-container {
    /* Results */
}

.tools-parent-container .results-section {
    display: none;
}

.tools-parent-container .results-section.visible {
    display: block;
}

.tools-parent-container .result-hero {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: linear-gradient(135deg, var(--accent-lighter), var(--accent-light), var(--accent-lighter));
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    border: 2px solid var(--secondary-bg);
    position: relative;
    overflow: hidden;
}

.tools-parent-container .result-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 198, 47, 0.2), transparent);
    animation: heroGlow 5s ease-in-out infinite;
}

@keyframes heroGlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-10%, 10%) scale(1.15);
        opacity: 1;
    }
}

.tools-parent-container .result-value {
    font-size: var(--fs-26-60);
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

.tools-parent-container .result-unit {
    font-size: var(--fs-12-20);
    color: var(--text-medium);
    margin-top: var(--space-xs);
    position: relative;
    z-index: 1;
}

.tools-parent-container .result-glasses {
    margin-top: var(--space-sm);
    font-size: var(--fs-12-18);
    color: var(--text-on-yellow);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.tools-parent-container .result-glasses .glass-icons {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}

.tools-parent-container .result-glasses .glass-icon {
    font-size: var(--fs-12-20);
    color: var(--accent-dark);
}

.tools-parent-container {
    /* Gauge */
}

.tools-parent-container .gauge-container {
    position: relative;
    width: clamp(130px, 110px + 4vw, 200px);
    height: clamp(130px, 110px + 4vw, 200px);
    margin: 0 auto var(--space-md);
}

.tools-parent-container .gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tools-parent-container .gauge-bg {
    fill: none;
    stroke: var(--accent-lighter);
    stroke-width: 12;
}

.tools-parent-container .gauge-fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 2s var(--spring-bounce), stroke 0.5s ease;
    filter: drop-shadow(0 0 8px var(--shadow-yellow));
}

.tools-parent-container .gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.tools-parent-container .gauge-center .gauge-icon-display {
    font-size: var(--fs-16-32);
    display: block;
    margin-bottom: 2px;
    color: var(--accent-dark);
    animation: gaugePulse 2s ease-in-out infinite;
}

@keyframes gaugePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.tools-parent-container .gauge-center .gauge-label {
    font-size: var(--fs-10-16);
    color: var(--text-medium);
    font-weight: 600;
}

.tools-parent-container {
    /* Breakdown */
}

.tools-parent-container .breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.tools-parent-container .breakdown-item {
    background: var(--accent-lighter);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    border-left: 4px solid var(--secondary-bg);
    transition: all 0.45s var(--spring-bounce);
}

.tools-parent-container .breakdown-item:hover {
    transform: translateX(8px) scale(1.03) translateY(-2px);
    background: var(--accent-light);
    box-shadow: 0 8px 24px var(--shadow-yellow);
}

.tools-parent-container .breakdown-item.climate-adj {
    border-left-color: var(--accent-dark);
}

.tools-parent-container .breakdown-item.activity-adj {
    border-left-color: #e6a800;
}

.tools-parent-container .breakdown-item.sun-adj {
    border-left-color: #ffb347;
}

.tools-parent-container .breakdown-label {
    font-size: var(--fs-10-16);
    color: var(--text-medium);
    margin-bottom: var(--space-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tools-parent-container .breakdown-value {
    font-size: var(--fs-12-20);
    font-weight: 700;
    color: var(--text-dark);
}

.tools-parent-container .breakdown-detail {
    font-size: var(--fs-10-16);
    color: var(--text-light);
    margin-top: 2px;
}

.tools-parent-container {
    /* Dynamic Messages */
}

.tools-parent-container .dynamic-message {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--fs-12-16);
    line-height: 1.5;
    border: 2px solid;
}

.tools-parent-container .dynamic-message.info {
    background: var(--info-bg);
    border-color: rgba(21, 101, 192, 0.3);
    color: var(--info-blue);
}

.tools-parent-container .dynamic-message.warning {
    background: var(--warning-bg);
    border-color: rgba(230, 81, 0, 0.3);
    color: var(--warning-orange);
}

.tools-parent-container .dynamic-message.danger {
    background: var(--danger-bg);
    border-color: rgba(211, 47, 47, 0.3);
    color: var(--danger);
}

.tools-parent-container .dynamic-message.success {
    background: var(--success-bg);
    border-color: rgba(46, 125, 50, 0.3);
    color: var(--success);
}

.tools-parent-container .dynamic-message .msg-icon {
    font-size: var(--fs-12-20);
    flex-shrink: 0;
    margin-top: 2px;
}

.tools-parent-container {
    /* Tips */
}

.tools-parent-container .tips-list {
    margin-top: var(--space-md);
}

.tools-parent-container .tips-list h4 {
    font-size: var(--fs-12-16);
    color: var(--text-medium);
    margin-bottom: var(--space-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.tools-parent-container .tips-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.tools-parent-container .tips-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-12-16);
    color: var(--text-medium);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--accent-lighter);
    transition: all 0.4s var(--spring-bounce);
    border: 1px solid transparent;
}

.tools-parent-container .tips-list li:hover {
    background: var(--accent-light);
    border-color: var(--border-yellow);
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 4px 16px var(--shadow-yellow);
}

.tools-parent-container .tips-list li .tip-icon {
    font-size: var(--fs-12-18);
    flex-shrink: 0;
    color: var(--accent-dark);
    transition: transform 0.4s var(--spring-snappy);
}

.tools-parent-container .tips-list li:hover .tip-icon {
    transform: scale(1.2) rotate(10deg);
}

.tools-parent-container {
    /* Time Input */
}

.tools-parent-container .time-input-group {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.tools-parent-container .time-input-group input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--primary-bg);
    border: 2px solid var(--border-yellow);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-size: var(--fs-12-16);
    transition: all 0.45s var(--spring-bounce);
    outline: none;
    font-family: inherit;
}

.tools-parent-container .time-input-group input:focus {
    border-color: var(--accent-dark);
    background: var(--accent-lighter);
    box-shadow: 0 0 0 4px rgba(255, 198, 47, 0.2), 0 4px 20px var(--shadow-yellow);
    transform: scale(1.02) translateY(-2px);
}

.tools-parent-container .time-hint {
    font-size: var(--fs-10-16);
    color: var(--text-light);
    margin-top: var(--space-xs);
}

.tools-parent-container .time-format-btns {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    flex-wrap: wrap;
}

.tools-parent-container .time-format-btns button {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: var(--accent-lighter);
    border: 1px solid var(--border-yellow);
    color: var(--text-medium);
    font-size: var(--fs-10-16);
    cursor: pointer;
    transition: all 0.4s var(--spring-bounce);
    font-family: inherit;
}

.tools-parent-container .time-format-btns button:hover {
    background: var(--secondary-bg);
    border-color: var(--accent-dark);
    color: var(--text-on-yellow);
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 6px 18px var(--shadow-yellow);
}

.tools-parent-container .time-format-btns button:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}

.tools-parent-container {
    /* Footer */
}

.tools-parent-container footer {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--text-light);
    font-size: var(--fs-10-16);
    position: relative;
    z-index: 1;
}

.tools-parent-container {
    /* Results Wrapper - using grid collapse for smooth height */
}

.tools-parent-container .results-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.9s var(--spring-bounce), opacity 0.6s var(--spring-smooth);
    opacity: 0;
}

.tools-parent-container .results-wrapper>div {
    overflow: hidden;
}

.tools-parent-container .results-wrapper.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.tools-parent-container {
    /* Toast System */
}

.tools-parent-container .toast-container {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
    max-width: clamp(280px, 250px + 8vw, 420px);
}

.tools-parent-container .toast {
    background: var(--accent-cream);
    border: 2px solid var(--secondary-bg);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);
    box-shadow: 0 8px 32px rgba(58, 46, 0, 0.2), 0 0 0 1px rgba(255, 198, 47, 0.3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    font-size: var(--fs-12-16);
    animation: toastSpringIn 0.7s var(--spring-bounce) both;
}

.tools-parent-container .toast::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-dark));
    animation: toastTimer linear forwards;
}

.tools-parent-container .toast.toast-success {
    border-color: var(--success);
}

.tools-parent-container .toast.toast-success::before {
    background: var(--success);
}

.tools-parent-container .toast.toast-error {
    border-color: var(--danger);
}

.tools-parent-container .toast.toast-error::before {
    background: var(--danger);
}

.tools-parent-container .toast.toast-warning {
    border-color: var(--warning-orange);
}

.tools-parent-container .toast.toast-warning::before {
    background: var(--warning-orange);
}

.tools-parent-container .toast.toast-info {
    border-color: var(--info-blue);
}

.tools-parent-container .toast.toast-info::before {
    background: var(--info-blue);
}

@keyframes toastSpringIn {
    0% {
        opacity: 0;
        transform: translateX(120%) scale(0.6) rotate(5deg);
        filter: blur(8px);
    }

    50% {
        transform: translateX(-8%) scale(1.03) rotate(-1deg);
    }

    70% {
        transform: translateX(3%) scale(0.99);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
        filter: blur(0px);
    }
}

@keyframes toastSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(120%) scale(0.7);
        filter: blur(6px);
    }
}

@keyframes toastTimer {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.tools-parent-container .toast-icon {
    font-size: var(--fs-12-20);
    flex-shrink: 0;
    margin-top: 2px;
    animation: toastIconBounce 0.6s var(--spring-snappy) 0.3s both;
}

@keyframes toastIconBounce {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    60% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.tools-parent-container .toast-content {
    flex: 1;
}

.tools-parent-container .toast-title {
    font-weight: 700;
    color: var(--text-dark);
    font-size: var(--fs-12-16);
    margin-bottom: 2px;
}

.tools-parent-container .toast-message {
    color: var(--text-medium);
    font-size: var(--fs-10-16);
    line-height: 1.4;
}

.tools-parent-container .toast-close {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: var(--fs-12-18);
    padding: 0;
    transition: all 0.35s var(--spring-bounce);
    flex-shrink: 0;
}

.tools-parent-container .toast-close:hover {
    color: var(--text-dark);
    transform: rotate(90deg) scale(1.2);
}

.tools-parent-container {
    /* Confirm Toast */
}

.tools-parent-container .confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(58, 46, 0, 0.3);
    backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    animation: overlayFadeIn 0.4s var(--spring-smooth) both;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.tools-parent-container .confirm-dialog {
    background: var(--accent-cream);
    border: 2px solid var(--secondary-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 400px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(58, 46, 0, 0.25), 0 0 0 4px rgba(255, 198, 47, 0.15);
    text-align: center;
    animation: confirmSpringIn 0.7s var(--spring-snappy) both;
}

@keyframes confirmSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(60px) rotate(-5deg);
        filter: blur(12px);
    }

    50% {
        transform: scale(1.06) translateY(-8px) rotate(1deg);
    }

    70% {
        transform: scale(0.98) translateY(3px) rotate(-0.5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
        filter: blur(0px);
    }
}

.tools-parent-container .confirm-icon {
    font-size: var(--fs-20-42);
    color: var(--accent-dark);
    margin-bottom: var(--space-md);
    animation: confirmIconSpring 0.8s var(--spring-snappy) 0.3s both;
}

@keyframes confirmIconSpring {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.3) rotate(10deg);
    }

    70% {
        transform: scale(0.9) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.tools-parent-container .confirm-title {
    font-size: var(--fs-12-20);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.tools-parent-container .confirm-message {
    font-size: var(--fs-12-16);
    color: var(--text-medium);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

.tools-parent-container .confirm-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

.tools-parent-container .confirm-actions .btn {
    min-width: 100px;
    flex: none;
}

.tools-parent-container {
    /* Ripple Animation on buttons */
}

.tools-parent-container .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: rippleEffect 0.7s var(--spring-gentle);
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.tools-parent-container {
    /* Responsive */
}

@media (min-width: 640px) {
    .tools-parent-container .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tools-parent-container .form-grid .full-width {
        grid-column: 1/-1;
    }
}

@media (max-width: 480px) {
    .tools-parent-container .container {
        padding: var(--space-sm);
    }

    .tools-parent-container header {
        padding: var(--space-lg) var(--space-sm) var(--space-md);
    }

    .tools-parent-container .card {
        padding: var(--space-md);
    }

    .tools-parent-container .actions {
        flex-direction: column;
    }

    .tools-parent-container .btn {
        width: 100%;
    }

    .tools-parent-container .breakdown-grid {
        grid-template-columns: 1fr;
    }

    .tools-parent-container .toast-container {
        top: var(--space-sm);
        right: var(--space-sm);
        left: var(--space-sm);
        max-width: none;
    }

    .tools-parent-container .disclaimer-footer {
        padding: var(--space-sm) var(--space-md);
        margin-top: var(--space-lg);
        border-radius: var(--radius-sm);
    }

    .tools-parent-container .disclaimer-footer-title {
        font-size: var(--fs-12-16);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .tools-parent-container .container {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .tools-parent-container .container {
        max-width: 960px;
    }
}

@media (min-width: 1600px) {
    .tools-parent-container .container {
        max-width: 1100px;
    }
}

@media (min-width: 1920px) {
    .tools-parent-container .container {
        max-width: 1200px;
    }
}

.tools-parent-container .input-wrapper input:disabled,
.tools-parent-container .input-wrapper select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tools-parent-container *:focus-visible {
    outline: 3px solid var(--secondary-bg);
    outline-offset: 2px;
}

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

    .tools-parent-container *,
    .tools-parent-container *::before,
    .tools-parent-container *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.tools-parent-container .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.tools-parent-container {
    /* Water wave animation in result hero */
}

.tools-parent-container .wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    overflow: hidden;
    z-index: 0;
}

.tools-parent-container .wave {
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: rgba(255, 198, 47, 0.15);
    border-radius: 40% 40% 0 0;
    animation: waveMove 4s ease-in-out infinite;
}

.tools-parent-container .wave:nth-child(2) {
    background: rgba(230, 168, 0, 0.1);
    animation-delay: -1s;
    animation-duration: 5s;
}

@keyframes waveMove {

    0%,
    100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(2%) translateY(-5px);
    }
}

.tools-parent-container {
    /* Particle burst on calculate */
}

.tools-parent-container .particle-burst {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.tools-parent-container .particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary-bg);
    animation: particleFly 1s var(--spring-gentle) forwards;
}

@keyframes particleFly {
    from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(var(--px), var(--py)) scale(0);
    }
}

.tools-parent-container {
    /* ═══════════════════════════════════
             ANIMATED SECTION DIVIDERS
             ═══════════════════════════════════ */
}

.tools-parent-container .section-divider {
    height: 3px;
    margin: var(--space-md) 0;
    background: linear-gradient(90deg, transparent, var(--secondary-bg), var(--accent-dark), var(--secondary-bg), transparent);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: dividerFlow 3s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes dividerFlow {
    0% {
        background-position: -200% 0;
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        background-position: 200% 0;
        opacity: 0.4;
    }
}

.tools-parent-container {
    /* ═══════════════════════════════════
             ANIMATED VALUE HIGHLIGHT
             ═══════════════════════════════════ */
}

.tools-parent-container .fm-value-highlight {
    display: inline-block;
    position: relative;
}

.tools-parent-container .fm-value-highlight::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-dark));
    border-radius: 2px;
    transition: width 0.8s var(--spring-bounce);
}

.tools-parent-container .fm-value-highlight.fm-active::after {
    width: 100%;
}

.tools-parent-container {
    /* ═══════════════════════════════════
             GLASS ICON FRAMER ANIMATIONS
             ═══════════════════════════════════ */
}

.tools-parent-container .glass-icon-animated {
    display: inline-block;
    opacity: 0;
    transform: scale(0) rotate(-180deg) translateY(20px);
    transition: opacity 0.4s var(--spring-smooth), transform 0.6s var(--spring-snappy);
}

.tools-parent-container .glass-icon-animated.fm-pop {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
}

.tools-parent-container {
    /* ═══════════════════════════════════
             RESULT NUMBER SLOT MACHINE EFFECT
             ═══════════════════════════════════ */
}

.tools-parent-container .fm-slot-wrapper {
    display: inline-flex;
    overflow: hidden;
    vertical-align: bottom;
}

.tools-parent-container .fm-slot-digit {
    display: inline-block;
    animation: slotRoll 0.6s var(--spring-bounce) both;
}

@keyframes slotRoll {
    0% {
        transform: translateY(-100%);
        opacity: 0;
        filter: blur(4px);
    }

    50% {
        filter: blur(1px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

.tools-parent-container {
    /* ═══════════════════════════════════
             BREAKDOWN CARD FLIP REVEAL
             ═══════════════════════════════════ */
}

.tools-parent-container .fm-card-flip {
    perspective: 800px;
}

.tools-parent-container .fm-card-flip-inner {
    transition: transform 0.8s var(--spring-bounce);
    transform-style: preserve-3d;
    transform: rotateY(90deg) scale(0.8);
    opacity: 0;
}

.tools-parent-container .fm-card-flip-inner.fm-flipped {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
}

.tools-parent-container {
    /* ═══════════════════════════════════
             MESSAGE SLIDE CASCADE
             ═══════════════════════════════════ */
}

.tools-parent-container .fm-cascade {
    opacity: 0;
    transform: translateX(-60px) scale(0.9) rotate(-2deg);
    filter: blur(6px);
    transition: opacity 0.5s var(--spring-smooth), transform 0.7s var(--spring-bounce), filter 0.4s ease-out;
}

.tools-parent-container .fm-cascade.fm-visible {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: blur(0px);
}

.tools-parent-container {
    /* ═══════════════════════════════════
             TIP ITEM SPRING REVEAL
             ═══════════════════════════════════ */
}

.tools-parent-container .fm-tip-spring {
    opacity: 0;
    transform: translateY(30px) translateX(-20px) scale(0.9);
    filter: blur(3px);
    transition: opacity 0.5s var(--spring-smooth), transform 0.65s var(--spring-bounce), filter 0.4s ease-out;
}

.tools-parent-container .fm-tip-spring.fm-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0px);
}

.tools-parent-container .btn-download-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    color: var(--secondary-bg);
    border: 2px solid rgba(255, 198, 47, 0.4);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-10-16);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.3s var(--spring-bounce), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tools-parent-container .btn-download-pdf::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 198, 47, 0.12), transparent);
    animation: pdfBtnShimmer 3s ease-in-out infinite;
}

@keyframes pdfBtnShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.tools-parent-container .btn-download-pdf:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 32px rgba(255, 198, 47, 0.3), 0 0 0 4px rgba(255, 198, 47, 0.08);
    border-color: var(--secondary-bg);
    background: linear-gradient(135deg, #16213e, #1a1a2e, #0f3460);
}

.tools-parent-container .btn-download-pdf:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}

.tools-parent-container .btn-download-pdf i {
    font-size: var(--fs-12-18);
    transition: transform 0.4s var(--spring-bounce);
    filter: drop-shadow(0 0 6px rgba(255, 198, 47, 0.5));
}

.tools-parent-container .btn-download-pdf:hover i {
    transform: rotate(-12deg) scale(1.2);
}

.tools-parent-container .btn-download-pdf .btn-pdf-badge {
    background: var(--secondary-bg);
    color: #1a1a2e;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}

.tools-parent-container .pdf-loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.tools-parent-container .pdf-loader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.tools-parent-container .pdf-loader-box {
    text-align: center;
    padding: clamp(28px, 4vw + 10px, 56px);
    max-width: 520px;
    width: 90%;
    position: relative;
}

.tools-parent-container .pdf-loader-brand {
    font-size: clamp(42px, 6vw + 10px, 82px);
    font-weight: 900;
    font-family: "Segoe UI", system-ui, sans-serif;
    text-transform: none;
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--accent-dark);
    background: linear-gradient(to top, var(--secondary-bg) 50%, transparent 50%);
    background-size: 100% 200%;
    background-position: 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke-width: 2.5px;
    paint-order: stroke fill;
    animation: pdfTextFill 2.8s ease-in-out infinite;
    margin-bottom: clamp(8px, 1.5vw, 18px);
    user-select: none;
    filter: drop-shadow(0 0 30px rgba(255, 198, 47, 0.3));
    display: inline-block;
    padding-right: 0.1em;
}

@keyframes pdfTextFill {
    0% {
        background-position: 0% 100%;
        background-size: 100% 200%;
    }

    50% {
        background-position: 0% 0%;
        background-size: 100% 200%;
    }

    100% {
        background-position: 0% 100%;
        background-size: 100% 200%;
    }
}

.tools-parent-container .pdf-loader-subtitle {
    font-size: clamp(11px, 1.2vw + 5px, 16px);
    color: rgba(255, 243, 204, 0.85);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: clamp(16px, 2vw + 6px, 30px);
    animation: pdfSubPulse 2s ease-in-out infinite;
}

@keyframes pdfSubPulse {

    0%,
    100% {
        opacity: 0.7;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.tools-parent-container .pdf-loader-message {
    font-size: clamp(13px, 1.2vw + 6px, 18px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: clamp(20px, 2.5vw + 8px, 36px);
    animation: pdfMsgFade 3s ease-in-out infinite;
}

@keyframes pdfMsgFade {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.tools-parent-container .pdf-loader-spinner-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
    margin-bottom: clamp(14px, 2vw, 24px);
}

.tools-parent-container .pdf-loader-spinner {
    width: clamp(32px, 4vw + 12px, 52px);
    height: clamp(32px, 4vw + 12px, 52px);
    border: 3px solid rgba(255, 198, 47, 0.15);
    border-top: 3px solid var(--secondary-bg);
    border-right: 3px solid var(--accent-dark);
    border-radius: 50%;
    animation: pdfSpin 0.9s linear infinite;
    filter: drop-shadow(0 0 12px rgba(255, 198, 47, 0.4));
}

@keyframes pdfSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.tools-parent-container .pdf-loader-status {
    font-size: clamp(10px, 1vw + 4px, 14px);
    color: var(--secondary-bg);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: pdfStatusBlink 1.5s ease-in-out infinite;
}

@keyframes pdfStatusBlink {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.tools-parent-container .pdf-loader-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 198, 47, 0.12);
    border-radius: 4px;
    overflow: hidden;
    margin-top: clamp(14px, 2vw, 24px);
}

.tools-parent-container .pdf-loader-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-dark), var(--accent-light));
    border-radius: 4px;
    transition: width 0.4s ease;
    box-shadow: 0 0 12px rgba(255, 198, 47, 0.5);
}

.tools-parent-container .pdf-loader-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: clamp(12px, 1.5vw, 20px);
}

.tools-parent-container .pdf-loader-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary-bg);
    animation: pdfDotBounce 1.4s ease-in-out infinite;
}

.tools-parent-container .pdf-loader-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.tools-parent-container .pdf-loader-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pdfDotBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.tools-parent-container .disclaimer-footer {
    background: linear-gradient(145deg, rgba(255, 243, 204, 0.6), rgba(255, 230, 100, 0.2));
    border: 2px solid rgba(255, 198, 47, 0.35);
    border-radius: var(--radius);
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px var(--shadow-dark), 0 0 0 1px rgba(255, 198, 47, 0.15);
}

.tools-parent-container .disclaimer-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--danger), var(--warning-orange), var(--secondary-bg), var(--warning-orange), var(--danger));
    background-size: 200% 100%;
    animation: disclaimerBarSlide 4s linear infinite;
}

@keyframes disclaimerBarSlide {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

.tools-parent-container .disclaimer-footer-title {
    font-size: var(--fs-12-18);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tools-parent-container .disclaimer-footer-title i {
    color: var(--danger);
    font-size: var(--fs-12-20);
    animation: disclaimerIconPulse 2s ease-in-out infinite;
}

@keyframes disclaimerIconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

.tools-parent-container .disclaimer-footer p {
    font-size: var(--fs-10-16);
    color: var(--text-medium);
    line-height: 1.75;
    font-weight: 500;
    text-align: justify;
    margin: 0;
}

.tools-parent-container .disclaimer-footer .disclaimer-link {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    border-bottom: 1px dashed var(--accent-dark);
}

.tools-parent-container .disclaimer-footer .disclaimer-link:hover {
    color: var(--accent-deeper);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-deeper);
}

@media (max-width: 360px) {
    .tools-parent-container .tooltip-trigger .tooltip-text {
        max-width: calc(100vw - 20px);
        font-size: clamp(9px, 2.5vw, 11px);
        padding: var(--space-xs) var(--space-sm);
    }
}

@media (min-width: 1024px) {
    .tools-parent-container .tooltip-trigger .tooltip-text {
        max-width: 360px;
    }
}

.tools-parent-container #weightWrapper .tooltip-trigger .tooltip-text,
.tools-parent-container #weight~.tooltip-trigger .tooltip-text,
.tools-parent-container label[for=weight] .tooltip-trigger .tooltip-text {
    left: 0 !important;
    right: auto !important;
}

.tools-parent-container #weightWrapper .tooltip-trigger .tooltip-text::after,
.tools-parent-container #weight~.tooltip-trigger .tooltip-text::after,
.tools-parent-container label[for=weight] .tooltip-trigger .tooltip-text::after {
    left: 12px !important;
    right: auto !important;
    transform: translateX(0) !important;
}

@media (max-width: 639px) {
    .tools-parent-container .tooltip-trigger .tooltip-text {
        left: 0 !important;
        right: auto !important;
        transform: translateY(12px) scale(0.9) !important;
    }

    .tools-parent-container .tooltip-trigger:hover .tooltip-text {
        transform: translateY(0) scale(1) !important;
    }

    .tools-parent-container .tooltip-trigger .tooltip-text::after {
        left: 12px !important;
        right: auto !important;
        transform: translateX(0) !important;
    }
}