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

.tools-parent-container {
    --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;
    --primary-bg: #f5f4ed;
    --secondary-bg: #ffc62f;
    --accent-dark: #e5a800;
    --accent-deeper: #c99200;
    --accent-light: #fff0b3;
    --accent-cream: #fef9e7;
    --accent-warm: #f0d060;
    --accent-gold: #d4a017;
    --accent-honey: #eb9e34;
    --text-dark: #3a2e1a;
    --text-medium: #5c4a2a;
    --text-light: #7a6840;
    --text-muted: #9a8a6a;
    --card-bg: rgba(255, 248, 220, 0.85);
    --card-border: rgba(255, 198, 47, 0.35);
    --input-bg: rgba(255, 252, 240, 0.9);
    --input-border: rgba(212, 160, 23, 0.3);
    --input-focus: rgba(255, 198, 47, 0.45);
    --shadow-soft: rgba(212, 160, 23, 0.15);
    --shadow-medium: rgba(180, 140, 20, 0.2);
    --danger: #d94f3d;
    --danger-bg: #fce8e5;
    --success: #2e8b57;
    --success-bg: #e6f5ec;
    --risk-low: #2e8b57;
    --risk-moderate: #e5a800;
    --risk-high: #e07020;
    --risk-extreme: #d94f3d;
    --sp-4: clamp(4px, 0.3vw + 2px, 8px);
    --sp-8: clamp(6px, 0.5vw + 3px, 12px);
    --sp-12: clamp(8px, 0.7vw + 4px, 16px);
    --sp-16: clamp(10px, 1vw + 4px, 20px);
    --sp-20: clamp(12px, 1.2vw + 5px, 28px);
    --sp-24: clamp(14px, 1.5vw + 5px, 32px);
    --sp-32: clamp(16px, 2vw + 6px, 40px);
    --sp-40: clamp(20px, 2.5vw + 8px, 52px);
    --sp-48: clamp(24px, 3vw + 10px, 60px);
    --radius-sm: clamp(8px, 0.8vw + 4px, 16px);
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.tools-parent-container {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--primary-bg);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.6;
    max-width: 100%;
}

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

.tools-parent-container .tool-card,
.tools-parent-container .form-input,
.tools-parent-container .form-select,
.tools-parent-container .btn {
    max-width: none;
}

.tools-parent-container {
    /* ===== TOAST NOTIFICATION ===== */
}

.tools-parent-container .toast-container {
    position: fixed;
    top: var(--fs-12-24);
    right: var(--fs-12-24);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--fs-10-16);
    pointer-events: none;
}

.tools-parent-container .toast {
    pointer-events: auto;
    padding: var(--fs-12-18) var(--fs-12-24);
    border-radius: var(--fs-12-16);
    font-size: var(--fs-12-16);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--fs-10-16);
    min-width: 280px;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateX(120%) scale(0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .toast.show {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.tools-parent-container .toast.hide {
    transform: translateX(120%) scale(0.8);
    opacity: 0;
}

.tools-parent-container .toast-error {
    background: linear-gradient(135deg, #fff0ee, #fce8e5);
    color: var(--danger);
    border: 1.5px solid rgba(217, 79, 61, 0.3);
}

.tools-parent-container .toast-success {
    background: linear-gradient(135deg, #f0faf4, #e6f5ec);
    color: var(--success);
    border: 1.5px solid rgba(46, 139, 87, 0.3);
}

.tools-parent-container .toast-warning {
    background: linear-gradient(135deg, #fffcf0, var(--accent-light));
    color: var(--accent-deeper);
    border: 1.5px solid rgba(229, 168, 0, 0.3);
}

.tools-parent-container .toast-icon {
    font-size: var(--fs-12-20);
    flex-shrink: 0;
}

.tools-parent-container .toast-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    font-size: var(--fs-12-16);
    padding: 4px;
    transition: opacity 0.2s;
}

.tools-parent-container .toast-close:hover {
    opacity: 1;
}

.tools-parent-container {
    /* ===== ANIMATED BACKGROUND ===== */
}

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

.tools-parent-container .bg-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: floatCircle 20s ease-in-out infinite;
}

.tools-parent-container .bg-circle:nth-child(1) {
    width: 400px;
    height: 400px;
    background: var(--secondary-bg);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.tools-parent-container .bg-circle:nth-child(2) {
    width: 300px;
    height: 300px;
    background: var(--accent-warm);
    bottom: -80px;
    left: -80px;
    animation-delay: -7s;
}

.tools-parent-container .bg-circle:nth-child(3) {
    width: 250px;
    height: 250px;
    background: var(--accent-honey);
    top: 40%;
    right: -60px;
    animation-delay: -14s;
}

.tools-parent-container .bg-circle:nth-child(4) {
    width: 200px;
    height: 200px;
    background: var(--secondary-bg);
    top: 20%;
    left: -40px;
    animation-delay: -3s;
}

@keyframes floatCircle {

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

    25% {
        transform: translate(30px, -20px) scale(1.05);
    }

    50% {
        transform: translate(-20px, 30px) scale(0.95);
    }

    75% {
        transform: translate(15px, 15px) scale(1.02);
    }
}

.tools-parent-container {
    /* ===== PARTICLE SYSTEM ===== */
}

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

.tools-parent-container .particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg) scale(0);
    }

    10% {
        opacity: 0.75;
        transform: translateY(85vh) rotate(36deg) scale(1);
    }

    90% {
        opacity: 0.4;
        transform: translateY(5vh) rotate(324deg) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translateY(-5vh) rotate(360deg) scale(0);
    }
}

.tools-parent-container {
    /* ===== SUNRAY LINES ===== */
}

.tools-parent-container .sunray-container {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
    max-width: 100vw;
}

.tools-parent-container .sunray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--secondary-bg), transparent);
    transform-origin: top center;
    animation: rayRotate 30s linear infinite;
}

@keyframes rayRotate {
    from {
        transform: rotate(var(--ray-start));
    }

    to {
        transform: rotate(calc(var(--ray-start) + 360deg));
    }
}

.tools-parent-container {
    /* ===== MAIN CONTAINER ===== */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
}

.tools-parent-container .app-container {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: var(--fs-12-24) var(--fs-12-20) var(--fs-20-42);
    width: 100%;
    box-sizing: border-box;
}

.tools-parent-container {
    /* ===== HEADER ===== */
}

.tools-parent-container .app-header {
    text-align: center;
    padding: var(--fs-16-32) var(--fs-12-20) var(--fs-12-24);
    opacity: 0;
    transform: translateY(-40px);
    animation: headerSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes headerSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tools-parent-container .header-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fs-26-60);
    height: var(--fs-26-60);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-honey));
    margin-bottom: var(--fs-10-16);
    box-shadow: 0 6px 25px rgba(255, 198, 47, 0.4), 0 0 0 6px rgba(255, 198, 47, 0.15), 0 0 0 12px rgba(255, 198, 47, 0.08);
    animation: iconPulse 3s ease-in-out infinite;
    position: relative;
}

.tools-parent-container .header-icon-wrap::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 198, 47, 0.3);
    animation: dashRotate 12s linear infinite;
}

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

@keyframes iconPulse {

    0%,
    100% {
        box-shadow: 0 6px 25px rgba(255, 198, 47, 0.4), 0 0 0 6px rgba(255, 198, 47, 0.15), 0 0 0 12px rgba(255, 198, 47, 0.08);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 8px 35px rgba(255, 198, 47, 0.5), 0 0 0 10px rgba(255, 198, 47, 0.2), 0 0 0 18px rgba(255, 198, 47, 0.1);
        transform: scale(1.05);
    }
}

.tools-parent-container .header-icon-wrap i {
    font-size: calc(var(--fs-26-60) * 0.45);
    color: var(--text-dark);
}

.tools-parent-container .app-header h1 {
    font-size: var(--fs-20-42);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: var(--fs-10-16);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.tools-parent-container .app-header h1 span {
    color: var(--accent-dark);
    position: relative;
}

.tools-parent-container .app-header h1 span::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-honey));
    border-radius: 2px;
    animation: underlineGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

@keyframes underlineGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.tools-parent-container .app-header p {
    color: var(--text-light);
    font-size: var(--fs-12-18);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.6s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tools-parent-container {
    /* ===== SCROLL REVEAL ===== */
}

.tools-parent-container .scroll-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tools-parent-container .scroll-reveal-left {
    opacity: 0;
    transform: translateX(-50px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.tools-parent-container .scroll-reveal-right {
    opacity: 0;
    transform: translateX(50px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.tools-parent-container .scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

.tools-parent-container {
    /* ===== CARDS ===== */
}

.tools-parent-container .tool-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid var(--card-border);
    border-radius: var(--fs-12-24);
    padding: var(--fs-16-32) var(--fs-12-24);
    margin-bottom: var(--fs-12-20);
    box-shadow: 0 4px 20px var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
    position: relative;
    overflow: hidden;
}

.tools-parent-container .tool-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-honey), var(--secondary-bg));
    opacity: 0;
    transition: opacity 0.3s;
}

.tools-parent-container .tool-card:hover::before {
    opacity: 1;
}

.tools-parent-container .tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 45px var(--shadow-medium), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

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

.tools-parent-container .tool-card.tilt-active {
    transition: transform 0.1s ease-out, box-shadow 0.45s ease;
}

.tools-parent-container .card-header {
    display: flex;
    align-items: center;
    gap: var(--fs-10-16);
    margin-bottom: var(--fs-12-24);
    padding-bottom: var(--fs-10-16);
    border-bottom: 1.5px solid rgba(255, 198, 47, 0.2);
}

.tools-parent-container .card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fs-16-32);
    height: var(--fs-16-32);
    border-radius: var(--fs-10-16);
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-warm));
    color: var(--text-dark);
    font-size: calc(var(--fs-16-32) * 0.5);
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255, 198, 47, 0.3);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .tool-card:hover .card-header-icon {
    transform: rotate(8deg) scale(1.1);
}

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

.tools-parent-container {
    /* ===== FORM FIELDS ===== */
}

.tools-parent-container .form-group {
    margin-bottom: var(--fs-12-20);
    position: relative;
}

.tools-parent-container .form-group:last-child {
    margin-bottom: 0;
}

.tools-parent-container .form-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12-16);
    font-weight: 600;
    color: var(--text-medium);
    margin-bottom: var(--fs-10-16);
    letter-spacing: 0.2px;
    flex-wrap: wrap;
}

.tools-parent-container .form-label .required {
    color: var(--danger);
    font-weight: 700;
}

.tools-parent-container {
    /* ===== TOOLTIP - FULLY RESPONSIVE ===== */
}

.tools-parent-container .tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fs-12-20);
    height: var(--fs-12-20);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-light), var(--secondary-bg));
    color: var(--text-medium);
    font-size: var(--fs-10-16);
    cursor: pointer;
    border: 1.5px solid var(--card-border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tools-parent-container .tooltip-trigger:hover,
.tools-parent-container .tooltip-trigger.active {
    background: var(--secondary-bg);
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(255, 198, 47, 0.4);
}

.tools-parent-container .tooltip-trigger:hover .tooltip-content,
.tools-parent-container .tooltip-trigger.active .tooltip-content {
    pointer-events: auto;
}

.tools-parent-container .tooltip-content {
    position: fixed;
    z-index: 10001;
    background: var(--accent-cream);
    border: 1.5px solid var(--card-border);
    border-radius: var(--fs-12-16);
    padding: var(--fs-10-16) var(--fs-12-16);
    font-size: var(--fs-10-16);
    color: var(--text-medium);
    white-space: normal;
    width: max-content;
    max-width: min(320px, 100vw - 32px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 198, 47, 0.1);
    line-height: 1.5;
    pointer-events: none;
    font-weight: 500;
    transform: scale(0.85) translateY(8px);
    user-select: none;
    padding-top: 20px;
}

.tools-parent-container .tooltip-content.tooltip-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.tools-parent-container .tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--accent-cream);
    border: 1.5px solid var(--card-border);
    transform: rotate(45deg);
    z-index: -1;
}

.tools-parent-container .tooltip-arrow.arrow-bottom {
    bottom: -7px;
    border-top: none;
    border-left: none;
}

.tools-parent-container .tooltip-arrow.arrow-top {
    top: -7px;
    border-bottom: none;
    border-right: none;
}

.tools-parent-container .tooltip-arrow.arrow-left {
    left: -7px;
    border-top: none;
    border-right: none;
}

.tools-parent-container .tooltip-arrow.arrow-right {
    right: -7px;
    border-bottom: none;
    border-left: none;
}

.tools-parent-container {
    /* ===== TOOLTIP OVERLAY for mobile ===== */
}

.tools-parent-container .tooltip-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: overlayFadeIn 0.3s ease forwards;
}

.tools-parent-container .tooltip-overlay.active {
    display: block;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tools-parent-container {
    /* Mobile bottom sheet tooltip */
}

.tools-parent-container .tooltip-mobile-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: var(--accent-cream);
    border-top: 2px solid var(--card-border);
    border-radius: var(--fs-12-24) var(--fs-12-24) 0 0;
    padding: var(--fs-12-20) var(--fs-12-24) var(--fs-16-32);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 60vh;
    overflow-y: auto;
}

.tools-parent-container .tooltip-mobile-sheet.active {
    display: block;
    transform: translateY(0);
}

.tools-parent-container .tooltip-mobile-sheet .sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--card-border);
    border-radius: 2px;
    margin: 0 auto var(--fs-12-18);
}

.tools-parent-container .tooltip-mobile-sheet .sheet-content {
    font-size: var(--fs-12-16);
    color: var(--text-medium);
    line-height: 1.7;
    font-weight: 500;
}

.tools-parent-container .tooltip-mobile-sheet .sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--fs-10-16);
    margin-top: var(--fs-12-18);
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-warm));
    border: none;
    border-radius: var(--fs-10-16);
    font-size: var(--fs-12-16);
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
}

.tools-parent-container .form-input,
.tools-parent-container .form-select {
    width: 100%;
    padding: var(--fs-10-16) var(--fs-12-18);
    background: var(--input-bg);
    border: 1.5px solid var(--input-border);
    border-radius: var(--fs-10-16);
    color: var(--text-dark);
    font-size: var(--fs-12-16);
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.tools-parent-container .form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.tools-parent-container .form-input:focus,
.tools-parent-container .form-select:focus {
    border-color: var(--secondary-bg);
    box-shadow: 0 0 0 3px var(--input-focus), 0 4px 15px rgba(255, 198, 47, 0.15);
    background: #fffdf5;
    transform: scale(1.01);
}

.tools-parent-container .form-input.error,
.tools-parent-container .form-select.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(217, 79, 61, 0.15);
    animation: fieldShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.tools-parent-container .form-input.success,
.tools-parent-container .form-select.success {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.12);
}

@keyframes fieldShake {

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

    15% {
        transform: translateX(-6px);
    }

    30% {
        transform: translateX(5px);
    }

    45% {
        transform: translateX(-4px);
    }

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

    75% {
        transform: translateX(-2px);
    }
}

.tools-parent-container .form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c4a2a' d='M6 8.825L.35 3.175l.825-.825L6 7.175l4.825-4.825.825.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--fs-12-18) center;
    padding-right: var(--fs-20-42);
}

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

.tools-parent-container .error-message {
    display: none;
    font-size: var(--fs-10-16);
    color: var(--danger);
    margin-top: 6px;
    padding-left: 4px;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.tools-parent-container .error-message.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: errorReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes errorReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tools-parent-container .input-hint {
    font-size: var(--fs-10-16);
    color: var(--text-muted);
    margin-top: 4px;
    padding-left: 4px;
}

.tools-parent-container {
    /* ===== UV SCALE ===== */
}

.tools-parent-container .uv-scale {
    display: flex;
    gap: 3px;
    margin-top: var(--fs-10-16);
}

.tools-parent-container .uv-scale-segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    opacity: 0;
    transform: scaleX(0);
}

.tools-parent-container .uv-scale-segment.animated {
    opacity: 1;
    transform: scaleX(1);
}

.tools-parent-container .uv-scale-segment:hover {
    transform: scaleY(2.5) scaleX(1);
    filter: brightness(1.15);
}

.tools-parent-container .uv-scale-segment.s1 {
    background: #6bc26b;
}

.tools-parent-container .uv-scale-segment.s2 {
    background: #b5cc3b;
}

.tools-parent-container .uv-scale-segment.s3 {
    background: var(--secondary-bg);
}

.tools-parent-container .uv-scale-segment.s4 {
    background: var(--accent-honey);
}

.tools-parent-container .uv-scale-segment.s5 {
    background: var(--danger);
}

.tools-parent-container .uv-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: clamp(8px, 7px + 0.3vw, 12px);
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

.tools-parent-container {
    /* ===== RANGE SLIDER ===== */
}

.tools-parent-container .range-container {
    position: relative;
}

.tools-parent-container .range-value {
    position: absolute;
    right: 0;
    top: -2px;
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-warm));
    padding: 3px var(--fs-10-16);
    border-radius: var(--fs-10-16);
    font-size: var(--fs-10-16);
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(255, 198, 47, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .range-value.bumped {
    transform: scale(1.15);
}

.tools-parent-container input[type=range] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, var(--accent-light), var(--secondary-bg), var(--accent-honey));
    border-radius: 4px;
    outline: none;
    margin-top: var(--fs-10-16);
    cursor: pointer;
}

.tools-parent-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--fs-12-24);
    height: var(--fs-12-24);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--secondary-bg);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25), 0 0 0 4px var(--secondary-bg);
}

.tools-parent-container input[type=range]::-moz-range-thumb {
    width: var(--fs-12-24);
    height: var(--fs-12-24);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--secondary-bg);
    border: none;
}

.tools-parent-container {
    /* ===== TIME INPUT ===== */
}

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

.tools-parent-container .time-input-group .form-input {
    flex: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tools-parent-container .time-separator {
    color: var(--text-muted);
    font-size: var(--fs-12-20);
    font-weight: 700;
    animation: colonBlink 1.5s ease-in-out infinite;
}

@keyframes colonBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.tools-parent-container .time-label-mini {
    font-size: clamp(9px, 8px + 0.25vw, 13px);
    color: var(--text-muted);
    text-align: center;
    margin-top: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tools-parent-container .time-field {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tools-parent-container {
    /* ===== BUTTONS ===== */
}

.tools-parent-container .btn-group {
    display: flex;
    gap: var(--fs-10-16);
    flex-wrap: wrap;
}

.tools-parent-container .btn {
    flex: 1;
    min-width: 120px;
    padding: var(--fs-10-16) var(--fs-12-20);
    border: none;
    border-radius: var(--fs-10-16);
    font-size: var(--fs-12-16);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-10-16);
    font-family: inherit;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.tools-parent-container .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: width 0.6s ease, height 0.6s ease;
    transform: translate(-50%, -50%);
}

.tools-parent-container .btn:active::after {
    width: 300px;
    height: 300px;
}

.tools-parent-container .btn-primary {
    background: linear-gradient(135deg, var(--secondary-bg), var(--accent-dark));
    color: var(--text-dark);
    box-shadow: 0 4px 18px rgba(255, 198, 47, 0.35);
}

.tools-parent-container .btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 35px rgba(255, 198, 47, 0.5);
}

.tools-parent-container .btn-primary:active {
    transform: translateY(0) scale(0.97);
}

.tools-parent-container .btn-secondary {
    background: var(--accent-cream);
    color: var(--text-medium);
    border: 1.5px solid var(--card-border);
}

.tools-parent-container .btn-secondary:hover {
    background: var(--accent-light);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(255, 198, 47, 0.2);
}

.tools-parent-container .btn-preset {
    background: linear-gradient(135deg, var(--accent-warm), var(--accent-honey));
    color: var(--text-dark);
    box-shadow: 0 4px 18px rgba(235, 158, 52, 0.3);
}

.tools-parent-container .btn-preset:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 35px rgba(235, 158, 52, 0.45);
}

.tools-parent-container {
    /* Button icon spin on hover */
}

.tools-parent-container .btn:hover i {
    animation: btnIconSpin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

    50% {
        transform: rotate(15deg) scale(1.2);
    }

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

.tools-parent-container {
    /* ===== LOADING SPINNER ===== */
}

.tools-parent-container .btn-loading .btn-text {
    opacity: 0;
}

.tools-parent-container .btn-loading .btn-spinner {
    display: block;
}

.tools-parent-container .btn-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(58, 46, 26, 0.2);
    border-top-color: var(--text-dark);
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
    position: absolute;
}

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

.tools-parent-container {
    /* ===== RESULTS ===== */
}

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

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

.tools-parent-container .result-header {
    text-align: center;
    margin-bottom: var(--fs-12-20);
}

.tools-parent-container .result-header h2 {
    font-size: var(--fs-12-24);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: var(--fs-10-16);
}

.tools-parent-container {
    /* ===== BADGE ===== */
}

.tools-parent-container .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--fs-10-16) var(--fs-12-20);
    border-radius: var(--fs-16-32);
    font-size: var(--fs-10-16);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes badgePop {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }

    60% {
        transform: scale(1.1) rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.tools-parent-container .badge-low {
    background: var(--success-bg);
    color: var(--success);
    border: 1.5px solid rgba(46, 139, 87, 0.3);
}

.tools-parent-container .badge-moderate {
    background: var(--accent-light);
    color: var(--accent-deeper);
    border: 1.5px solid rgba(229, 168, 0, 0.3);
}

.tools-parent-container .badge-high {
    background: #fff0e6;
    color: var(--risk-high);
    border: 1.5px solid rgba(224, 112, 32, 0.3);
}

.tools-parent-container .badge-extreme {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1.5px solid rgba(217, 79, 61, 0.3);
    animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, extremeBadgePulse 1.5s ease-in-out infinite 0.9s;
}

@keyframes extremeBadgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(217, 79, 61, 0.3);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(217, 79, 61, 0);
    }
}

.tools-parent-container {
    /* ===== GAUGE ===== */
}

.tools-parent-container .gauge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--fs-12-20) 0;
}

.tools-parent-container .gauge-wrapper {
    position: relative;
    width: clamp(180px, 30vw, 260px);
    height: clamp(110px, 18vw, 155px);
}

.tools-parent-container .gauge-svg {
    width: 100%;
    height: 100%;
}

.tools-parent-container .gauge-bg {
    fill: none;
    stroke: rgba(255, 198, 47, 0.15);
    stroke-width: 18;
    stroke-linecap: round;
}

.tools-parent-container .gauge-fill {
    fill: none;
    stroke-width: 18;
    stroke-linecap: round;
    transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), stroke 0.5s ease;
    filter: drop-shadow(0 0 8px var(--gauge-glow, rgba(46, 139, 87, 0.4)));
}

.tools-parent-container .gauge-text {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.tools-parent-container .gauge-value {
    font-size: var(--fs-20-42);
    font-weight: 800;
    line-height: 1;
}

.tools-parent-container .gauge-label {
    font-size: var(--fs-10-16);
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 600;
}

.tools-parent-container {
    /* ===== RISK BAR ===== */
}

.tools-parent-container .risk-bar-container {
    margin: var(--fs-12-18) 0;
}

.tools-parent-container .risk-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: clamp(9px, 8px + 0.25vw, 13px);
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.tools-parent-container .risk-bar {
    width: 100%;
    height: var(--fs-10-16);
    background: rgba(255, 198, 47, 0.12);
    border-radius: var(--fs-10-16);
    overflow: hidden;
    position: relative;
}

.tools-parent-container .risk-bar-fill {
    height: 100%;
    border-radius: var(--fs-10-16);
    transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.tools-parent-container .risk-bar-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    animation: barIndicatorPulse 1.5s ease-in-out infinite;
}

@keyframes barIndicatorPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }

    50% {
        opacity: 0.4;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
}

.tools-parent-container {
    /* ===== RESULT CARDS GRID ===== */
}

.tools-parent-container .results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fs-10-16);
    margin-bottom: var(--fs-12-20);
}

.tools-parent-container .result-card {
    background: var(--accent-cream);
    border: 1.5px solid var(--card-border);
    border-radius: var(--fs-12-18);
    padding: var(--fs-12-18) var(--fs-10-16);
    text-align: center;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.85) rotateX(15deg);
    animation: resultCard3DPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    perspective: 800px;
}

.tools-parent-container .result-card:nth-child(1) {
    animation-delay: 0.4s;
}

.tools-parent-container .result-card:nth-child(2) {
    animation-delay: 0.55s;
}

.tools-parent-container .result-card:nth-child(3) {
    animation-delay: 0.7s;
}

.tools-parent-container .result-card:nth-child(4) {
    animation-delay: 0.85s;
}

.tools-parent-container .result-card:nth-child(5) {
    animation-delay: 1s;
}

@keyframes resultCard3DPop {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.85) rotateX(15deg);
    }

    60% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02) rotateX(-3deg);
    }

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

.tools-parent-container .result-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 12px 35px rgba(255, 198, 47, 0.25);
}

.tools-parent-container .result-card .card-icon {
    font-size: var(--fs-12-24);
    margin-bottom: var(--fs-10-16);
    color: var(--accent-dark);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .result-card:hover .card-icon {
    transform: scale(1.2) rotate(8deg);
}

.tools-parent-container .result-card .card-value {
    font-size: var(--fs-12-24);
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.2;
}

.tools-parent-container .result-card .card-desc {
    font-size: var(--fs-10-16);
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 500;
}

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

.tools-parent-container {
    /* ===== BURN EXCEEDED ===== */
}

.tools-parent-container .burn-status {
    padding: var(--fs-10-16) var(--fs-12-18);
    border-radius: var(--fs-10-16);
    font-size: var(--fs-12-16);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--fs-10-16);
    animation: statusSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

@keyframes statusSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.tools-parent-container .burn-exceeded {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(217, 79, 61, 0.2);
}

.tools-parent-container .burn-safe {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(46, 139, 87, 0.2);
}

.tools-parent-container {
    /* ===== RECOMMENDATIONS ===== */
}

.tools-parent-container .recommendations {
    list-style: none;
    padding: 0;
}

.tools-parent-container .recommendations li {
    display: flex;
    align-items: flex-start;
    gap: var(--fs-10-16);
    padding: var(--fs-10-16) var(--fs-10-16);
    border-bottom: 1px solid rgba(255, 198, 47, 0.15);
    font-size: var(--fs-12-16);
    color: var(--text-medium);
    opacity: 0;
    transform: translateX(-25px) scale(0.95);
    animation: recSlideIn3D 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    line-height: 1.5;
    border-radius: var(--fs-10-16);
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .recommendations li:hover {
    background: rgba(255, 198, 47, 0.08);
    transform: translateX(4px);
}

.tools-parent-container .recommendations li:nth-child(1) {
    animation-delay: 0.5s;
}

.tools-parent-container .recommendations li:nth-child(2) {
    animation-delay: 0.6s;
}

.tools-parent-container .recommendations li:nth-child(3) {
    animation-delay: 0.7s;
}

.tools-parent-container .recommendations li:nth-child(4) {
    animation-delay: 0.8s;
}

.tools-parent-container .recommendations li:nth-child(5) {
    animation-delay: 0.9s;
}

.tools-parent-container .recommendations li:nth-child(6) {
    animation-delay: 1s;
}

.tools-parent-container .recommendations li:nth-child(7) {
    animation-delay: 1.1s;
}

.tools-parent-container .recommendations li:nth-child(8) {
    animation-delay: 1.2s;
}

.tools-parent-container .recommendations li:nth-child(9) {
    animation-delay: 1.3s;
}

@keyframes recSlideIn3D {
    0% {
        opacity: 0;
        transform: translateX(-25px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateX(5px) scale(1.01);
    }

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

.tools-parent-container .recommendations li:last-child {
    border-bottom: none;
}

.tools-parent-container .recommendations li .rec-icon {
    font-size: var(--fs-12-18);
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-dark);
    width: var(--fs-12-20);
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container .recommendations li:hover .rec-icon {
    transform: scale(1.2) rotate(5deg);
}

.tools-parent-container {
    /* ===== NO RISK ===== */
}

.tools-parent-container .no-risk-container {
    text-align: center;
    padding: var(--fs-16-32) var(--fs-12-20);
}

.tools-parent-container .no-risk-icon {
    font-size: var(--fs-26-60);
    margin-bottom: var(--fs-10-16);
    color: var(--success);
    animation: noRiskBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

    50% {
        transform: scale(1.2) rotate(5deg);
    }

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

.tools-parent-container .no-risk-title {
    font-size: var(--fs-12-24);
    font-weight: 800;
    color: var(--success);
    margin-bottom: var(--fs-10-16);
}

.tools-parent-container .no-risk-desc {
    color: var(--text-muted);
    font-size: var(--fs-12-16);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

.tools-parent-container {
    /* ===== CONFETTI ===== */
}

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

.tools-parent-container .confetti-piece {
    position: absolute;
    top: -10px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

.tools-parent-container {
    /* ===== FOOTER ===== */
}

.tools-parent-container .app-footer {
    margin-top: var(--fs-12-24);
    opacity: 0;
    animation: footerFadeIn 0.8s ease 1.2s forwards;
}

@keyframes footerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tools-parent-container .footer-card {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: var(--fs-12-24);
    padding: var(--fs-16-32) var(--fs-12-24);
    box-shadow: 0 4px 20px var(--shadow-soft);
}

.tools-parent-container .footer-header {
    display: flex;
    align-items: center;
    gap: var(--fs-10-16);
    margin-bottom: var(--fs-12-18);
    padding-bottom: var(--fs-10-16);
    border-bottom: 1.5px solid rgba(255, 198, 47, 0.2);
}

.tools-parent-container .footer-header i {
    font-size: var(--fs-12-20);
    color: var(--accent-dark);
}

.tools-parent-container .footer-header span {
    font-size: var(--fs-12-18);
    font-weight: 700;
    color: var(--text-dark);
}

.tools-parent-container .footer-text {
    font-size: var(--fs-10-16);
    color: var(--text-light);
    line-height: 1.7;
}

.tools-parent-container .footer-text p {
    margin-bottom: var(--fs-10-16);
}

.tools-parent-container .footer-text p:last-child {
    margin-bottom: 0;
}

.tools-parent-container .footer-bottom {
    text-align: center;
    padding-top: var(--fs-12-18);
    margin-top: var(--fs-12-18);
    border-top: 1px solid rgba(255, 198, 47, 0.15);
    font-size: clamp(10px, 9px + 0.2vw, 13px);
    color: var(--text-muted);
}

.tools-parent-container {
    /* ===== SMALL SCREEN GRID ===== */
}

@media (max-width: 480px) {
    .tools-parent-container .results-grid {
        grid-template-columns: 1fr;
    }

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

    .tools-parent-container .btn {
        min-width: unset;
    }

    .tools-parent-container .uv-scale-labels span {
        font-size: clamp(7px, 6.5px + 0.2vw, 10px);
    }

    .tools-parent-container .toast {
        min-width: unset;
        max-width: calc(100vw - 32px);
        font-size: clamp(11px, 10px + 0.2vw, 14px);
    }
}

@media (max-width: 360px) {
    .tools-parent-container .time-input-group {
        gap: 4px;
    }

    .tools-parent-container .time-separator {
        font-size: var(--fs-10-16);
    }
}

.tools-parent-container {
    /* ===== LARGE SCREENS ===== */
}

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

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

.tools-parent-container {
    /* ===== FLOATING LABEL ANIMATION ===== */
}

.tools-parent-container .field-animated {
    position: relative;
}

.tools-parent-container .field-animated .form-input:focus+.float-bar,
.tools-parent-container .field-animated .form-select:focus+.float-bar {
    width: 100%;
}

.tools-parent-container .float-bar {
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-bg), var(--accent-honey));
    margin-top: -2px;
    border-radius: 0 0 2px 2px;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.tools-parent-container {
    /* ===== DECORATIVE DOTS ===== */
}

.tools-parent-container .decorative-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: var(--fs-10-16) 0;
    opacity: 0;
    animation: fadeInUp 0.5s ease 0.4s forwards;
}

.tools-parent-container .decorative-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary-bg);
    animation: dotBounce 1.5s ease-in-out infinite;
}

.tools-parent-container .decorative-dots .dot:nth-child(2) {
    animation-delay: 0.15s;
    background: var(--accent-warm);
}

.tools-parent-container .decorative-dots .dot:nth-child(3) {
    animation-delay: 0.3s;
    background: var(--accent-honey);
}

@keyframes dotBounce {

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

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

.tools-parent-container {
    /* ===== WAVE DIVIDER ===== */
}

.tools-parent-container .wave-divider {
    height: 20px;
    position: relative;
    overflow: hidden;
    margin: var(--fs-10-16) 0;
}

.tools-parent-container .wave-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='rgba(255,198,47,0.12)' d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,50 1440,40 L1440,100 L0,100 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 100% 100%;
    animation: waveMove 8s linear infinite;
}

@keyframes waveMove {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: 1440px;
    }
}

.tools-parent-container {
    /* ===== SHIMMER EFFECT ===== */
}

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

.tools-parent-container .shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmerSlide 3s ease-in-out infinite;
}

@keyframes shimmerSlide {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 100%;
    }
}

.tools-parent-container {
    /* ===== GLOW BORDER EFFECT ===== */
}

.tools-parent-container .glow-border {
    position: relative;
}

.tools-parent-container .glow-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--secondary-bg), var(--accent-honey), var(--secondary-bg), var(--accent-warm));
    background-size: 400% 400%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: glowRotate 4s linear infinite;
}

.tools-parent-container .glow-border:hover::after {
    opacity: 0.6;
}

@keyframes glowRotate {
    0% {
        background-position: 0% 50%;
    }

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

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

.tools-parent-container {
    /* ===== PRINT ===== */
}

@media print {
    .tools-parent-container {
        background: white;
    }

    .tools-parent-container .tool-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .tools-parent-container .bg-decoration,
    .tools-parent-container .sunray-container,
    .tools-parent-container .toast-container,
    .tools-parent-container .particle-container {
        display: none;
    }
}

.tools-parent-container {
    /* ===== FOCUS VISIBLE ===== */
}

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

.tools-parent-container {
    /* ===== MICRO-INTERACTION: INPUT GLOW ===== */
}

.tools-parent-container .form-group.focused .form-label {
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.tools-parent-container {
    /* ===== STAGGERED CARD ENTRANCE ===== */
}

.tools-parent-container .entrance-stagger {
    opacity: 0;
    transform: translateY(50px) scale(0.94);
}

.tools-parent-container .entrance-stagger.entrance-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container {
    /* ===== RESULT SECTION ANIMATIONS ===== */
}

.tools-parent-container .result-section-enter {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
}

.tools-parent-container .result-section-enter.result-section-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tools-parent-container {
    /* ===== COUNT UP ANIMATION ===== */
}

.tools-parent-container .count-up-value {
    display: inline-block;
    transition: transform 0.2s ease;
}

.tools-parent-container .count-up-value.counting {
    animation: countPulse 0.1s ease;
}

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

    50% {
        transform: scale(1.05);
    }

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

.tools-parent-container {
    /* ===== PDF DOWNLOAD BUTTON (Exact from Running Pace Calculator) ===== */
}

.tools-parent-container .btn-download-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    padding: var(--sp-12) var(--sp-20);
    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: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: var(--fs-10-16);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.3s var(--spring), 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);
    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 (Exact from Running Pace Calculator) ===== */
}

.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: "Inter", "Segoe UI", Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 2.5px var(--accent-warm);
    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-warm);
    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-warm), 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 #main-wrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

.tools-parent-container .tool-card,
.tools-parent-container .form-input,
.tools-parent-container .form-select,
.tools-parent-container .btn,
.tools-parent-container .pdf-loader-progress-fill {
    max-width: none;
}

.tools-parent-container .pdf-loader-overlay *,
.tools-parent-container .pdf-loader-overlay *::before,
.tools-parent-container .pdf-loader-overlay *::after {
    max-width: none !important;
}