@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
        --primary: #FE2C55;
        --secondary: #25F4EE;
        --accent: #6C63FF;
        --bg-light: #F8FAFC;
        --text-main: #1E293B;
    }

    body { 
        background: var(--bg-light); 
        font-family: 'Inter', sans-serif !important; 
        color: var(--text-main);
        overflow-x: hidden;
    }

    /* Soft Mesh Background Effect */
    .bg-mesh {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
        background-color: #f8fafc;
        background-image: 
            radial-gradient(at 0% 0%, rgba(254, 44, 85, 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 0%, rgba(37, 244, 238, 0.05) 0px, transparent 50%),
            radial-gradient(at 100% 100%, rgba(108, 99, 255, 0.05) 0px, transparent 50%),
            radial-gradient(at 0% 100%, rgba(254, 44, 85, 0.05) 0px, transparent 50%);
    }

    /* Top Navigation Style Bar */
    .tool-header { padding: 40px 0 20px; text-align: center; }
    .tool-header h1 { font-weight: 800; letter-spacing: -1.5px; color: #0F172A; font-size: 2.8rem; }
    .tool-header p { color: #64748B; font-size: 1.1rem; }

    /* Modern Search Pill */
    .search-wrapper { max-width: 550px; margin: 0 auto 50px; }
    .search-pill {
        background: #fff;
        border-radius: 100px;
        padding: 10px 10px 10px 30px;
        display: flex;
        align-items: center;
        box-shadow: 0 15px 35px rgba(0,0,0,0.05);
        border: 1px solid rgba(0,0,0,0.03);
    }
    .search-pill input {
        border: none; outline: none; width: 100%; font-size: 1rem; font-weight: 500; color: #334155;
    }
    .btn-track {
        background: linear-gradient(135deg, var(--primary), #FF5678);
        color: #fff; border: none; border-radius: 100px; padding: 12px 30px;
        font-weight: 700; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(254, 44, 85, 0.2);
    }
    .btn-track:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(254, 44, 85, 0.3); }

    /* Main Glass Card */
    .glass-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 40px;
        padding: 50px 30px;
        box-shadow: 0 25px 70px rgba(0,0,0,0.03);
        text-align: center;
        position: relative;
    }

    .profile-circle { position: relative; margin-bottom: 25px; }
    .avatar { 
        width: 140px; height: 130px; border-radius: 50%; padding: 5px;
        background: linear-gradient(var(--primary), var(--secondary));
        display: inline-block;
    }
    .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; }
    
    .status-pulse {
        position: absolute; top: 10px; right: calc(50% - 70px);
        background: #10B981; color: #fff; font-size: 10px; font-weight: 900;
        padding: 3px 12px; border-radius: 50px; border: 3px solid #fff;
    }

    /* Counter Styles */
    .odometer.display-large { 
        font-weight: 800; font-size: 5.5rem; color: #0F172A; 
        line-height: 1; margin: 10px 0; display: block;
    }
    .follower-label { text-transform: uppercase; font-weight: 700; color: #94A3B8; letter-spacing: 3px; font-size: 0.9rem; }

    /* Secondary Stats */
    .mini-card {
        background: #fff; border-radius: 24px; padding: 25px;
        border: 1px solid rgba(0,0,0,0.02); box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        transition: 0.3s; height: 100%;
    }
    .mini-card:hover { transform: translateY(-5px); }
    .mini-card .val { font-weight: 800; font-size: 1.8rem; display: block; color: #1E293B; }
    .mini-card .lab { font-size: 0.75rem; font-weight: 600; color: #64748B; text-transform: uppercase; }
    .icon-box { 
        width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
        margin: 0 auto 15px; font-size: 1.2rem;
    }

    /* Footer Tools */
    .related-tool-link {
        background: #fff; padding: 15px; border-radius: 18px; border: 1px solid #E2E8F0;
        display: block; text-decoration: none; color: #475569; font-weight: 600; transition: 0.3s;
    }
    .related-tool-link:hover { border-color: var(--primary); color: var(--primary); }

    /* Mobile Logic */
    @media (max-width: 768px) {
        .tool-header h1 { font-size: 2rem; }
        .odometer.display-large { font-size: 2.5rem; }
        .glass-card { padding: 30px 15px; }
    }